HTML5 本地存儲(chǔ)實(shí)現(xiàn)購物車功能
我要評(píng)論在家休陪產(chǎn)假，無聊，看自己以前的項(xiàng)目，突然發(fā)現(xiàn)之前寫的購物車都是用數(shù)據(jù)庫實(shí)現(xiàn)的，數(shù)據(jù)庫實(shí)現(xiàn)購物車原則上沒什么問題，但是需要和數(shù)據(jù)庫交互，這樣無意之間降低了程序的效率。今天突發(fā)奇想，如果能用HTML5本地存儲(chǔ)實(shí)現(xiàn)，就會(huì)大大增高程序效率。當(dāng)然，HTML5 本地存儲(chǔ)涉及到各個(gè)瀏覽器的兼容性，涉及存儲(chǔ)數(shù)據(jù)的大小(NKB)等問題。在這兒需要說明的是：如果你做一個(gè)不大不小的微商城項(xiàng)目，那么你可以嘗試使用HTML5本地存儲(chǔ)過程實(shí)現(xiàn)購物車！
本節(jié)和大家探討下HTML5本地存儲(chǔ)實(shí)現(xiàn)購物車的功能！
需要說明的是：上篇轉(zhuǎn)發(fā)了別人的博客：HTML5本地存儲(chǔ)用法，本節(jié)利用上節(jié)知識(shí)實(shí)現(xiàn)購物車！
首先講解下大致思路：
一個(gè)商品表中，商品的ID是不相同的，在此，我們借助商品的ID作為JSON的key值，來存儲(chǔ)購物車數(shù)據(jù)。
具體示例如下：
當(dāng)你點(diǎn)擊‘加入購物車’時(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é)合了。也就是說：不同的商品，將會(huì)存儲(chǔ)為不同的Key值，N個(gè)商品，將會(huì)存儲(chǔ)為N個(gè)Json字符串。最后，我們只需解析這N個(gè)不同的字符串，就會(huì)得到一個(gè)完整的購物車！
嘻嘻，簡單吧！
那么怎樣才能遍歷這N個(gè)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 + "商品數(shù)量：" + num + "商品顏色：" + color);
}
}
});
大致講解：
遍歷所有本地存儲(chǔ)，要求key值包含bat子字符切不同于bat的本地存儲(chǔ)。<避免和其他系統(tǒng)本地存儲(chǔ)相沖突，所以，要求Key值必須包含Bat>
將Json字符串轉(zhuǎn)化為Json對(duì)象
并輸入商品ID，商品數(shù)量，商品顏色。
有了商品ID，商品顏色，商品數(shù)量，那么我們就可以使用JS或者AJax來加載我們本地存儲(chǔ)的購物車了。具體加載方法如下：
$.ajax("...........")
或者：
JS拼接HTML
在此：不作演示。
OK，截止到現(xiàn)在，整個(gè)HTML5本地存儲(chǔ)實(shí)現(xiàn)購物車也就講完了，如果還可以，就點(diǎn)個(gè)贊吧！
繼續(xù)完善本篇博客
上文中提到需要用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 + "商品數(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)
{
//加載購物車
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>顏色分類：" + 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)選擇所需購買的商品</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();
}
效果圖如下：
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
利用Node實(shí)現(xiàn)HTML5離線存儲(chǔ)的方法
這篇文章主要介紹了利用Node實(shí)現(xiàn)HTML5離線存儲(chǔ)的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-16- 這篇文章主要介紹了H5離線存儲(chǔ)Manifest原理及使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-04-28
HTML5中的網(wǎng)絡(luò)存儲(chǔ)實(shí)現(xiàn)方式
傳統(tǒng)方式使用document.cookie來進(jìn)行存儲(chǔ)，但是由于其存儲(chǔ)的空間只有4KB左右，并且需要復(fù)雜的操作進(jìn)行解析，給發(fā)開者帶來很多不便，為此，HTML5規(guī)范提出了網(wǎng)絡(luò)存儲(chǔ)的解決方2020-04-28
使用HTML5 IndexDB存儲(chǔ)圖像和文件的示例
這篇文章主要介紹了使用HTML5 IndexDB存儲(chǔ)圖像和文件的示例的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-05HTML5離線應(yīng)用與客戶端存儲(chǔ)的實(shí)現(xiàn)
這篇文章主要介紹了HTML5離線應(yīng)用與客戶端存儲(chǔ)的實(shí)現(xiàn)的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-03在HTML5 localStorage中存儲(chǔ)對(duì)象的示例代碼
這篇文章主要介紹了在HTML5 localStorage中存儲(chǔ)對(duì)象的示例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-20
