原生js+cookie实现购物车功能的方法分析

2020-11-27 来源：飒榕旅游知识分享网

本文实例讲述了原生js+cookie实现购物车功能的方法。分享给大家供大家参考，具体如下：

这里使用js+cookie实现简单的购物车功能。

首先是简单的HTML结构，只是为了演示下功能。

<ul>
 <li><span>a0001</span><span>shdfi</span><span>￥98.00</span>
<input type="button" value="加入购物车"></li>
 <li><span>a0002</span><span>fbvfgdb</span><span>￥698.00</span>
<input type="button" value="加入购物车"></li>
 <li><span>a0003</span><span>dfdfi</span><span>￥988.00</span>
<input type="button" value="加入购物车"></li>
 <li><span>a0004</span><span>sssi</span><span>￥998.00</span>
<input type="button" value="加入购物车"></li>
 <li><span>a0005</span><span>yyu</span><span>￥98.00</span>
<input type="button" value="加入购物车"></li>
 <li><span>a0006</span><span>sheri</span><span>￥598.00</span>
<input type="button" value="加入购物车"></li>
 <li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span>
<input type="button" value="加入购物车"></li>
 <li><span>sbnm,</span><span>￥698.00</span><input type="button" value="加
入购物车"></li>
</ul>
<a href="购物车查看页面.html" rel="external nofollow" >查看购物车</a>

下面的代码是实现点击添加按钮时，把商品信息加入cookie，注释比较详细，在代码中我把操作cookie（set和get封装为cookieUtil对象的方法，方便调用）。

<script>
 //JSON.parse
 //JSON.stringify
 onload = function () {
 var input = document.getElementsByTagName("input");
 //判断是否存在cookie，或是第一次添加
 var arr = cookieUtil.getCookie("car") ? 
JSON.parse(cookieUtil.getCookie("car")) : [];
 //遍历给每个input元素添加点击事件
 for (var j = 0; j < input.length; j++) {
 input[j].onclick = function () {
 var g_id = this.parentNode.children[0].innerHTML;
 var g_name = this.parentNode.children[1].innerHTML;
 var g_price = this.parentNode.children[2].innerHTML;
 //遍历cookie，判断是否已经存在该商品
 for (var i = 0; i < arr.length; i++) {
 if (arr[i].g_id == g_id) {
 //已经存在该商品，商品数量+1
 arr[i].num++;
 break;//立即结束遍历
 }
 }
 //如果i的值与arr长度相同，则证明遍历结束也没有进入过if条件语句，
 //cookie中不存在该商品,新建一个商品对象，并添加到数组中
 if (i == arr.length) {
 var goods = {
 "g_id" : g_id,
 "g_name" : g_name,
 "g_price" : g_price,
 num : 1
 }
 arr.push(goods);
 }
 //把更新后的数组序列化为JSON字符串，保存到cookie中
 var date = new Date();
 date.setDate(date.getDate() + 10); //保存十天
 //保存cookie
 cookieUtil.setCookie("car", JSON.stringify(arr), date); 
 }
 }
 }
</script>

这里是封装的cookieUtil对象

//cookie Util
var cookieUtil = {
 //添加cookie
 setCookie: function (name, value, expires) {
 var cookieText = encodeURIComponent(name) + "=" + 
encodeURIComponent(value);
 if (expires && expires instanceof Date) {
 cookieText += "; expires=" + expires;
 }
 // if (domain) {
 // cookieText += "; domain=" + domain;
 // }
 document.cookie = cookieText;
 },
 //获取cookie
 getCookie: function (name) {
 var cookieText = decodeURIComponent(document.cookie);
 var cookieArr = cookieText.split("; ");
 for (var i = 0; i < cookieArr.length; i++) {
 var arr = cookieArr[i].split("=");
 if (arr[0] == name) {
 return arr[1];
 }
 }
 return null;
 },
 //删除cookie
 unsetCookie: function (name) {
 document.cookie = encodeURIComponent(name) + "=; expires=" + 
new Date(0);
 }
};

上面的代码都非常好理解，下面这个页面就是把cookie中的商品信息取出来。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>查看购物车页面</title>
 <script src="../Utils.js"></script>
 <script>
 onload = function () {
 var ul = document.getElementsByTagName("ul")[0];
 var arr = cookieUtil.getCookie("car");
 if (arr) {
 arr = JSON.parse(arr);
 //存在cookie则取出来显示到页面上
 for (var i = 0; i < arr.length; i++) {
 //每个数组元素对应的是一个商品对象
 var goods = arr[i];
 var li = document.createElement("li");
 li.innerHTML = "商品名称：" + goods.g_name + "，商品数
量" + goods.num + "，商品单价：" + goods.g_price;
 ul.appendChild(li);
 }
 } else {
 alert("购物车中还不存在商品！");
 }
 }
 </script>
</head>
<body>
<ul></ul>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

显示全文

全部栏目

原生js+cookie实现购物车功能的方法分析