原生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 秒表实现代码
Jul 24 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
js实现轮播图特效
May 28 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
php学习之流程控制实现代码
2011/06/09 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python实现浪漫的烟花秀
2019/01/30 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
旅游投诉信范文
2015/07/02 职场文书
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server