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

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";    }  }}我的工作期限很紧（今晚午夜），所以如果有人可以像我五岁那样向我解释它并提供代码并告诉我它如何工作，我的意思是一步一步走，我会这样感激。

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函数中。第一行将新的待办事项推送到待办事项的数组（或空数组，然后将其变为待办事项的数组）。第二行代码将本地存储设置为具有新添加的待办事项的新“状态”。

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

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