Javascript 我需要将本地存储添加到我的待办事项列表和I'；我不知所措

我正在为学校的期末项目准备一份任务清单。我已经设置了列表本身并开始工作，但是我忘了添加本地存储，所以当页面刷新时，它会保留用户设置的值，比如删除列表项或添加新的列表项。1） 我不知道在我的代码中插入它的位置，2）我不知道格式，比如“我已经使用的这个变量在这里”类型的东西。我将代码粘贴到codepen，可以在这里找到： 这是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";
    }
  }

}

var listitems=document.getElementsByTagName（“li”）；
var i；
对于（i=0；i

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

var Todos=JSON.parse（localStorage.getItem（'Todos'））| |[]；
对于（变量i=0；i

这就是诀窍。第一行代码需要放在javascript的顶部。它从localstorage返回TODO数组，或者在localstorage为空（第一次加载）时返回空数组。for循环将在所有这些todo上执行一个函数

您需要做的唯一一件事（双关语）就是编写

newElementFromLocalStorage

函数。接受字符串并从中创建新元素的函数

Todos.push（newTodo）；
setItem（'todos'，JSON.stringify（todos））；

这些代码行需要包含在

newElement

函数中。第一行将新的todo推送到todo的数组（或空数组，空数组将成为todo）。第二行代码使用新添加的todo将localstorage设置为新的“状态”

在这些代码行中，

newTodo

变量没有声明，这是您需要做的事情（哦，是的，另一个）。它应该只是从输入中读取的字符串

---

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

我做到了，虽然我了解它的功能，但我不确定在我的代码中实现它的位置。另外，我是否使用我已经声明的变量？您的代码中有一些您想要持久化的数据。任何时候发生更改，请在localStorage上设置新值。当页面重新加载时，就会发生加载事件，或者文档准备就绪（如果您喜欢），请检查本地存储中是否存在该值。如果有，请还原页面上的数据。请记住，数据不是指html。它指的是html显示的信息。您使用这些数据来重新创建html。因此，如果我理解您的意思，我会在变量“listitems”上实现本地存储？@MelissaKemp很好，您找到了问题的答案！如果它对你有帮助，请将它（答案左边的小勾号）标记为帮助你解决问题的答案。是的，会更好。嘿@MelissaKemp，我注意到你删除了说明这有助于解决问题的评论。它到底没用吗？嗯，没有，这对我有帮助，我不记得删除了评论，见鬼？