JS 中的 SetItem 方法答案

【问题标题】：SetItem method in JSJS 中的 SetItem 方法
【发布时间】：2020-04-06 08:12:37
【问题描述】：

最近我一直在使用本地存储使用 javascript 构建 todolist。所以想法很简单，使用数字作为键和 listItem 作为值将列表存储在本地存储中。当我尝试保存 listItem 时，键很好，但值与键相同，它是数字。只有当我将“列表”字符串附加到键值时，一切才开始正常工作。所以问题是为什么会发生？ Why?

下面是代码示例：

不起作用（输入的值等于键）：

let key = Object.keys(localStorage);
key.length === 0 ? key = 1 : key = key.length + 1;

btn.addEventListener("click", () => {
    const inputValue = document.querySelector(".textarea").value;
    localStorage.setItem(key, inputValue);
    location.reload();
});

成功了：

let key = Object.keys(localStorage);
key.length === 0 ? key = "list1" : key = "list" + (key.length + 1);

btn.addEventListener("click", () => {
    const inputValue = document.querySelector(".textarea").value;
    localStorage.setItem(key, inputValue);
    location.reload();
});

附：对不起，我的英语不好。

【问题讨论】：

标签： javascript json methods

【解决方案1】：

简单回答，localStorage.SetItemshould be a string的关键参数。

如果您将第 6 行替换为：

，您可以使用第一个解决方案：

localStorage.setItem(key.toString(), inputValue);

另外，我建议您不要更改三元表达式部分中的变量。您应该将第 1 行替换为：

key = key.length === 0 ? 1 : key.length + 1;

但实际上，你甚至不需要三元，你可以将它替换为

key = key.length + 1;

另一个建议，您应该评估事件中的“关键”。所以整个代码看起来像这样：

btn.addEventListener("click", () => {
    const key = Object.keys(localStorage).length
    const inputValue = document.querySelector(".textarea").value;
    localStorage.setItem(key, inputValue);
    location.reload();
});

【讨论】：