添加的重复数据在 LocalStorage 中被覆盖

如何解决添加的重复数据在 LocalStorage 中被覆盖

所以我在 addToCart 中有这个函数 Javascript，通过点击一个按钮，项目的名称和金额被保存到 LocalStorage，然后我用 {{1 }}。这里的问题是，每当我在该按钮上单击两次或更多次时，数据就会被覆盖。

比如我想添加一个娃娃到购物车，然后我想再添加两个娃娃，然后保存只是>

娃娃：2

但我希望它是

娃娃：1
娃娃：2

我的代码：

innerHTML

如何解决这个问题，我看到你可以用 const lookUpItem = matches.map((match,idx)=> `<h2 id="name"><span id="${match.itemName}">${match.itemName}</span></h2> <p>Amount: <span id="am_${idx}">${match.amount1}</span></p> <button onclick="addToCart('${match.itemName}','am_${idx}')" id="add">Add to Cart</button> </span></small> </div>` ).join(''); itemList.innerHTML = lookUpItem; //outPut is id of an <ul> in HTML const outPutHTML = document.getElementById("outPut"); //nm,am - variables from array.map //saves line to localStorage and adds line to outputHTML function addToCart(nm,am) { { const itemName = nm; const amount = document.getElementById(am).innerText; localStorage.setItem(itemName,amount); outPutHTML.innerHTML += `${itemName}: ${amount}<br />`; } } //shows all data in Local Storage in outPutHTML for(let i = 0; i < localStorage.length; i++) { const name = localStorage.key(i); const value = localStorage.getItem(name); outPutHTML.innerHTML += `${name}: ${value} <br />`; } 解决这个问题，但不知道如何应用它？感谢您的帮助。

解决方法

您不能在本地存储中存储具有相同密钥的两个项目。

最好先考虑如何将其存储在内存中——而不考虑区域设置存储。

例如，你可以想象这个结构：

items = [
    { name: "Doll",value: "1" },{ name: "Doll",value: "2" }
];

如果您需要添加另一个，您只需

items.push({ name: "Doll",value: "15" });

一旦定义了内存结构，就可以使用一个硬编码键将整个结构写入本地存储：

localStorage.setItem("items",JSON.stringify(items));

并在页面开头阅读该信息：

items = JSON.parse(localStorage.getItem("items") || "[]");

|| 用于处理本地存储中尚不存在数据的情况，在这种情况下，您希望获得一个空数组。

所以这里是您代码的一部分。注释是您的注释，因此您可以看到代码适合的位置：

//shows all data in Local Storage in outPutHTML
const items = JSON.parse(localStorage.getItem("items") || "[]");
outPutHTML.innerHTML = items.map(({name,value}) => `${name}: ${value}<br>`)
                            .join("");

//saves line to localStorage and adds line to outputHTML
function addToCart(name,am) {
    const value = document.getElementById(am).innerText;
    items.push({name,value});
    localStorage.setItem("items",JSON.stringify(items));
    outPutHTML.innerHTML += `${name}: ${value}<br>`;
}