刷新后保留 localStorage 值

Question

當我將“項目”添加到 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);
});

Answer 1

您永遠不會從本地存儲中讀取。 也許你可以做這樣的事情：

// ... your other code

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

Answer 2

你需要調用你的 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 調用都重新創建存儲

Answer 3

將我的評論轉換為答案，因為它有點復雜

您需要查看 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);
});