直接上代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>购物页面</title><style>ul{list-style:none;padding:0;margin:0;}.goods li{display:inline-block;border:1px solid #ddd;padding:10px;margin:10px;}.goods li:hover{}.goods .price{color:#f00;font-weight:bold;}.goods .price::before{content:"￥";}</style><script>window.onload = function(){var goods = document.getElementsByClassName('goods')[0];// 用于保存购物车商品信息var carList = [];// 先获取当前cookievar cookies = document.cookie.split('; ');for(var i=0;i<cookies.length;i++){var arr = cookies[i].split('=');if(arr[0] === 'carlist'){carList = JSON.parse(arr[1]);}}// 事件委托goods.onclick = function(e){e = e || window.event;var target = e.target || e.srcElement;// 添加到购物车if(target.tagName.toLowerCase() === 'button'){// 获取当前livar currentLi = target.parentElement.parentElement;var children = currentLi.children;var currentGUID = currentLi.getAttribute('data-guid');// 先创建一个对象保存当前商品信息var goodsObj = {};goodsObj.guid = currentGUID;goodsObj.qty = 1;goodsObj.name = children[1].innerHTML;goodsObj.price = children[2].innerHTML;goodsObj.imgUrl = children[0].src;// 如果cookie为空，则直接添加if(carList.length===0){// 添加到carListcarList.push(goodsObj);}else{// 先判断cookie中有无相同的guid商品for(var i=0;i<carList.length;i++){// 如果商品已经存在cookie中，则数量+1if(carList[i].guid === currentGUID){carList[i].qty++;break;}}// 如果原cookie中没有当前商品if(i===carList.length){// 添加到carListcarList.push(goodsObj);}} // 存入cookie// 把对象/数组转换诚json字符串：JSON.stringify()document.cookie = 'carlist=' + JSON.stringify(carList);}}}</script></head><body><ul class="goods"><li data-guid="g01"><img src="images/shirt_1.jpg"><p>短袖衬衣</p><p class="price">98.88</p><div class="add2cart"><button>添加到购物车</button></div></li><li data-guid="g02"><img src="images/shirt_2.jpg"><p>短袖衬衣2</p><p class="price">88.88</p><div class="add2cart"><button>添加到购物车</button></div></li><li data-guid="g03"><img src="images/shirt_3.jpg"><p>短袖衬衣3</p><p class="price">9.98</p><div class="add2cart"><button>添加到购物车</button></div></li><li data-guid="g04"><img src="images/shirt_4.jpg"><p>短袖衬衣4</p><p class="price">8.88</p><div class="add2cart"><button>添加到购物车</button></div></li></ul><a href="04car.html" rel="external nofollow" >去结算</a></body></html>//购物车页面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>购物车</title><style>#carList li{position:relative;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid #ddd;}#carList img{display:block;width:100px;}#carList li .btn-close{position:absolute;top:0;right:0;padding:0 5px;cursor:default;}#carList li .btn-close:hover{color:#fff;}.subPrice{padding:5px 20px;color:#f00;font-weight:bold;text-align:right;}#carList .price{color:#f00;}.price::before{content:'￥';font-size:11px;}#carList .price span{font-size:11px;}</style><script>window.onload = function(){/*读取cookie中的carlist把json字符串转换成对象/数组：JSON.parse()json字符串格式：1.必须用双引号2.不能右注释*/var oCarList = document.getElementById('carList');var oSubPrice = oCarList.nextElementSibling;var btnClear = document.getElementById('btnClear');var carList;var cookies = document.cookie.split('; ');for(var i=0;i<cookies.length;i++){var arr = cookies[i].split('=');if(arr[0] === 'carlist'){console.log(JSON.parse(arr[1]));carList = JSON.parse(arr[1]);}}var subPrice = 0;if(carList){var ul = document.createElement('ul');for(var i=0;i<carList.length;i++){var li = document.createElement('li');// 给每个li添加data-guid属性li.setAttribute('data-guid',carList[i].guid);// 商品名var title = document.createElement('h4');title.innerHTML = carList[i].name;// 商品价格var price = document.createElement('p');price.className = 'price';price.innerHTML = carList[i].price + '×' + carList[i].qty;// 商品图片var img = document.createElement('img');img.src = carList[i].imgUrl;// 添加删除按钮var btnClose = document.createElement('span');btnClose.innerHTML = '×';btnClose.className = 'btn-close';// 计算总价subPrice += carList[i].price*carList[i].qty;li.appendChild(title);li.appendChild(price);li.appendChild(img);li.appendChild(btnClose);ul.appendChild(li);}// 写入页面oCarList.appendChild(ul);// 写入总价// toFixed(n)获取小数点后n位（自动四舍五入，Number类型的方法）oSubPrice.innerHTML = '<span class="price">' + subPrice.toFixed(2) + '</span>';}// 删除商品oCarList.onclick = function(e){e = e || window.event;var target = e.target || e.srcElement;// 是否点击了删除按钮if(target.className === 'btn-close'){var currentLi = target.parentElement;// 获取当前guidvar currentGUID = currentLi.getAttribute('data-guid');// 删除cookie中对应的商品// 根据guid取对比for(var i=0;i<carList.length;i++){// 找出要删除的商品if(carList[i].guid === currentGUID){carList.splice(i,1);break;}}// 更新cookiedocument.cookie = 'carlist=' + JSON.stringify(carList);// 删除li节点currentLi.parentElement.removeChild(currentLi);}}// 清空购物车// 1、删除DOM节点// 2、删除cookiebtnClear.onclick = function(){oCarList.innerHTML = '';oSubPrice.innerHTML = '';// 利用设置有效期位过期事件来达到删除cookie的效果var now = new Date();now.setDate(now.getDate()-7);document.cookie = 'carlist=xx;expires=' + now;}}</script></head><body><h1>购物车</h1><div id="carList"></div><div class="subPrice"></div><a href="#" rel="external nofollow" id="btnClear">清空购物车</a></body></html>以上这篇原生JS 购物车及购物页面的cookie使用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。
新闻热点
疑难解答
