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

2022-01-12 12:45:28 字數 2732 閱讀 7024

在家休陪產假,無聊,看自己以前的專案,突然發現之前寫的購物車都是用資料庫實現的,資料庫實現購物車原則上沒什麼問題,但是需要和資料庫互動,這樣無意之間降低了程式的效率。今天突發奇想,如果能用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) );

});

控制器部分:

[httppost]

public

string getcarinfo(dictionary carary)

[httppost]

public

string getcarinfo2(dictionary carary)

model部分:

public

string getcarinfo(dictionary carary,int i=0

)

else

}else

}"0.00

") + "

_" +carary.length);

}return

sb.tostring();

}

效果圖如下:

@陳臥龍的部落格