首页 > 代码库 > 利用html5的本地存储写的一个购物车

利用html5的本地存储写的一个购物车

2024-07-04 11:59:38   225人阅读

好久没有写博客园了，很多知识没有记录下来；可惜；

这几天在开发微信，也写了一个订餐平台的微网站，里面需要写一个购物车；

这里主要是把商品的部分信息以json格式保存在sessionstorage中，还有商店信息也是；

以json格式保存有什么好处呢，轻量级的传输，大概是这样吧！另外，如果我们把商品信息分开存储，就会导致有多条的sessionstorage项，那以后实现在两家商店同时购物的话，就不可能区分每家商店的商品了；

 

如果代码是自己写的，就有版权，这么说、对吧，是在软件工程师书上看到的；

不多说，我喜欢的是上代码；

 

在点击商品的时候，我们就把商品加入购物车，这个功能：其中利用了JSON.stringfy()和JSON.parse()进行转换

 1 function addgood(id, price, name) {//在界面渲染的时候已经把商品信息参数整合到自己的函数中了
 2         var contact = new Object();//单个商品的对象，暂时介质
 3         var goodobj = new Object();//商品对象
 4         var memberfilter = new Array();//商品信息
 5         memberfilter[0] = "id";
 6         memberfilter[1] = "name";
 7         memberfilter[2] = "sum";
 8         memberfilter[3] = "price";
 9         if (typeof (sessionStorage.good) == "undefined") {//此时没有商品
10             contact.id = parseInt(id);
11             contact.name = name;
12             contact.sum = 1;
13             contact.price = parseInt(price);
14             var good = new Array();
15             var jsonText = JSON.stringify(contact, memberfilter);
16             good[0] = JSON.parse(jsonText);
17             sessionStorage.good = JSON.stringify(good, memberfilter);
18 
19         }
20         else {//有商品，要判断商品在本地是否有存储，有的话sum+1
21             //取数据
22             goodobj = JSON.parse(sessionStorage.good);
23             var con = 0;
24             for (var i = 0; i < goodobj.length; i++) {
25                 if (goodobj[i].id == id) {
26                     goodobj[i].sum = 1 + parseInt(goodobj[i].sum);
27                     sessionStorage.good= JSON.stringify(goodobj, memberfilter);
28                     con++;
29                     break;
30                 }
31             }
32             if (con == 0) {//没有该商品，新建一个进去
33                 contact.id = parseInt(id);
34                 contact.name = name;
35                 contact.sum = 1;
36                 contact.price = parseInt(price);
37 
38                 var jsonText = JSON.stringify(contact, memberfilter);
39                 var goolen = goodobj.length;
40                 goodobj[goolen] = JSON.parse(jsonText);
41                 sessionStorage.good= JSON.stringify(goodobj, memberfilter);
42                
43             }
44 
45         }
46     }

这是本地存储的数据格式：

　　

****************************************************************************************************************

***购物车还有加减功能，附上最基本的功能：

购物车页面是另外的，这里重新定义；

1 var goodobj = new Object();
2 var money = 0;
3 var memberfilter = new Array();
4 memberfilter[0] = "id";
5 memberfilter[1] = "name";
6 memberfilter[2] = "sum";
7 memberfilter[3] = "price";

1、商品数量加一：

 1 function add(id) {//此方法是带商品id的
 2     for (var i = 0; i < goodobj.length; i++) {//简单的遍历，没有优化
 3         if (goodobj[i].id == id) {
 4             goodobj[i].sum = 1 + parseInt(goodobj[i].sum);
 5             sessionStorage.good= JSON.stringify(goodobj, memberfilter);
 6             money = parseInt(money) + parseInt(goodobj[i].price);//总价
 7             break;
 8         }
 9     }
10 };

2、商品数量减一：

 1 function cut(id) {
 2     for (var i = 0; i < goodobj.length; i++) {
 3         if (goodobj[i].id == id) {
 4             goodobj[i].sum = parseInt(goodobj[i].sum) - 1;
 5             money = parseInt(money) - parseInt(goodobj[i].price);
 6             if (goodobj[i].sum == 0) {
 7                 goodobj = goodobj.del(i);//删除此商品
 8             }
 9             sessionStorage.good= JSON.stringify(goodobj, memberfilter);
10             break;
11         }
12     }
13 };
View Code

3、删除商品的时候，也就是对对象数组进行操作，那么删除一个对象，就要刷新一次索引，不然某array[i]可能就是undefined；这个时候就会造成json错误；

删除商品使用的函数使用了slice()和concat();

w3school中解释：

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分；

concat() 方法用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

prototype 属性使您有能力向对象添加属性和方法。

如下是代码：

1 Array.prototype.del = function (n) {
2     if (n < 0) 
3         return this;
4     else
5         return this.slice(0, n).concat(this.slice(n + 1, this.length));
6     }//本代码有参考网上的代码，出处不记得了，真是不好意思
View Code

 

最后也想解释一下为什么用这个格式的json，我用ajax技术把数据传送到后端，定义了一个函数解析这个格式的json，中间利用一个类暂时存储其中的信息，最终转换为dataset，这样数据就可以方便使用了

 

我希望看到这篇文章的伙伴们都可以留下您宝贵的意见，我希望加以改进函数！！谢谢交流

最近在开发微信，我也希望有人交流


联系
我们