HTML5 本地存储实现购物车功能
在家休陪产假,无聊,看自己以前的项目,突然发现之前写的购物车都是用数据库实现的,数据库实现购物车原则上没什么问题,但是需要和数据库交互,这样无意之间降低了程序的效率。今天突发奇想,如果能用html5本地存储实现,就会大大增高程序效率。当然,html5 本地存储涉及到各个浏览器的兼容性,涉及存储数据的大小(nkb)等问题。在这儿需要说明的是:如果你做一个不大不小的微商城项目,那么你可以尝试使用html5本地存储过程实现购物车!
本节和大家探讨下html5本地存储实现购物车的功能!
需要说明的是:上篇转发了别人的博客:html5本地存储用法,本节利用上节知识实现购物车!
首先讲解下大致思路:
一个商品表中,商品的id是不相同的,在此,我们借助商品的id作为json的key值,来存储购物车数据。
具体示例如下:
当你点击‘加入购物车’时,执行代码如下:
var pid = $("#hidpid").val(); var color = $("#procolor").val(); var num2 = $("#spannum").html(); //���� var bat = { "num": num2, "pid": pid, "pcolor": color }; var batstring = json.stringify(bat); var keyname = "bat" + pid; for (var i = 0; i < localstorage.length; i++) { if (localstorage.key(i) == keyname) { localstorage.removeitem(keyname); } } localstorage.setitem("bat"+pid, batstring);
大致讲解下:
pid:商品id
color:商品颜色
num2:商品数量
bat:json对象
batstring:json对象转化成的字符串
for循环:遍历当前所有本地存储,如果已存在的本地存储则删除,重新建立最新的本地存储,当然,也可以不删除,因为同名的key值,新的会覆盖旧的。
最后,动态存储,所谓动态,就是本地存储的key值和商品id结合了。也就是说:不同的商品,将会存储为不同的key值,n个商品,将会存储为n个json字符串。最后,我们只需解析这n个不同的字符串,就会得到一个完整的购物车!
嘻嘻,简单吧!
那么怎样才能遍历这n个json字符串呢?如下:
购物车加载页面:
$(function () { for (var i = 0; i < localstorage.length; i++) { var localvalue = localstorage.getitem(localstorage.key(i)); var key = localstorage.key(i); if (key != "bat"&&key.indexof("bat")>=0) { var obj = $.parsejson(localvalue); var pid = obj.pid; var num = obj.num; var color = obj.pcolor; console.log("商品id:"+pid + "商品数量:" + num + "商品颜色:" + color); } } });
大致讲解:
遍历所有本地存储,要求key值包含bat子字符切不同于bat的本地存储。<避免和其他系统本地存储相冲突,所以,要求key值必须包含bat>
将json字符串转化为json对象
并输入商品id,商品数量,商品颜色。
有了商品id,商品颜色,商品数量,那么我们就可以使用js或者ajax来加载我们本地存储的购物车了。具体加载方法如下:
$.ajax("...........")
或者:
js拼接html
在此:不作演示。
ok,截止到现在,整个html5本地存储实现购物车也就讲完了,如果还可以,就点个赞吧!
继续完善本篇博客
上文中提到需要用ajax或者js拼接来完成加载功能,下面我将自己写的ajax贴出来!
js代码如下:
$(function () { var carary=new array(); for (var i = 0; i < localstorage.length; i++) { var key = localstorage.key(i); var localvalue = localstorage.getitem(key); if (key != "bat"&&key.indexof("bat")>=0) { var obj = $.parsejson(localvalue); //var pid = obj.pid; //var num = obj.num; //var color = obj.pcolor; //console.log("商品id:" + pid + "商品数量:" + num + "商品颜色:" + color); carary.push(obj); } } //alert(carary.length); var bat = { "carary": carary }; $.post("/home/getcarinfo", bat, function (data) { $("#buycar").html(data); }); $.post("/home/getcarinfo2", bat, function (data) { var arystr = new array(); arystr = data.split('_'); $("#tops").html('<p>合计:¥' + arystr[0] + '元</p><span>(共' + arystr[1] + '件,不含运费)</span>') }); });
控制器部分:
[httppost] public string getcarinfo(dictionary<string,string>[] carary) { usercarmodel model = new usercarmodel(); return model.getcarinfo(carary); } [httppost] public string getcarinfo2(dictionary<string, string>[] carary) { usercarmodel model = new usercarmodel(); return model.getcarinfo(carary,1); }
model部分
public string getcarinfo(dictionary<string, string>[] carary,int i=0) { system.text.stringbuilder sb = new system.text.stringbuilder(""); double sum = 0.00; if (i == 0) { //加载购物车 if (carary != null && carary.length > 0) { sb.append("<ul>"); foreach (var item in carary) { string pid = item["pid"]; string num = item["num"]; string pcolor = item["pcolor"]; productmol = bll.getmodel(convert.toint32(pid)); string picpath = getmainpic(productmol.mainpicnum); sb.append(@"<li class='clear-both'> <div class='proinfo'> <div class='thumb'> <img src='" + picpath + @"' /></div> <div class='desc clear-both'> <p>" + productmol.productname + @"</p> <small>颜色分类:" + pcolor + @"</small> <span>¥" + convert.todouble(productmol.shopprice).tostring("0.00") + @"</span> <div class='ctrl-div'> <div class='jian'></div> <div class='num'>" + num + @"</div> <div class='jia'></div> </div> </div> </div> </li>"); } sb.append("</ul>"); } else { sb.append("<ul><li onclick='gobuy2()'>请选择所需购买的商品</li><br/></ul>"); } } else { //计算总金额和商品数量 if (carary != null && carary.length > 0) { foreach (var item in carary) { string pid = item["pid"]; string num = item["num"]; productmol = bll.getmodel(convert.toint32(pid)); sum += convert.todouble(productmol.shopprice) * convert.todouble(num); } } sb.append(sum.tostring("0.00") + "_" + carary.length); } return sb.tostring(); }
效果图如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。