javascript - 如何使用 localStorage 构建简单的 JavaScript 待办事项列表

Question

我正在使用 DOM 方法构建一个简单的 JavaScript 待办事项列表，并尝试为列表项实现 localStorage。添加和删​​除项目时，localStorage 似乎可以正常运行。但是，在呈现列表项之前，undefined 一词会被抛出到屏幕上。知道为什么会发生这种情况吗？非常感激!

JS:

var ul = document.getElementById("myUl");

function add() {
  var item = document.getElementById("newItem").value;
  var itemTxt = document.createTextNode(item);
  var li = document.createElement("li");
  var btn = document.createElement("button");
  var btnx = document.createTextNode("x");
  btn.setAttribute("onclick", "remove()");
  btn.appendChild(btnx);
  li.appendChild(itemTxt);
  li.appendChild(btn);
  ul.appendChild(li);
}

function remove() {
  var task = this.event.currentTarget.parentNode;
  ul.removeChild(task);
}

ul.innerHTML = localStorage["list"];

setInterval(function(){
  localStorage["list"] = ul.innerHTML;
}, 1000);

HTML:

  <input id="newItem" />
  <button onclick="add()">add</button>
  <ul id="myUl">New List</ul>

Answer 1

我用注释更新了代码:

var ul = document.getElementById("myUl");

function add() {
  var item = document.getElementById("newItem").value;
  var itemTxt = document.createTextNode(item);
  var li = document.createElement("li");
  var btn = document.createElement("button");
  var btnx = document.createTextNode("x");
  btn.setAttribute("onclick", "remove()");
  btn.appendChild(btnx);
  li.appendChild(itemTxt);
  li.appendChild(btn);
  ul.appendChild(li);
  localStorage["list"] = ul.innerHTML // updating localstorage
}

function remove() {
  var task = this.event.currentTarget.parentNode;
  ul.removeChild(task);
  localStorage["list"] = ul.innerHTML // updating localstorage
}

if (localStorage["list"]) { // checking, if there is something in localstorage
  ul.innerHTML = localStorage["list"];
}

演示:https://codepen.io/anon/pen/dQpwpz

注意:将 html 放入 localStorage 中并不是最佳实践，但我相信您知道这一点。