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

我有4个HTML按钮。在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>

---

要更新本地存储而不更换它，您需要分几个步骤进行：

从存储中获取ProductsInCart条目。 如果不存在，请创建一个空数组 将新购物车项目添加到阵列中。 将此新的/更新的阵列保存回本地存储中的ProductsInCart条目。 因此，简单地说：

---

Read->Update->Write

要在不更换本地存储的情况下更新本地存储，您需要通过以下几个步骤完成：

从存储中获取ProductsInCart条目。 如果不存在，请创建一个空数组 将新购物车项目添加到阵列中。 将此新的/更新的阵列保存回本地存储中的ProductsInCart条目。 因此，简单地说：

---

读取->更新->写入

在菜单项数组中推送新菜单项

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));
});

---

在菜单项数组中按下新菜单项

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));
});

---

由于您总是使用同一个键来存储数据，因此该条目将被覆盖。请每次更改密钥以防止覆盖以前的条目

window.localStorage.setItemkey，JSON.stringifymenuItem； 您可以尝试：

让addCart=document.querySelectorAll'.addCart'； addCart[i]。addEventListener'click'，=>{ 让name=addCart[i].name； let price=addCart[i]。价值； 常量菜单项={ 姓名:姓名,， 价格：价格， }; window.localStorage.setItem'ProductsInCart_uu'+i，JSON.stringifymenuItem； }; }

---

由于您总是使用同一个键来存储数据，因此该条目将被覆盖。请每次更改密钥以防止覆盖以前的条目

window.localStorage.setItemkey，JSON.stringifymenuItem； 您可以尝试：

让addCart=document.querySelectorAll'.addCart'； addCart[i]。addEventListener'click'，=>{ 让name=addCart[i].name； let price=addCart[i]。价值； 常量菜单项={ 姓名:姓名,， 价格：价格， }; window.localStorage.setItem'ProductsInCart_uu'+i，JSON.stringifymenuItem； }; }

---

将ProductsInCart定义为对象数组而不是单个对象。将ProductsInCart定义为对象数组而不是单个对象。这样可能会跳过整个menuItem变量。这样可能会跳过整个menuItem变量。对不起，但是像这样索引本地存储密钥使得不可能迭代产品。虽然这可能会起作用，但这是一种效率很低且可维护性很差的方法。很抱歉，这样对本地存储密钥进行索引会导致无法对产品进行迭代。虽然这可能会起作用，但这是一种效率低下且维护性差的方法。

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));
});