本文实例讲述了原生js+cookie实现购物车功能的方法。分享给大家供大家参考，具体如下：
这里使用js+cookie实现简单的购物车功能。
首先是简单的HTML结构，只是为了演示下功能。
下面的代码是实现点击添加按钮时，把商品信息加入cookie，注释比较详细，在代码中我把操作cookie（set和get封装为cookieUtil对象的方法，方便调用）。
//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);
}
}
}
这里是封装的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中的商品信息取出来。
<Meta charset="UTF-8">
查看购物车<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>