這篇文章主要介紹了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'>
<p class='proInfo'>
<p class='thumb'>
<img src='" + picPath + @"' /></p>
<p class='desc clear-both'>
<p>" + productMol.productName + @"</p>
<small>颜色分类：" + pcolor + @"</small>
<span>￥" + Convert.ToDouble(productMol.shopprice).ToString("0.00") + @"</span>
<p class='ctrl-p'>
<p class='jian'></p>
<p class='num'>" + num + @"</p>
<p class='jia'></p>
</p>
</p>
</p>
</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();
}登入後複製
效果圖如下：
#
以上是HTML5實作購物車本機儲存功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
