基于js，localStorage的商品列表和购物车案例

案例大致可以分为两个部分：商品列表的实现和购物车的实现

商品列表

商品是通过构造json数据实现的。具体的json数据如下：

其中的图片需要大家自行更换。

[{"id": 1,"src": "http://img12.360buyimg.com/n7/jfs/t1/4136/40/6201/250287/5ba1f333E745fc8b9/b34c5ccc4c4fd548.jpg","price": 1099,"name": "小米8青春版 镜面渐变AI双摄 6GB+64GB 深空灰 全网通4G"},{"id": 2,"src": "https://img11.360buyimg.com/n7/jfs/t2278/69/129833021/96430/df8863b1/55f0e861Nf585867f.jpg","price": 3599.00,"name": "Apple iPhone 6s Plus (A1699) 128G 银色 移动联通电信4G手机"},{"id": 3,"src": "https://img10.360buyimg.com/n7/jfs/t3985/131/486256904/433682/1d9fc4d0/584fcc81N1a31a2c5.jpg","price": 3059.00,"name": "华为 Mate 9 Pro 6GB+128GB版 银钻灰 移动联通电信4G手机 双卡双待"},{"id": 4,"src": "https://img10.360buyimg.com/n7/jfs/t10729/149/1744838942/273871/5b00d30c/59e5bd89Ndc046ccd.jpg","price": 1099.00,"name": "荣耀 畅玩7X 4GB+32GB 全网通4G全面屏手机 标配版 幻夜黑"},{"id": 5,"src": "https://img10.360buyimg.com/n7/jfs/t3985/131/486256904/433682/1d9fc4d0/584fcc81N1a31a2c5.jpg","price": 3059.00,"name": "华为 Mate 9 Pro 6GB+128GB版 银钻灰 移动联通电信4G手机 双卡双待"},{"id": 6,"src": "https://img10.360buyimg.com/n7/jfs/t10729/149/1744838942/273871/5b00d30c/59e5bd89Ndc046ccd.jpg","price": 1099.00,"name": "荣耀 畅玩7X 4GB+32GB 全网通4G全面屏手机 标配版 幻夜黑"},{"id": 7,"src": "https://img10.360buyimg.com/n7/jfs/t3985/131/486256904/433682/1d9fc4d0/584fcc81N1a31a2c5.jpg","price": 3059.00,"name": "华为 Mate 9 Pro 6GB+128GB版 银钻灰 移动联通电信4G手机 双卡双待"},{"id": 8,"src": "https://img10.360buyimg.com/n7/jfs/t10729/149/1744838942/273871/5b00d30c/59e5bd89Ndc046ccd.jpg","price": 1099.00,"name": "荣耀 畅玩7X 4GB+32GB 全网通4G全面屏手机 标配版 幻夜黑"}
]

接下来是商品列表的css样式：

 *{margin: 0;padding: 0;}#cont{width: 1000px;overflow: hidden;margin: 30px auto;}.box{width: 250px;border: 1px solid #f2f2f2;box-sizing: border-box;text-align: center;float: left;}.box img{width: 90%;display: block;margin: 10px auto;}.box span{display: block;color: red;}.box p{height: 52px;overflow: hidden;font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;line-height: 26px;}.btn-lg {height: 30px;line-height: 30px;padding: 0 26px;font-size: 18px;font-family: "microsoft yahei";margin-bottom: 5px;}.btn-special1{font-weight: 700;}.btn-special1 {background-color: #df3033;color: #fff;}.btn-special1{display: inline-block;text-align: center;vertical-align: middle;cursor: pointer;}a{color: #666;text-decoration: none;}.goods_item_price{color: rgb(221, 69, 69); margin: 0px 5px;}

创建好商品html页面，要访问json数据的话，我们就需要准备好，ajax的封装函数，通过get方式获取到json字符串，再转换为json对象。遍历它得到每一个商品，再追加到body中。

//ajax的封装js文件class axios {static get (url, data) {return axios.http('get', url, data)}static post (url, data) {return axios.http('post', url, data)}static http (type, url, data) {let params = nullif (data) {// 临时在 params 中保存数组数据params = []// 迭代 data 对象中各属性 例：{username: 'admin', password: 'admin'}for (const key in data) {params.push(`${key}=${data[key]}`) // ['username=admin', 'password=admin']}// 将数组中每个元素以 `&` 符号拼接，生成查询字符串结构params = params.join('&'); // username=admin&password=admin}// 如果是 GET 数据，并存在向后端发送的数据，则将查询字符串以 ? 号拼接在 URL 后if (type === 'GET' && params) {url += `?${params}`params = null}return new Promise((resolve, reject) => {let xhr = new XMLHttpRequest();xhr.open(type, url);// post 需要设置头部type == 'post' && xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');xhr.send(params);xhr.onreadystatechange = () => {if (xhr.readyState == 4) {if (xhr.status == 200) {// 成功resolve(xhr.response)} else {// 失败reject('服务器错误');}// console.log(xhr.response);}}})}
}function $ (tag) {return document.querySelector(tag)
}

下面是商品页面的实现过程

<html><head><title></title><meta charset="utf-8" /><link rel="stylesheet" href="css/goodsLst.css" />
</head><body><div id="cont"></div>
</body></html>
<script src="./js/axios.js"></script>
<script>// 1 构造json数据,每一个json中就是一个商品axios.get('./goods.json').then(function(data) {// console.log(data);let content = '';//字符串转化data = JSON.parse(data);data.forEach(v => { //遍历数据content += `<div class="box"><img src="${v.src}" alt=""><p>${v.name}</p><span class="goods_item_price" data-price-id="100004222715" style="">¥${v.price}</span><a href="#none" id="InitCartUrl" class="btn-special1 btn-lg" onclick="shopCart(${v.id},'${v.name}','${v.src}','${v.price}',1)">加入购物车</a></div>`;});//追加到页面中$('#cont').innerHTML = content;});</script>

有了商品列表，就应该明白购物车商品列表之间关系。在商品列表选择自己喜欢的商品，点击加入购物车。然后在购物车的页面中就应该生成对应商品的各种信息：包括商品的名称，图片，加入购物车的数量，商品的单价，商品的总价。

那么购物车的页面应该有哪些功能呢？

首先应该要提供给用户，全选所有购物车中商品的按钮，其次是可以删除不想要了的商品的功能，还应该有能在购物车页面给商品增加和减少数量的操作。最后还应该有合计的显示。包括总共有多少商品，总共的价格，还有去结算的按钮。

以上是基本功能的设想和构建。

最重要的一步出现了！！！

购物车的页面怎么样才能收到商品列表的信息。

这就要利用到一个HTML5新加入的一个localStorage特性。由于cookie占用带宽和存储空间不足的问题(cookie中每条cookie的存储空间为4k)。因此便有了localStorage的诞生。它的作用也是用来作本地存储，但是ocalStorage的大小，一般浏览器支持的是5M。

localStorage的优点和缺点

优点
1、localStorage突破了cookie的4K限制。
2、localStorage可以将请求的数据直接存储到本地，这个相当于一个5M大小的前端页面数据库，相比于cookie可以节约带宽。

缺点
        1、在不同浏览器中的大小不一样，并且IE浏览器在IE8以上的才支持。
        2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，要使用JSON对象类型则需要一些转换。
        3、localStorage在浏览器的隐私模式下面是不可读取的。
        4、localStorage不能被爬虫抓取到。

所以我们可以通过设置localStorage，将商品的各种信息，存入浏览器。在购物车的页面中，我们也能get到，然后转换利用。

知道怎么传递数据之后，还要明白，购物车增加商品的过程是如何判断，然后进行的。下面通过一张图来解释。

接下来就是给商品列表绑定点击事件，加入购物车的功能。

可以在上面的代码之后，加入以下代码

//增加到购物车点击事件function shopCart(id, name, src, price, num) {//获取购物车的数据let msgCart = localStorage.getItem('Cart');//1.判断购物车是否有数据if (msgCart) { //2有数据// console.log(msgCart);msgCart = JSON.parse(msgCart); //转化数据//4.商品是否存在let key = false; //判断存在的标识msgCart.forEach(v => { //遍历数据if (v.id == id) { //4.1存在//给商品数量增加v.num = (v.num - 0) + (num - 0);// console.log(v.num);key = true; //存在};});//4.2不存在if (!key) {msgCart.push({ //添加该商品信息id,name,src,price,num});}//重新更新存入localStoragelocalStorage.setItem('Cart', JSON.stringify(msgCart));} else { //3没数据//以数组对象形式保存let objGoods = {id,name,src,price,num};let arrGoods = [objGoods];//增加到localStoragelocalStorage.setItem('Cart', JSON.stringify(arrGoods))}};

购物车页面

最开始还是页面的基本html结构和css的样式。

其中引入的jquery和layer是给后面删除商品增加确认框的js文件。

html结构

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>购物车66</title><link rel="stylesheet" href="css/cart.css" /><script src="../9-24/jquery-2.2.4.js"></script><script src="./layer/layer.js"></script>
</head><body><table id="cartTable"><thead><tr><th><label><input class="check-all check" type="checkbox"/>&nbsp;全选</label></th><th>商品</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr></thead><tbody><!-- <tr><td class="checkbox"><input class="check-one check" type="checkbox" /></td><td class="goods"><img src="data:images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td><td class="price">5999.88</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">5999.88</td><td class="operation"><span class="delete">删除</span></td></tr> --></tbody></table><div class="foot" id="foot"><label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;全选</label><a class="fl delete" id="deleteAll" href="javascript:;">删除</a><div class="fr closing">结 算</div><div class="fr total">合计：￥<span id="priceTotal">0.00</span></div><div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div><div class="selected-view"><div id="selectedViewList" class="clearfix"><!--<div><img src="data:images/1.jpg"><span>取消选择</span></div>--></div><span class="arrow">◆<span>◆</span></span></div></div><script type="text/javascript" src="./js/car.js"></script>
</body></html>

css样式

* {margin: 0;padding: 0;
}
a {color: #666;text-decoration: none;
}
body {padding: 20px;color: #666;
}
.fl{float: left;
}
.fr {float: right;
}
table {border-collapse: collapse;border-spacing: 0;border: 0;text-align: center;width: 937px;
}
th, td {border: 1px solid #CADEFF;
}
th {background: #e2f2ff;border-top: 3px solid #a7cbff;height: 30px;
}
td {padding: 10px;color: #444;
}
tbody tr:hover {background: RGB(238,246,255);
}
.checkbox {width: 60px;
}
.goods {width: 300px;
}
.goods span {width: 180px;margin-top: 20px;text-align: left;float: left;
}
.price {width: 130px;
}
.count {width: 90px;
}
.count .add, .count input, .count .reduce {float: left;margin-right: -1px;position: relative;z-index: 0;
}
.count .add, .count .reduce {height: 23px;width: 17px;border: 1px solid #e5e5e5;background: #f0f0f0;text-align: center;line-height: 23px;color: #444;
}
.count .add:hover, .count .reduce:hover {color: #f50;z-index: 3;border-color: #f60;cursor: pointer;
}
.count input {width: 50px;height: 15px;line-height: 15px;border: 1px solid #aaa;color: #343434;text-align: center;padding: 4px 0;background-color: #fff;z-index: 2;
}
.subtotal {width: 150px;color: red;font-weight: bold;
}
.operation {width: 80px;
}
.operation span:hover, a:hover {cursor: pointer;color: red;text-decoration: underline;
}
img {width: 100px;height: 80px;/*border: 1px solid #ccc;*/margin-right: 10px;float: left;
}.foot {width: 935px;margin-top: 10px;color: #666;height: 48px;border: 1px solid #c8c8c8;background-color: #eaeaea;background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));position: relative;z-index: 8;
}
.foot div, .foot a {line-height: 48px;height: 48px;
}
.foot .select-all {width: 100px;height: 48px;line-height: 48px;padding-left: 5px;color: #666;
}
.foot .closing {border-left: 1px solid #c8c8c8;width: 100px;text-align: center;color: #000;font-weight: bold;background: RGB(238,238,238);cursor: pointer;
}
.foot .total{margin: 0 20px;cursor: pointer;
}
.foot  #priceTotal, .foot #selectedTotal {color: red;font-family: "Microsoft Yahei";font-weight: bold;
}
.foot .selected {cursor: pointer;
}
.foot .selected .arrow {position: relative;top:-3px;margin-left: 3px;
}
.foot .selected .down {position: relative;top:3px;display: none;
}.show .selected .down {display: inline;
}.show .selected .up {display: none;
}
.foot .selected:hover .arrow {color: red;
}
.foot .selected-view {width: 935px;border: 1px solid #c8c8c8;position: absolute;height: auto;background: #ffffff;z-index: 9;bottom: 48px;left: -1px;display:none;
}
.show .selected-view {display: block;
}
.foot .selected-view div{height: auto;
}
.foot .selected-view .arrow {font-size: 16px;line-height: 100%;color:#c8c8c8;position: absolute;right: 330px;bottom: -9px;
}
.foot .selected-view .arrow span {color: #ffffff;position: absolute;left: 0px;bottom: 1px;
}
#selectedViewList {padding: 20px;margin-bottom: -20px;
}
#selectedViewList div{display: inline-block;position: relative;width: 100px;height: 80px;border: 1px solid #ccc;margin: 10px;
}
#selectedViewList div span {display: none;color: #ffffff;font-size: 12px;position: absolute;top: 0px;right: 0px;width: 60px;height: 18px;line-height: 18px;text-align: center;background: RGBA(0,0,0,.5);cursor: pointer;
}
#selectedViewList div:hover span {display: block;
}

下面是购物车页面具体的js代码：

其中包括了商品的追加，全选框的事件，商品数量的增加和减少，以及实时更新localStorage的方法和通知数量总价的方法，最后是商品的删除。

class Car {constructor() {//2.获取localStorage数据，追加到页面上this.getLocalStorage();//3.获取全选按钮,子选项节点this.allCheck = document.querySelectorAll('.check-all');this.oneCheck = document.querySelectorAll('.check-one');// 3.全选按钮,绑定事件this.allCheck[0].addEventListener('click', this.allClick.bind(this, 1))this.allCheck[1].addEventListener('click', this.allClick.bind(this, 0));//4.单选按钮,绑定事件this.oneClick();//5.给＋号绑定点击事件this.$('tbody').addEventListener('click', this.tbodyFn.bind(this));};//3-1统计数量和总价totalNum(oneObj = '') {// console.log(111);// 删除的时候,重新获取check-one数据this.oneCheck = oneObj || this.oneCheck;//定义总共的数量和价格let totalnum = 0;let totalprice = 0;//循环所有购物车商品，选择选中的this.oneCheck.forEach(v => {// console.log(v);if (v.checked) { //选中的商品//获取选中的商品的数量和小计let num = v.parentNode.parentNode.querySelector('.count-input').value - 0;let tprice = v.parentNode.parentNode.querySelector('.subtotal').innerHTML - 0;//计算总的数量和价格totalnum += num;totalprice += tprice;};//讲总的数量和价格给结算this.$('#selectedTotal').innerHTML = totalnum;this.$('#priceTotal').innerHTML = totalprice;});};//3.全选按钮点击事件allClick(index, eve) {//获取全选按钮的状态值// console.log(eve.target);let allStatus = eve.target.checked;//让子选项的状态值跟随全选按钮this.oneCheck.forEach(v => {v.checked = allStatus;});//另外一个全选按钮状态值this.allCheck[index].checked = allStatus;//调用统计函数this.totalNum();};//4.单选按钮,绑定事件oneClick() {// console.log(this);//改变this指向let that = this;//定义计数// let count = 0;//获取子选项的长度let len = this.oneCheck.length;//遍历子选项this.oneCheck.forEach(v => {//点击状态,数量加1// v.checked && count++;//在给他们绑定点击事件v.onclick = function() {/* if (v.checked) {count++;//全选按钮选中count == len && (that.allCheck[0].checked = true);count == len && (that.allCheck[1].checked = true);} else {count--;//全选按钮不选中that.allCheck[1].checked = false;that.allCheck[0].checked = false;} */if (v.checked) { //选项为选中状态var sum = 0;that.oneCheck.forEach(v => { //遍历所有的子选项v.checked && sum++; //选中则加1});if (sum == len) { //长度和数量相等that.allCheck[1].checked = true; //全选按钮选中that.allCheck[0].checked = true;}} else {that.allCheck[1].checked = false; //全选按钮不选中that.allCheck[0].checked = false;};//调用统计函数that.totalNum();};});};//5.tbody号绑定点击事件tbodyFn(eve) {// console.log(eve.target);//判断是哪个节点的点击if (eve.target.className == 'add') {// console.log('add');this.addFn(eve.target);}if (eve.target.className == 'delete') {// console.log('delete');this.deleteFn(eve.target);};if (eve.target.className == 'reduce') {// console.log('delete');this.reduceFn(eve.target);}};//6.增加方法addFn(eve) {//获取到数量的对象,加1let valueObj = eve.previousElementSibling;let value = valueObj.value - 0 + 1;// console.log(value);//重新给数量赋值valueObj.value = value;//取出商品的单价let price = eve.parentNode.previousElementSibling.innerHTML;//获取小计节点let total = eve.parentNode.nextElementSibling;//更新小计total.innerHTML = price * value;//获取子选项节点let trObj = eve.parentNode.parentNode.children[0];// console.log(trObj);//判断如果选中trObj.firstElementChild.checked && this.totalNum();//获取到商品的idlet id = trObj.parentNode.getAttribute('goods-id');// console.log(id);//调用更新localStorage方法this.newStorage(id, value);};//7.删除方法deleteFn(eve) {// console.log(eve);//获取到当前商品的idlet idObj = eve.parentNode.parentNode;let id = idObj.getAttribute('goods-id');// console.log(id);let that = this;// 弹出框,是否删除layer.confirm('是否删除？', {btn: ['确定', '取消'] //按钮}, function(index) {layer.close(index);//删除当前的tridObj.remove();//如果删除的商品处于选中状态，更新结算的值if ((idObj.children)[0].firstElementChild.checked) {that.totalNum(document.querySelectorAll('.check-one'));};//更新localStoragethat.newStorage(id);});};//9.减少方法reduceFn(eve) {//获取到数量的对象,减1let valueObj = eve.nextElementSibling;let value = valueObj.value - 1;//重新给数量赋值valueObj.value = value;//取出商品的单价let price = valueObj.parentNode.previousElementSibling.innerHTML;//获取小计节点let total = valueObj.parentNode.nextElementSibling;//更新小计total.innerHTML = price * value;//获取子选项节点let trObj = valueObj.parentNode.parentNode.children[0];// console.log(trObj);//判断如果选中trObj.firstElementChild.checked && this.totalNum();//获取到商品的idlet id = trObj.parentNode.getAttribute('goods-id');// console.log(id);//调用更新localStorage方法this.newStorage(id, value);};//8.更新localStorage方法newStorage(id, num) {//获取localStorage数据let localS = localStorage.getItem('Cart');//判断数据是否为空if (!localS) return;//转化localS = JSON.parse(localS);//遍历更新数据localS.forEach((v, k) => {if (v.id == id) {if (num) v.num = num;else { localS.splice(k, 1) }}});// 更新到local中localStorage.setItem('Cart', JSON.stringify(localS))};//2.获取localStorage数据，追加到页面上getLocalStorage() {//获取localStoragelet content = localStorage.getItem('Cart');//定义页面内容let html = '';//遍历数据追加到页面上JSON.parse(content).forEach(v => {// console.log(v);html += `<tr goods-id="${v.id}"><td class="checkbox"><input class="check-one check" type="checkbox" /></td><td class="goods"><img src="${v.src}" alt="" /><span>${v.name}</span></td><td class="price">${v.price}</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="${v.num}" /><span class="add">+</span></td><td class="subtotal">${v.price * v.num}</td><td class="operation"><span class="delete">删除</span></td></tr>`;});//追加this.$('tbody').innerHTML = html;};//1.获取节点的方法$(tag) {return document.querySelector(tag);}
};
new Car;

大功告成，可以把你喜欢的商品加入购物车了。！！！