在家休陪產(chǎn)假，無(wú)聊，看自己以前的項(xiàng)目，突然發(fā)現(xiàn)之前寫(xiě)的購(gòu)物車(chē)都是用數(shù)據(jù)庫(kù)實(shí)現(xiàn)的，數(shù)據(jù)庫(kù)實(shí)現(xiàn)購(gòu)物車(chē)原則上沒(méi)什么問(wèn)題，但是需要和數(shù)據(jù)庫(kù)交互，這樣無(wú)意之間降低了程序的效率。今天突發(fā)奇想，如果能用HTML5本地存儲(chǔ)實(shí)現(xiàn)，就會(huì)大大增高程序效率。當(dāng)然，HTML5 本地存儲(chǔ)涉及到各個(gè)瀏覽器的兼容性，涉及存儲(chǔ)數(shù)據(jù)的大小(NKB)等問(wèn)題。在這兒需要說(shuō)明的是：如果你做一個(gè)不大不小的微商城項(xiàng)目，那么你可以嘗試使用HTML5本地存儲(chǔ)過(guò)程實(shí)現(xiàn)購(gòu)物車(chē)！
本節(jié)和大家探討下HTML5本地存儲(chǔ)實(shí)現(xiàn)購(gòu)物車(chē)的功能！
需要說(shuō)明的是：上篇轉(zhuǎn)發(fā)了別人的博客：HTML5本地存儲(chǔ)用法，本節(jié)利用上節(jié)知識(shí)實(shí)現(xiàn)購(gòu)物車(chē)！
首先講解下大致思路：
一個(gè)商品表中，商品的ID是不相同的，在此，我們借助商品的ID作為JSON的key值，來(lái)存儲(chǔ)購(gòu)物車(chē)數(shù)據(jù)。
具體示例如下：
當(dāng)你點(diǎn)擊‘加入購(gòu)物車(chē)’時(shí)，執(zhí)行代碼如下：
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：商品數(shù)量
bat：Json對(duì)象
batString：Json對(duì)象轉(zhuǎn)化成的字符串
FOr循環(huán)：遍歷當(dāng)前所有本地存儲(chǔ)，如果已存在的本地存儲(chǔ)則刪除，重新建立最新的本地存儲(chǔ)，當(dāng)然，也可以不刪除，因?yàn)橥腒ey值，新的會(huì)覆蓋舊的。
最后，動(dòng)態(tài)存儲(chǔ)，所謂動(dòng)態(tài)，就是本地存儲(chǔ)的Key值和商品ID結(jié)合了。也就是說(shuō)：不同的商品，將會(huì)存儲(chǔ)為不同的Key值，N個(gè)商品，將會(huì)存儲(chǔ)為N個(gè)Json字符串。最后，我們只需解析這N個(gè)不同的字符串，就會(huì)得到一個(gè)完整的購(gòu)物車(chē)！
嘻嘻，簡(jiǎn)單吧！
那么怎樣才能遍歷這N個(gè)JSON字符串呢？如下：
購(gòu)物車(chē)加載頁(yè)面：
$(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 + "商品數(shù)量：" + num + "商品顏色：" + color);
}
}
});
大致講解：
遍歷所有本地存儲(chǔ)，要求key值包含bat子字符切不同于bat的本地存儲(chǔ)。<避免和其他系統(tǒng)本地存儲(chǔ)相沖突，所以，要求Key值必須包含Bat>
將Json字符串轉(zhuǎn)化為Json對(duì)象
并輸入商品ID，商品數(shù)量，商品顏色。
有了商品ID，商品顏色，商品數(shù)量，那么我們就可以使用JS或者AJax來(lái)加載我們本地存儲(chǔ)的購(gòu)物車(chē)了。具體加載方法如下：
$.ajax("...........")
或者：
JS拼接HTML
在此：不作演示。
OK，截止到現(xiàn)在，整個(gè)HTML5本地存儲(chǔ)實(shí)現(xiàn)購(gòu)物車(chē)也就講完了，如果還可以，就點(diǎn)個(gè)贊吧！
繼續(xù)完善本篇博客
上文中提到需要用Ajax或者JS拼接來(lái)完成加載功能，下面我將自己寫(xiě)的AJAX貼出來(lái)！
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 + "商品數(shù)量：" + 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>合計(jì)：￥' + AryStr[0] + '元</p><span>(共' + AryStr[1] + '件，不含運(yùn)費(fèi))</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)
{
//加載購(gòu)物車(chē)
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>顏色分類(lèi)：" + 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()'>請(qǐng)選擇所需購(gòu)買(mǎi)的商品</li><br/></ul>");
}
}
else
{
//計(jì)算總金額和商品數(shù)量
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();
}
效果圖如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
