如何使用来自localstorage的jquery将项目附加到DOM？

Posted 2021-04-10

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

答案

创建另一个只填充列表的函数，以便在页面加载时立即使用它，因此它不会以空列表开头。在添加更多内容之前，请确保此功能清空列表中的现有项目。

$("#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/