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