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();
        }

效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。