資訊專欄INFORMATION COLUMN
摘要：最近做了一個(gè)商城項(xiàng)目，那肯定要做個(gè)購物車的嘛，于是我就想用存儲(chǔ)商品，以便用戶下次進(jìn)入網(wǎng)頁還可以看到自己收藏過的商品。業(yè)務(wù)方面，就保存商品數(shù)量商品和商品詳情就好了。需要用來計(jì)算是否有這個(gè)商品是否存在。
最近做了一個(gè)商城項(xiàng)目，那肯定要做個(gè)購物車的嘛，于是我就想用localstorage存儲(chǔ)商品，以便用戶下次進(jìn)入網(wǎng)頁還可以看到自己收藏過的商品。業(yè)務(wù)方面，就保存商品數(shù)量、商品id和商品詳情就好了。
接下來是項(xiàng)目實(shí)戰(zhàn)
// 加購物車
let k = 0; // 定義一個(gè)參數(shù)，用在循環(huán)中計(jì)算是否有這個(gè)商品id，如果沒有，就把商品添加到gifts中，如果有，那這個(gè)商品的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));
注意點(diǎn)：
數(shù)組存localstorage是需要序列化的，否則會(huì)自動(dòng)調(diào)用toString()方法。
需要用k來計(jì)算是否有這個(gè)商品是否存在。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104469.html
摘要：實(shí)現(xiàn)電商網(wǎng)站效果展示下載代碼安裝依賴啟動(dòng)項(xiàng)目運(yùn)行環(huán)境需求分析登錄頁面商品列表頁網(wǎng)站首頁購物車頁實(shí)現(xiàn)結(jié)算商品詳情頁可按顏色品牌對商品進(jìn)行篩選，單擊選中，再次點(diǎn)擊取消根據(jù)價(jià)格進(jìn)行升序降序銷量降序排列商品列表顯示圖片名稱銷量顏色單價(jià)實(shí)時(shí)顯示 shopping vue + vue-router + vuex實(shí)現(xiàn)電商網(wǎng)站 效果展示 showImg(https://user-gold-cdn.xi...
摘要：實(shí)現(xiàn)電商網(wǎng)站效果展示下載代碼安裝依賴啟動(dòng)項(xiàng)目運(yùn)行環(huán)境需求分析登錄頁面商品列表頁網(wǎng)站首頁購物車頁實(shí)現(xiàn)結(jié)算商品詳情頁可按顏色品牌對商品進(jìn)行篩選，單擊選中，再次點(diǎn)擊取消根據(jù)價(jià)格進(jìn)行升序降序銷量降序排列商品列表顯示圖片名稱銷量顏色單價(jià)實(shí)時(shí)顯示 shopping vue + vue-router + vuex實(shí)現(xiàn)電商網(wǎng)站 效果展示 showImg(https://user-gold-cdn.xi...
摘要：實(shí)現(xiàn)電商網(wǎng)站效果展示下載代碼安裝依賴啟動(dòng)項(xiàng)目運(yùn)行環(huán)境需求分析登錄頁面商品列表頁網(wǎng)站首頁購物車頁實(shí)現(xiàn)結(jié)算商品詳情頁可按顏色品牌對商品進(jìn)行篩選，單擊選中，再次點(diǎn)擊取消根據(jù)價(jià)格進(jìn)行升序降序銷量降序排列商品列表顯示圖片名稱銷量顏色單價(jià)實(shí)時(shí)顯示 shopping vue + vue-router + vuex實(shí)現(xiàn)電商網(wǎng)站 效果展示 showImg(https://user-gold-cdn.xi...
摘要：當(dāng)頁面重新載入或者被恢復(fù)時(shí)，頁面會(huì)話也是一直存在的。自動(dòng)保存一個(gè)文本域中的內(nèi)容，如果瀏覽器被意外刷新，則恢復(fù)該文本域中的內(nèi)容，所以不會(huì)丟失任何輸入的數(shù)據(jù)。該例中，我們測試數(shù)據(jù)項(xiàng)是否存在。 訪問原文地址 概述 DOM存儲(chǔ)的機(jī)制是通過存儲(chǔ)字符串類型的鍵/值對,來提供一種安全的存取方式.這個(gè)附加功能的目標(biāo)是提供一個(gè)全面的,可以用來創(chuàng)建交互式應(yīng)用程序的方法(包括那些高級功能,例如可以離線工作一...
閱讀 1285·2021-11-11 16:55
閱讀 1548·2021-10-08 10:16
閱讀 1206·2021-09-26 10:20
閱讀 3587·2021-09-01 10:47
閱讀 2465·2019-08-30 15:52
閱讀 2693·2019-08-30 13:18
閱讀 3204·2019-08-30 13:15
閱讀 1141·2019-08-30 10:55
