Javascript 在jQuery中将localStorage数据更改为html列表标记

我有一个todo应用程序，它将从输入标记接收的数据存储在数组中，并存储在localstorage中。 我希望每次打开新选项卡时，数据都显示为列表。我不断得到别的东西

添加任务

var nextTask=[]；
$（'.add'）。单击（函数（）{
var acceptInput=$（'.input'）.val（）；
nextTask.push（接受输入）；
setItem（“tasks”，JSON.stringify（nextTask））；
});
$（函数（）{
for（var i=0；i”+JSON.parse（b）+“”）；//将输出从localStorage更改为list标记
})
}
});

我的输出就是这种性质的

hello, good morning, create new task, install update 

而不是这个

Hello
Good morning 
Create new task
Install update

试试这个

 b=JSON.parse(b)
    for(let i=0;i<(b).length;i++)
     $('ul').append('<li>'  + b[i] +  '</li>'); 

b=JSON.parse（b）
对于（设i=0；i，这里的关键是在初始化列表标记时避免在本地存储中迭代键，而是在
localStorage
中存储任务数据的
“tasks”
键上迭代数组数据（如果有）

在您的情况下，您可以更新代码的“加载”函数，以便通过
“tasks”
键将以前保存的任务数据作为任何数组从
localStorage
中检索，如下所示：

/*
Fetch an array of tasks in JSON from the "tasks" key (or an empty JSON
array if nothing stored under that key) and parse the corresponding
array object
*/
const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");

这将为您提供一个数组（空的或填充了任务数据），然后可以迭代该数组以使用初始数据填充
ul
，如下所示：

tasks.forEach(function(task) {
  /* 
  For each task in loaded task list, append an item to the ul element
  */
  $('ul').append($('<li>').text(task));
});

tasks.forEach（函数（任务）{
/* 
对于已加载任务列表中的每个任务，将一项附加到ul元素
*/
$（'ul'）。追加（$（'
'）。文本（任务））；
});

基于此方法的完整解决方案是：


$（'.add'）。单击（函数（）{
const acceptInput=$（'.input'）.val（）；
/*如果本地存储中没有任务，请将当前任务或初始化加载到空阵列*/
const tasks=JSON.parse（localStorage.getItem（“任务”）| |“[]”）；
任务。推送（接受输入）；
/*将更新的任务列表持久化到localStoarge*/
setItem（“tasks”，JSON.stringify（tasks））；
});
$（函数（）{
/*如果本地存储中没有任务，请将当前任务或初始化加载到空阵列*/
const tasks=JSON.parse（localStorage.getItem（“任务”）| |“[]”）；
tasks.forEach（函数（任务）{
/*对于已加载任务列表中的每个任务，将一项附加到ul元素*/
$（'ul'）。追加（$（'
'）。文本（任务））；
});
})；

添加任务
欢迎使用SO。中有一个很棒的代码片段工具，您可以使用它来演示您的代码。您仅从localStorage事件中获取一个项，尽管这是一个数组，但您不是在循环解析的项，而是将其作为一个数组添加whole@MikePoole虽然这是事实，但代码段编辑器在使用会话或本地存储作为对它们的访问在代码段中被阻止。@Rorymcrossan说得好。我想我只是鼓励他们在其组成文件中显示代码，我看到您通过标记代码为他们完成了这些工作。