原生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 相关文章推荐
Javascript 类与静态类的实现
Apr 01 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
Python多进程机制实例详解
2015/07/02 Python
python魔法方法-自定义序列详解
2016/07/21 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
党员个人思想汇报
2013/12/28 职场文书
早餐连锁店计划书
2014/01/08 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
2014小学植树节活动总结
2014/03/10 职场文书
清洁员岗位职责
2015/02/15 职场文书
起诉书格式范文
2015/05/20 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
使用 Apache 反向代理的设置技巧
2022/01/18 Servers