原生js+cookie实现购物车功能的方法分析
程序员文章站
2022-07-01 08:38:18
本文实例讲述了原生js+cookie实现购物车功能的方法。分享给大家供大家参考，具体如下：
这里使用js+cookie实现简单的购物车功能。
首先是简单的html结构，...
本文实例讲述了原生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程序设计有所帮助。