html保存按钮代码_分享｜Javascript购物车实现详细代码讲解

元芒数字

“ 随着互联网的发展，尤其是移动互联网的快速崛起，软件技术的开发已经越来越细分，不再是当年一种技术或者一种语言走天下的年代，元芒数字的攻城狮们不断的努力着，下文是就购物车这个电商环节中一定会存在的案子，让我们来看攻城狮忠远的表演。”

我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化，尤其是为了配合线上花样翻新的营销活动，购物车的功能必须强大而迅速。

现在，对购物车进行了简单实现，能够实现真实购物车当中的大部分功能。在本示例当中，用到了javascript中BOM操作，DOM操作，表格操作，cookie，json等知识点，同时，采用三层架构方式对购物车进行设计，对javascript的综合应用较强。

主页效果图

图1

现在读者已经对主页的效果图进行了了解，我在这里附上主页的html代码，供读者参考，建议读者根据自己的思路写代码。请看html代码：

商品列表页面

商品列表

我的购物车0

智能手表酷黑，棒，棒，棒，棒￥ 998

添加购物车

智能手机001金红色，酷酷酷酷￥ 1998

添加购物车

华为手机002帅帅帅帅帅帅帅帅帅帅￥ 998

添加购物车

华为手机003杠杠的￥ 2000

添加购物车

html结构代码有了之后，就可以对主页进行css表现设计，这里不对css进行过多讲解。我们对主页进行设计之后，就可以进行与主页相关的DOM操作，涉及到添加按钮的点击事件，cookie和json的应用，cookie主要为了让当前数据与购物车进行共享，以方便操作。请看与之相关的javascript代码(这是index.js代码，主要是主页的相关操作)：

/*

思路：

第一步：获取所要操作的节点对象

第二步：当页面加载完后，需要计算本地cookie存了多少【个】商品，把个数赋值给ccount

第三步：为每一个商品对应的添加购物车按钮绑定一个点击事件onclick

更改本地的cookie

获取当前商品的pid

循环遍历本地的cookie转换后的数组，取出每一个对象的pid进行对比，若相等则该商品不是第一次添加

从购物车中取出该商品，然后更pCount值追加1

否则：创建一个新的对象，保存到购物中。同时该商品的数量为1

*/

var ccount = document.getElementById("ccount"); //显示商品总数量的标签节点对象

var btns = document.querySelectorAll(".list dl dd button"); //所有的购物车按钮

//约定好用名称为datas的cookie来存放购物车里的数据信息 datas里所存放的就是一个json字符串

var listStr = cookieObj.get("datas");

/*判断一下本地是否有一个购物车(datas)，没有的话，创建一个空的购物车，有的话就直接拿来使用*/

if(!listStr) { //没有购物车 datas json

cookieObj.set({

name: "datas