javascript - 如何使用来自 localstorage 的 jquery 将项目 append 到 DOM？

Question

我有一个问题。我有一个输入字段并将输入存储在本地存储中。单击(“添加”)时，我将输入添加到本地存储，并希望立即将其 append 到我的 ul 元素。我不能只 append 当前输入，因为它会在页面重新加载时消失，但是当我从本地存储获取项目时，它不会正确显示。我对此进行了研究，但无论我尝试什么，我总是得到奇怪的结果。我包含了下面的代码，还制作了一个 jsfiddle。非常感谢!

jsfiddle:https://jsfiddle.net/codingcodingcoding/41mztdnu/

html:

<input id="title"/>
<input id="text"/>
<button id="button">Add</button>
<ul id="output"></ul>

js:

$("#button").click(function () {
    var title = $("#title").val();
    var text = $("#text").val();
    var todos = JSON.parse(localStorage.getItem("todos")) || [];

    var newTodos = {
        "title": title,
        "text": text
    }
    todos.push(newTodos);

    localStorage.setItem("todos", JSON.stringify(todos))

    todos.forEach(function (todo) {
        $("#output").append("<li>" + todo.text + "</li>")
    })

})

更新:下面的代码确实显示了当前添加的项目，但在页面刷新时消失，因为只有待办事项列表是持久的，这里的“当前”不能是整个列表。

localStorage.setItem("todos", JSON.stringify(todos))
var current=JSON.parse(localStorage.getItem("info"))
$("#output").append("<li>" + current.text + "</li>")

Answer 1

创建另一个仅填充列表的函数，以便您可以在页面加载时立即使用它，这样它就不会以空列表开头。确保此函数在添加更多项目之前清空列表中的现有项目。

$("#button").click(function() {
  var title = $("#title").val();
  var text = $("#text").val();
  var todos = JSON.parse(localStorage.getItem("todos")) || [];
  var newTodos = {
    "title": title,
    "text": text
  }
  todos.push(newTodos);
  localStorage.setItem("todos", JSON.stringify(todos))
  populateList();
});

function populateList() {
  var todos = JSON.parse(localStorage.getItem("todos")) || [];
  $("#output").empty();
  todos.forEach(function(todo) {
    $("#output").append("<li>" + todo.text + "</li>")
  })
}

populateList();

https://jsfiddle.net/41mztdnu/7/