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

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

jsfiddle：

html:

添加

js:

$（“#按钮”）。单击（函数（）{
var title=$（“#title”）.val（）；
var text=$（“#text”）.val（）；
var todos=JSON.parse（localStorage.getItem（“todos”））| |[]；
var newTodos={
“头衔”：头衔，
“文本”：文本
}
todos.push（newTodos）；
localStorage.setItem（“todos”，JSON.stringify（todos））
todo.forEach（函数（todo）{
$（“#输出”）.append（“
”+todo.text+“
”）
})
})

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

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

localStorage.setItem（“todos”，JSON.stringify（todos））
var current=JSON.parse（localStorage.getItem（“info”））
$（“#输出”）.append（“
”+current.text+“
”）

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

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

$（“#按钮”）。单击（函数（）{
var title=$（“#title”）.val（）；
var text=$（“#text”）.val（）；
var todos=JSON.parse（localStorage.getItem（“todos”））| |[]；
var newTodos={
“头衔”：头衔，
“文本”：文本
}
todos.push（newTodos）；
localStorage.setItem（“todos”，JSON.stringify（todos））
大众主义者（）；
});
函数populateList（）{
var todos=JSON.parse（localStorage.getItem（“todos”））| |[]；
$（“#输出”）.empty（）；
todo.forEach（函数（todo）{
$（“#输出”）.append（“
”+todo.text+“
”）
})
}
大众主义者（）；

---

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

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

$（“#按钮”）。单击（函数（）{
var title=$（“#title”）.val（）；
var text=$（“#text”）.val（）；
var todos=JSON.parse（localStorage.getItem（“todos”））| |[]；
var newTodos={
“头衔”：头衔，
“文本”：文本
}
todos.push（newTodos）；
localStorage.setItem（“todos”，JSON.stringify（todos））
大众主义者（）；
});
函数populateList（）{
var todos=JSON.parse（localStorage.getItem（“todos”））| |[]；
$（“#输出”）.empty（）；
todo.forEach（函数（todo）{
$（“#输出”）.append（“
”+todo.text+“
”）
})
}
大众主义者（）；

---

尝试将其更改为

var todos=JSON.parse（localStorage.getItem（“todos”）| |“[]）

每次单击按钮时，它都会将另一个li项添加到存储中，因此下次单击时，它会从本地存储中添加x个li，难道您不想在每次单击时添加一个新的li，其值为var newTodos吗？您需要执行

$（“#输出”）.empty（）在您的
forEach
loop@Ryan我更新了我的问题注册表。你说的。问题是，当我只添加新项目时，它一开始看起来很好，但在页面刷新时，它就消失了。这就是我的问题-我想添加新项目，但希望显示整个列表，请尝试将其更改为
var todos=JSON.parse（localStorage.getItem（“todos”）| |“[]”
每次单击按钮时，它都会将另一个li项添加到存储中，因此下次单击时，它会从本地存储中添加x个li，难道您不想在每次单击时添加一个新的li，其值为var newTodos吗？您需要执行
$（“#输出”）.empty（）在您的
forEach
loop@Ryan我更新了我的问题注册表。你说的。问题是，当我只添加新项目时，它一开始看起来很好，但在页面刷新时，它就消失了。这是我的问题-我想添加新项目，但希望整个列表都能显示出来谢谢你，现在就可以了！！您是否碰巧知道如何使新项目首先添加，而不是（当前最后一个）添加到列表中？谢谢，它现在起作用了！！您是否碰巧知道如何使新项目首先添加，而不是（当前最后一个）添加到列表中？
$("#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();