Javascript 将列表从本地存储中的阵列打印到DOM
我觉得我很接近这一点 有一个清单,我正在将其推送到阵列,并设置为本地存储。我想在重新实例化浏览器时从本地存储重新打印列表Javascript 将列表从本地存储中的阵列打印到DOM,javascript,jquery,arrays,html,Javascript,Jquery,Arrays,Html,我觉得我很接近这一点 有一个清单,我正在将其推送到阵列,并设置为本地存储。我想在重新实例化浏览器时从本地存储重新打印列表 <script> localStorage.clear(); var Array_ToDoList = []; var toDoCount = 0; $("#add-to-do").on("click", function(event) { event.preventDefault(); var toD
<script>
localStorage.clear();
var Array_ToDoList = [];
var toDoCount = 0;
$("#add-to-do").on("click", function(event) {
event.preventDefault();
var toDoTask = $("#to-do").val().trim();
Array_ToDoList.push(toDoTask)
localStorage.setItem("STR_Tasks", JSON.stringify(Array_ToDoList))
console.log(Array_ToDoList);
var toDoItem = $("<p>");
toDoItem.attr("id", "item-" + toDoCount);
toDoItem.append(" " + toDoTask);
var toDoClose = $("<button>");
toDoClose.attr("data-to-do", toDoCount);
toDoClose.addClass("checkbox");
toDoClose.append("✓");
toDoItem = toDoItem.prepend(toDoClose);
$("#to-dos").append(toDoItem);
$("#to-do").val("");
toDoCount++;
});
$(document.body).on("click", ".checkbox", function() {
var toDoNumber = $(this).attr("data-to-do");
$("#item-" + toDoNumber).remove();
Array_ToDoList.splice(toDoNumber, 1);
console.log(Array_ToDoList);
localStorage.setItem("STR_Tasks", JSON.stringify(Array_ToDoList))
});
var StoredToDos = Array_ToDoList.length;
for (var i = 0; i < StoredToDos; i++) {
$("#to-dos").append(localStorage.getitem(STR_Tasks[i]));
}
</script>
localStorage.clear();
var数组_ToDoList=[];
var toDoCount=0;
$(“#添加待办事项”)。在(“单击”)上,函数(事件){
event.preventDefault();
var toDoTask=$(“#to-do”).val().trim();
数组_ToDoList.push(toDoTask)
setItem(“STR_Tasks”,JSON.stringify(Array_ToDoList))
console.log(数组\ ToDoList);
var toDoItem=$(“”);
toDoItem.attr(“id”,“项目-”+toDoCount);
toDoItem.append(“+toDoTask”);
var toDoClose=$(“”);
attr(“待处理的数据”,toDoCount);
toDoClose.addClass(“复选框”);
toDoClose.append(“✓");
toDoItem=toDoItem.prepend(toDoClose);
$(“#待办事项”)。追加(待办事项);
$(“#待办事项”).val(“”);
toDoCount++;
});
$(document.body).on(“单击”、“.checkbox”,函数()){
var toDoNumber=$(this.attr(“待处理数据”);
$(“#项-”+toDoNumber.remove();
数组_ToDoList.拼接(toDoNumber,1);
console.log(数组\ ToDoList);
setItem(“STR_Tasks”,JSON.stringify(Array_ToDoList))
});
var StoredToDos=数组_ToDoList.length;
对于(变量i=0;i
我知道我必须读取数组并重新打印,这可能与取消存储中的字符串有关。在脚本的第一行中,您清除了本地存储中的所有键,因此您不能使用上一个列表而将localStorage.clear()替换为:
这将使您的脚本使用当前保存的stru任务。根据我对代码的理解:
var tasks = JSON.parse(localStorage.getItem("STR_Tasks"));
for (var i = 0; i < StoredToDos; i++) {
$("#to-dos").append(tasks[i]);
}
var tasks=JSON.parse(localStorage.getItem(“STR_tasks”));
对于(变量i=0;i
JSON.parse(localStorage.getItem('STR_Tasks')).forEach(function(element){//implementation});这太棒了!我现在可以再次使用解析字符串在浏览器中再次“呈现”列出的项目。很高兴提供帮助:)
var tasks = JSON.parse(localStorage.getItem("STR_Tasks"));
for (var i = 0; i < StoredToDos; i++) {
$("#to-dos").append(tasks[i]);
}