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

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

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

这里主要是把商品的部分信息以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 };

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 }//本代码有参考网上的代码,出处不记得了,真是不好意思

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

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

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

利用html5的本地存储写的一个购物车,布布扣,bubuko.com

时间: 2024-12-21 01:08:22

利用html5的本地存储写的一个购物车的相关文章

利用html5的本地存储功能实现登录用户信息保存

在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了.二者用法完全相同,这里以localStorage为例. 用户名.密码保存,自动登录等,可以通过设置cookie实现,第一次登录网站后在本地计算机的中写入cookie,之后再次登录此网站查看cookie中现有的值,用cookie值进行网站登录即可.但是 cookie 不适合大量数据

html5的本地存储

正好刚刚写了javaweb的session存储,反正还早....就把html5的本地存储一块写了吧 cookie 在说html5的本地存储之前,不得不说下在它之前的本地存储cookie. cookie存储在浏览器端,并且会随着浏览器的请求一起传到服务器段,它有一定的过期时间,到了过期时间会自动消失. 小伙伴么可以打开浏览器自己看一下 默认生命周期是浏览器关闭.当然你任性,也可以自己设置 1 Response.Cookies(name).Expires = Date +1; (时间函数+N) ja

HTML5 LocalStorage 本地存储(转)

原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还蛮好.很早以前那些禁用cookies的用户也都慢慢的不存在了

(转载)HTML5 LocalStorage 本地存储

原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还蛮好.很早以前那些禁用cookies的用户也都慢慢的不存

利用html5调用本地摄像头拍照上传图片[转]

利用html5调用本地摄像头拍照上传图片 html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头,在html5之前,要在浏览器获取本地摄像头只有通过插件(ActiveX,但是这种只有IE支持)或者是flash来获取(或许你没学过flash那就很坑爹了),在之后微软的silvertlight中也可以获取,但这些都比较麻烦,在html5的世界里,要获取本地摄像头,只要配合js就可以轻松获取.. 目前支持html5

HTML5 LocalStorage 本地存储总结

//存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"].它的读取.写.删除操作方法很简单,是以键值对的方式存在的,如下: localStorage.a = 3;//设置a为"3"localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值local

HTML5 localStorage本地存储实际应用举例

HTML5 localStorage本地存储实际应用举例 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1952 一.引言 HTML5虽未来到其鼎盛时期,但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性.就我所做的项目而言,应用的HTML5相关特性有:data-自定义属性.placeholder.以及email类型input文本框.上周新上线的会员中心,自己又

HTML5 localStorage本地存储

介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2. 成员 2.1 属性 2.2 方法 2.3 事件 3. 示例 3.1 存储数据 3.2 读取数据 3.3 存储Json对象 1. 介绍 1.1 说明 localStorage 即本地存储,可用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. 在JavaScript语言中可通过 wi

Html5 web本地存储

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB. Web Storage又分为两种: sessionStorage localStorage 从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了:而localStorage则一直将数据保存在客户端本地: 不管