我是學習 javascript 的新手。我正在將專案保存在localstorage 中并成功保存。我也可以在控制臺中看到結果，但問題是舊專案被新專案替換。我想將 localstorage 中的每個專案保存為添加到購物車。
function addToCartClicked(event) {
var Title, Price, Image
var button = event.target
var shopItem = button.parentElement.parentElement.parentElement.parentElement
var title = shopItem.getElementsByClassName("name-of-product")[0].innerText
var price = shopItem.getElementsByClassName('product-price')[0].innerText
var image = shopItem.getElementsByClassName("hover-img")[0].src
let itemsList = {
Title: title,
Price: price,
Image: image,
}
let cartItems = {
[itemsList.Title]: itemsList
}
localStorage.setItem("productsInCart", JSON.stringify(cartItems));
cartItems = localStorage.getItem("productsInCart");
cartItems = JSON.parse(cartItems);
console.log("This is without json", cartItems);
}
uj5u.com熱心網友回復：
localStorage.setItem會將該鍵添加到瀏覽器的 localstorage 中，或者如果該鍵已經存在，則對其值進行寫入。
因此，一旦您執行，您的舊資料將被覆寫 localStorage.setItem
您需要做的是，您必須使用localStorage.getItem提取本地存盤中的當前值，將新值添加到提取的值中，并使用由舊資料和新資料組成的新值更新本地存盤。
所以你的代碼將如下所示
function addToCartClicked(event) {
var Title, Price, Image
var button = event.target
var shopItem = button.parentElement.parentElement.parentElement.parentElement
var title = shopItem.getElementsByClassName("name-of-product")[0].innerText
var price = shopItem.getElementsByClassName('product-price')[0].innerText
var image = shopItem.getElementsByClassName("hover-img")[0].src
let itemsList = {
Title: title,
Price: price,
Image: image,
}
let cartItems = localStorage.getItem("productsInCart");
cartItems = cartItems ? JSON.parse(cartItems) : {};
cartItems[itemsList.Title] = itemsList;
localStorage.setItem("productsInCart", JSON.stringify(cartItems));
cartItems = localStorage.getItem("productsInCart");
cartItems = JSON.parse(cartItems);
console.log("This is without json", cartItems);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/402039.html
標籤：javascript 本地存储