HTML5实现购物车当地存储功能-

这篇文章主要介绍了HTML5当地存储实现购物车功能的相干材料,需要的伴侣可以参照 下 这篇文章主要介绍了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('
合计：￥' + AryStr[0] + '元
(共' + AryStr[1] + '件，不含运费)')
                });

            });

控制器局部：

   [HttpPost]
        public string GetCarInfo(Dictionary[] carAry)
        {
            UserCarModel model = new UserCarModel();

            return model.GetCarInfo(carAry);
        }

        [HttpPost]
        public string GetCarInfo2(Dictionary[] carAry)
        {
            UserCarModel model = new UserCarModel();

            return model.GetCarInfo(carAry,1);
        }

Model局部

  public string GetCarInfo(Dictionary[] 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("
");
                    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(@"

                    

                        

                            
                        

                            
" + productMol.productName + @"
                            色彩分类：" + pcolor + @"
                            ￥" + Convert.ToDouble(productMol.shopprice).ToString("0.00") + @"
                            

                                

                                
" + num + @"
                                

                            

                        

                    

                
");
                    }
                    sb.Append("
");
                }
                else
                {
                    sb.Append("
请选中所需购置的商品

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

结果图如下：

以上就是HTML5实现购物车当地存储功能的细致内容，更多请关注 百分百源码网 其它相干文章！