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

Question

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

比如我想加一个娃娃到购物车，然后我想再加两个娃娃，那么保存就只有>

Doll:2

但我希望它是

Doll:1
Doll:2

我的代码：

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 />`;
}

如何解决这个问题，我看到你可以用 JSON.stringtify 解决这个问题，但不知道如何应用它？感谢您的帮助。

Answer 1

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

最好先考虑如何将其存储在内存中——不考虑语言环境存储。

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

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

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

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

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

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

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

Added duplicate data are ovewritten in LocalStorage

javascript

overwrite

local-storage