如何使用 JS 防止本地存储覆盖值

Question

我在 HTML 中有 4 个按钮。在 JS 中，我向它们添加了一个事件侦听器（通过循环），以便每次单击按钮时，我都会获得按钮的值和名称。我将值和名称放在一个对象中，并将该对象发送到本地 sotrage。问题是每次单击按钮时，本地存储中的新值都会覆盖之前输入的值。单击按钮后，我应该怎么做才能保留发送到本地商店的所有值？我一直在阅读和测试不同的选项，但没有任何效果。

我的HTML

<div>
  <button class="add-cart" type="button" name="peperonni" value=".25">
    Add to cart
  </button>
  <button class="add-cart" type="button" name="meatballs" value=".35">
    Add to cart
  </button>
  <button class="add-cart" type="button" name="mushrooms" value=".40">
    Add to cart
  </button>
  <button class="add-cart" type="button" name="peperonni" value=".20">
    Add to cart
  </button>
</div>

我的JS

let addCart = document.querySelectorAll('.add-cart');

 addCart[i].addEventListener('click', () => {
   let name = addCart[i].name;
   let price = addCart[i].value;
   const menuItem = {
     name: name,
     price: price,
   };
   window.localStorage.setItem('ProductsInCart', JSON.stringify(menuItem));
 });
}

Answer 1

要在不替换的情况下更新本地存储，您需要分几步完成：

从存储中获取 ProductsInCart 条目。
（如果不存在，则创建一个空数组）
将新的购物车项目添加到您的数组中。
将这个新的/更新的数组保存回本地存储的 ProductsInCart 条目中。

所以，简单地说：

读取 -> 更新 -> 写入

Answer 2

将新菜单项压入菜单项数组

addCart[i].addEventListener("click", () => {
 let menuItems = window.localStorage.getItem("ProductsInCart");
 if (menuItems) {
   menuItems = JSON.parse(menuItems);
 } else {
   menuItems = [];
 }
 let name = addCart[i].name;
 let price = addCart[i].value;
 const menuItem = {
   name: name,
   price: price,
 };
 menuItems.push(menuItem);
 window.localStorage.setItem("ProductsInCart", JSON.stringify(menuItems));
});

Answer 3

addCart[i].addEventListener("click", () => {
 // get items from localStorage, or declare new one if not exist
 let menuItems = localStorage.getItem("ProductsInCart") || '[]';
 menuItems = JSON.parse(menuItems); 
 // declare and add the new item
 menuItems.push({ name: addCart[i].name, price: addCart[i].value });
 localStorage.setItem("ProductsInCart", JSON.stringify(menuItems));
});

Answer 4

条目正在被覆盖，因为您始终使用相同的密钥来存储数据。请每次更改密钥以防止覆盖之前的条目。

window.localStorage.setItem(key, JSON.stringify(menuItem));

你可以试试：

let addCart = document.querySelectorAll('.add-cart'); 

 addCart[i].addEventListener('click', () => {
   let name = addCart[i].name;
   let price = addCart[i].value;
   const menuItem = {
     name: name,
     price: price,
   };
   window.localStorage.setItem('ProductsInCart_'+i, JSON.stringify(menuItem));
 });
}

如何使用 JS 防止本地存储覆盖值

How to prevent local storage overwriting values using JS

javascript

local-storage