我需要将本地存储添加到我的待办事项列表中，但我一无所知

Question

我正在为学校的一个期末项目制定一份待办事项清单。我已经设置并工作了列表本身，但是我忘记添加本地存储，以便在刷新页面时它会保留用户设置的值，例如删除列表项或添加新项。 1）我不知道在我的代码中的什么地方插入它，2）我不知道格式，比如“我已经使用的这个变量放在这里”类型的东西。我将代码粘贴到 codepen，可以在这里找到：https://codepen.io/otterspawdesign/pen/bJXaYm 这是javascript：

var listitems = document.getElementsByTagName("li");
var i;
for (i = 0; i < listitems.length; i++) {
  var span = document.createElement("span");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  listitems[i].appendChild(span);
}

var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'li') {
    ev.target.classList.toggle('checked');
  }
}, false);

function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("typefield").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("Type an item to add to your list.");
  } else {
    document.getElementById("thelist").appendChild(li);
  }
  document.getElementById("typefield").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }

}

我的最后期限很紧（今晚午夜），所以如果有人能像我 5 岁一样向我解释它并提供代码并告诉我它是如何工作的，我的意思是一步一步地，我会非常感激。

Answer 1

var Todos = JSON.parse(localStorage.getItem('todos')) || [];

for (var i = 0; i < Todos.length; i++) {
  newElementFromLocalStorage(Todos[i])
}

这就是诀窍。第一行代码需要放在 javascript 的顶部。当本地存储为空（首次加载）时，它会返回本地存储中的待办事项数组或空数组。然后 for 循环将对所有这些待办事项执行一个功能。

您唯一需要做的（双关语）就是编写newElementFromLocalStorage 函数。一个函数，它接受一个字符串，并从中创建一个新元素。

Todos.push(newTodo);

localStorage.setItem('todos', JSON.stringify(Todos));

这些代码行需要包含在newElement 函数中。第一行将一个新的 todo 推送到 todo 的数组（或空数组，然后将成为 todo 的）。第二行代码使用新添加的 todo 将 localstorage 设置为新的“状态”。

在这些代码行中，newTodo 变量未声明，这是您需要做的事情（哦，是的，另一个）。它应该只是您从输入中读取的字符串。

我知道这是一个学校项目，但我想提一下，对于像这样的实际应用程序，您不会使用本地存储，而是连接数据库。希望这可以帮助！祝你好运！