刷新后保留 localStorage 值答案

【问题标题】：keep localStorage values after refresh刷新后保留 localStorage 值
【发布时间】：2021-03-19 19:58:59
【问题描述】：

当我将“项目”添加到 localStorage 并刷新页面时，一切都很好。但是，当我想添加新项目时，一切都在“ToDo”localStorage 中从头开始。

let ToDo = [];

let addNew = (event) => {

  let onelist = {
    id: Date.now(),
    title: title.value,
    description: desc.value,
    cat: [],

  }

  for (var checkbox of checkboxes) {
    if (checkbox.checked)
      onelist['cat'].push(checkbox.value);
  }
  ToDo.push(onelist);
  window.localStorage.setItem('ToDo', JSON.stringify(ToDo));
}
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('AddItem').addEventListener('click', addNew);
});

【问题讨论】：

你的const ToDo = JSON.parse(localStorage.getItem("ToDo"))在哪里？

标签： javascript local-storage

【解决方案1】：

您永远不会从本地存储中读取。也许你可以这样做：

// ... your other code

document.addEventListener('DOMContentLoaded', () => {
  ToDo = JSON.parse(window.localStorage.getItem('ToDo'));
  document.getElementById('AddItem').addEventListener('click', addNew);
});

【讨论】：

我已经对此发表了评论，但这还不够。当 localStorage 中没有任何内容时，这将失败
我已经想知道反对票是为了什么。在发布我的（错误）答案后，我立即看到了您的评论。对此感到抱歉。
不抱歉。我投票给你是因为我希望 OP 能够关闭并删除问题，但后来我看到另一个与你相同的答案并决定回答。我删除了投票

【解决方案2】：

将我的评论转换为答案，因为它有点复杂

你需要看看localStorage中是否有东西，如果有，使用它。

你不能 JSON.parse undefined 或 null 所以需要测试

const lcTodo = localStorage.getItem("ToDo");
ToDo = lcTodo ? JSON.parse(lcTodo) : [];

它可以承受负载

let ToDo;

let addNew = (event) => {

  let onelist = {
    id: Date.now(),
    title: title.value,
    description: desc.value,
    cat: [],

  }

  for (var checkbox of checkboxes) {
    if (checkbox.checked)
      onelist['cat'].push(checkbox.value);
  }
  ToDo.push(onelist);
  window.localStorage.setItem('ToDo', JSON.stringify(ToDo));
}
window.addEventListener('load', () => {
  const lcTodo = localStorage.getItem("ToDo");
  ToDo = lcTodo ? JSON.parse(lcTodo) : [];
  document.getElementById('AddItem').addEventListener('click', addNew);
});

【讨论】：

【解决方案3】：

您需要调用您的 localStorage 项目并对其进行编辑

例如：

const ToDo = JSON.parse(localStorage.getItem("ToDo"))
// now work on the ToDo like ToDo.push(...)
// after done save it again to the storage
 localStorage.setItem('ToDo', JSON.stringify(ToDo));

您所做的是每次 addNew 调用都重新创建存储

【讨论】：

我已经对此发表了评论，但这还不够。当 localStorage 中没有任何内容时，这将失败
这就是为什么你应该检查它是否已经存在并采取相应的行动