HTML5 本地儲存實現購物車功能

在家休陪產假，無聊，看自己以前的專案，突然發現之前寫的購物車都是用資料庫實現的，資料庫實現購物車原則上沒什麼問題，但是需要和資料庫互動，這樣無意之間降低了程式的效率。今天突發奇想，如果能用html5本地儲存實現，就會大大增高程式效率。當然，html5 本地儲存涉及到各個瀏覽器的相容性，涉及儲存資料的大小(nkb)等問題。在這兒需要說明的是：如果你做乙個不大不小的微**專案，那麼你可以嘗試使用html5本地儲存過程實現購物車！

好了，今兒挺高興，自己陪自己喝了2兩小酒，52度的哦！

現在暈乎乎的！哈哈哈！

還是那句話：

最近悟出來乙個道理，在這兒分享給大家：學歷代表你的過去，能力代表你的現在，學習代表你的將來。

十年河東十年河西，莫欺少年窮

學無止境，精益求精

本節和大家**下html5本地儲存實現購物車的功能！

需要說明的是：上篇**了別人的部落格：html5本地儲存用法，本節利用上節知識實現購物車！

首先講解下大致思路：

乙個商品表中，商品的id是不相同的，在此，我們借助商品的id作為json的key值，來儲存購物車資料。

具體示例如下：

當你點選『加入購物車』時，執行**如下：

var pid = $("
#hidpid
").val();
var color = $("
#procolor
").val();
var num2 = $("
#spannum
").html(); //
����
var bat = ;
var batstring =json.stringify(bat);
var keyname = "
bat" +pid;
for (var i = 0; i < localstorage.length; i++) 
}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 () 
}});

大致講解：

遍歷所有本地儲存，要求key值包含bat子字元切不同於bat的本地儲存。《避免和其他系統本地儲存相衝突，所以，要求key值必須包含bat>

將json字串轉化為json物件

並輸入商品id，商品數量，商品顏色。

有了商品id，商品顏色，商品數量，那麼我們就可以使用js或者ajax來載入我們本地儲存的購物車了。具體載入方法如下：

$.ajax("...........")

或者：js拼接html

在此：不作演示。

ok，截止到現在，整個html5本地儲存實現購物車也就講完了，如果還可以，就點個贊吧！

繼續完善本篇部落格

上文中提到需要用ajax或者js拼接來完成載入功能，下面我將自己寫的ajax貼出來！

js**如下：

$(function () 
}//alert(carary.length);
var bat = ;
$.post(
"/home/getcarinfo
", bat, function (data) );
$.post(
"/home/getcarinfo2
", bat, function (data) );
});

控制器部分：

model部分：

public
string getcarinfo(dictionary carary,int i=0
) 
else
}else
}"0.00
") + "
_" +carary.length);
}return
sb.tostring();
}

效果圖如下：

@陳臥龍的部落格

HTML5 本地儲存實現購物車功能

HTML5本地儲存

html5 本地儲存

html5 本地儲存

相關推薦