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的本機儲存。

將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(&#39;_&#39;);
    
                    $("#tops").html(&#39;<p>合计：￥&#39; + AryStr[0] + &#39;元</p><span>(共&#39; + AryStr[1] + &#39;件，不含运费)</span>&#39;)
                });

            });

控制器部分：

   [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=&#39;clear-both&#39;>
                    <p class=&#39;proInfo&#39;>
                        <p class=&#39;thumb&#39;>
                            <img  src=&#39;" + picPath + @"&#39; / alt="HTML5實作購物車本機儲存功能" ></p>
                        <p class=&#39;desc clear-both&#39;>
                            <p>" + productMol.productName + @"</p>
                            <small>颜色分类：" + pcolor + @"</small>
                            <span>￥" + Convert.ToDouble(productMol.shopprice).ToString("0.00") + @"</span>
                            <p class=&#39;ctrl-p&#39;>
                                <p class=&#39;jian&#39;></p>
                                <p class=&#39;num&#39;>" + num + @"</p>
                                <p class=&#39;jia&#39;></p>
                            </p>
                        </p>
                    </p>
                </li>");
                    }
                    sb.Append("</ul>");
                }
                else
                {
                    sb.Append("<ul><li onclick=&#39;gobuy2()&#39;>请选择所需购买的商品</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();
        }

效果圖如下：

#

以上是HTML5實作購物車本機儲存功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！