html cookie购物车,原生JS 购物车及购物页面的cookie使用方法

直接上代码：

购物页面

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:"￥";

}

window.onload = function(){

var goods = document.getElementsByClassName('goods')[0];

// 用于保存购物车商品信息

var carList = [];

// 先获取当前cookie

var cookies = document.cookie.split('; ');

for(var i=0;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'){

// 获取当前li

var 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){

// 添加到carList

carList.push(goodsObj);

}else{

// 先判断cookie中有无相同的guid商品

for(var i=0;i

// 如果商品已经存在cookie中，则数量+1

if(carList[i].guid === currentGUID){

carList[i].qty++;

break;

}

}

// 如果原cookie中没有当前商品

if(i===carList.length){

// 添加到carList

carList.push(goodsObj);

}

}

// 存入cookie

// 把对象/数组转换诚json字符串：JSON.stringify()

document.cookie = 'carlist=' + JSON.stringify(carList);

}

}

}

短袖衬衣

98.88

添加到购物车

短袖衬衣2

88.88

添加到购物车

短袖衬衣3

9.98

添加到购物车

短袖衬衣4

8.88

添加到购物车

去结算

//购物车页面

购物车

#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;}

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

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

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 = '' + subPrice.toFixed(2) + '';

}

// 删除商品

oCarList.onclick = function(e){

e = e || window.event;

var target = e.target || e.srcElement;

// 是否点击了删除按钮

if(target.className === 'btn-close'){

var currentLi = target.parentElement;

// 获取当前guid

var currentGUID = currentLi.getAttribute('data-guid');

// 删除cookie中对应的商品

// 根据guid取对比

for(var i=0;i

// 找出要删除的商品

if(carList[i].guid === currentGUID){

carList.splice(i,1);

break;

}

}

// 更新cookie

document.cookie = 'carlist=' + JSON.stringify(carList);

// 删除li节点

currentLi.parentElement.removeChild(currentLi);

}

}

// 清空购物车

// 1、删除DOM节点

// 2、删除cookie

btnClear.onclick = function(){

oCarList.innerHTML = '';

oSubPrice.innerHTML = '';

// 利用设置有效期位过期事件来达到删除cookie的效果

var now = new Date();

now.setDate(now.getDate()-7);

document.cookie = 'carlist=xx;expires=' + now;

}

}

购物车

清空购物车

以上这篇原生JS 购物车及购物页面的cookie使用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。