Question

我正在为学校的最后一个项目做一份待办事项清单。我已经建立并运行了列表，但是我忘了添加本地存储，因此刷新页面时它会保留用户设置的值，例如删除列表项或添加新项。 1）我不知道在代码中插入它的位置，2）我不知道格式，例如“我已经使用过的变量在这里”。我将代码粘贴到了代码笔，可以在这里找到：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函数中。第一行将一个新的待办事项推送到待办事项的数组（或空数组，然后将成为待办事项的数组）。第二行代码将本地存储设置为带有新添加的待办事项的新“状态”。

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

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

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

1 个答案: