如何将每个项目存储在 javascript 的 localstorage 中？

Question

我是新手javascript。我正在 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);
}

Answer 1

localStorage.setItem 将该键添加到浏览器的本地存储中，或者写入该键的值（如果它已经存在）。

所以一旦你执行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);
}

如何将每个项目存储在 javascript 的 localstorage 中？

How to store every items in localstorage in javascript?

javascript

local-storage