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

我正在用DOM方法构建一个简单的JavaScript待办事项列表，并试图为列表项实现

localStorage

<代码>本地存储在添加和删除项目时显示正常工作。但是，在呈现列表项之前，会将单词

undefined

抛出到屏幕。知道为什么会这样吗？非常感谢

JS:

HTML:

添加
新列表

我用注释更新了代码：

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"];
}

演示：

---

NB：将

html

放入

localStorage

不是最佳做法，但我相信您知道。

我用注释更新了代码：

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"];
}

演示：

---

NB：将

html

放入

localStorage

不是最佳做法，但我相信您知道这一点。

您使用的是

ul.innerHTML=localStorage[“list”]已填充
localStorage.list
之前您正在使用
ul.innerHTML=localStorage[“list”]之前
localStorage.list
已填充感谢您的响应。我查看了演示，但看起来“未定义”仍然出现。知道如何设置此代码来删除它吗？我确实发布了答案，但在演示中发现了一个错误。最有可能的是，在修复代码之前，
undefined
已保存到
localStarage
。尝试在浏览器中清理
localStorage
并刷新页面（或在Chrome中使用匿名模式）。感谢您的响应。我查看了演示，但看起来“未定义”仍然出现。知道如何设置此代码来删除它吗？我确实发布了答案，但在演示中发现了一个错误。最有可能的是，在修复代码之前，
undefined
已保存到
localStarage
。尝试在浏览器中清理
localStorage
，并刷新页面（或在Chrome中使用匿名模式）。
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"];
}