最近做了一個商城項目弟胀,那肯定要做個購物車的嘛揖盘,于是我就想用localstorage存儲商品眉厨,以便用戶下次進(jìn)入網(wǎng)頁還可以看到自己收藏過的商品。業(yè)務(wù)方面兽狭,就保存商品數(shù)量憾股、商品id和商品詳情就好了。
接下來是項目實戰(zhàn)
// 加購物車
let k = 0; // 定義一個參數(shù)箕慧,用在循環(huán)中計算是否有這個商品id服球,如果沒有,就把商品添加到gifts中颠焦,如果有斩熊,那這個商品的num增加
let gift = {
id: this.giftDetail.goods_id,
gift: this.giftDetail,
num: this.num
};
let gifts = localStorage.getItem("gifts")
? JSON.parse(localStorage.getItem("gifts"))
: [];
for (let i = 0; i < gifts.length; i++) {
let item = gifts[i];
if (item.id === gift.id) {
item.num += gift.num;
} else {
k = k + 1;
}
}
if (k === gifts.length) {
gifts.push(gift);
}
localStorage.setItem("gifts", JSON.stringify(gifts));
注意點:
- 數(shù)組存localstorage是需要序列化的,否則會自動調(diào)用toString()方法伐庭。
- 需要用k來計算是否有這個商品是否存在粉渠。