首页 > 作文

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

更新时间:2023-04-03 02:03:16 阅读: 评论:0

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

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

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

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

不多说,我喜欢的是上代码;

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

复制代码

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 (ssionstorage.good) == “undefined”) {//此时没有商品

10 contact.id = parint(id);

11 contact.name = name;

12 contact.sum = 1;

13 contact.price = parint(price);

14 var good = new array();

15 var jsontext = json.stringify(contact, memberfilter);

16 good[0] = json.par(jsontext);

17 ssionstorage.good = json.stringify(good, memberfilter);

18

19 }

20 el {//有商品,要判断商品在本地是否有存储,有的话sum+1

21 //取数据

22 goodobj = json.pars令我感动的一件事 作文e(ssionstorage.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 + parint(goodobj[i].sum);

27 ssionstorage.good= json.stringify(goodobj, memberfilter);

28 con++;

29 break;

30 }

31 }

32 if (con == 0) {//没有该商品,新建一个进去

33 contact.id = parint(id);

34 contact.name = name;

35 contact.sum = 1;

36 contact.price = parint(price);

37

38 var jsontext = json.stringify(contact, memberfilter);

39 var goolen = goodobj.length;

40 goodobj[goolen] = json.par(jsontext);

41 ssionstorage.good= json.stringify(goodobj, memberfilter);

42

43 }

44

45 }

46 }

复制代码

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

  

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

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

购物车页面是另外的,这里重新定义;

复制代码

1 var goodobj = new object();

2 var money = 0;

3 var memberfilter = ne我和哪吒过一天的作文400字w 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 + parint(goodobj[i].sum);

5 ssionstorage.good= json.stringify(goodobj, memberfilter);

6 money = parint(money) + parint(goodobj[i].price);//team什么意思总价

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 = parint(goodobj[i].sum) – 1;

5 money = parint(money) – parint(goodobj[i].price);

6 if (goodobj[i].sum == 0) {

7 goodobj = goodobj.del(i);//删除此商品

8 }

9 ssionstorage.good= json.stringify(goodobj, memberfilter);

10 break;

11 }

12 }

13 };

复制代码

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 el

5 return this.slice(0, n).concat(this.slice(n + 1, this.length));

6 }//本代码有参考网上的代码,出处不记得了,真是不好意思

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

本文发布于:2023-04-03 02:03:14,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/3df9204f930df53fcb30a783b62f2df1.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:利用html5的本地存储写的一个购物车.doc

本文 PDF 下载地址:利用html5的本地存储写的一个购物车.pdf

标签:商品   代码   数组   购物车
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图