如何使用来自本地存储的 jquery 将项目附加到 DOM？

Question

我有一个问题。我有一个输入字段并将输入存储在本地存储中。单击时（在“添加”上），我正在向本地存储添加输入，并希望立即将其附加到我的 ul 元素中。我不能只附加当前输入，因为它会在页面重新加载时消失，但是当我从本地存储中获取项目时，它没有正确显示。我对此进行了研究，但无论我尝试了什么，我都会得到奇怪的结果。我包括了下面的代码，还做了一个 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/