当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 原生JS 购物车及购物页面的cookie使用方法

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

直接上代码：

<!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 = [];

// 先获取当前cookie
var 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'){

// 获取当前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<carlist.length;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);
}

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

// 获取当前guid
var 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;
}
}

// 更新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;
}
}

</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使用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网