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


Posted in Javascript onAugust 21, 2017

直接上代码:

<!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使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js的flv视频播放器插件使用方法
Jun 23 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
vue实现移动端拖动排序
Aug 21 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
webpack3+React 的配置全解
Aug 21 #Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 #Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 #Javascript
Vue编写多地区选择组件
Aug 21 #Javascript
使用vue制作FullPage页面滚动效果
Aug 21 #Javascript
详解Layer弹出层样式
Aug 21 #Javascript
JS数组操作之增删改查的简单实现
Aug 21 #Javascript
You might like
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
关于Intype一些小问题的解决办法
2008/03/28 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
php 函数中使用static的说明
2012/06/01 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
分享一个asp.net pager分页控件
2012/01/04 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
python mock测试的示例
2020/10/19 Python
Python: glob匹配文件的操作
2020/12/11 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
会计师职业生涯规划范文
2014/02/18 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
实习科室评语
2015/01/04 职场文书
活着观后感
2015/06/03 职场文书
小学生家长意见
2015/06/03 职场文书