如何使用JavaScript和HTML使用localStorage存储数据？

我正在做todo列表，当它将数据保存在todo任务行并完成时。内部视图。 我试图将其保存为数组，我保存了它，但无法将其从外部获取，这是我没有做任何事情时的代码，演示如何操作，我还不了解这个地方。给我解释一下。多谢各位

var newTaskInput=document.getElementById（“新任务”）；
var addButton=document.getElementsByTagName（“按钮”）[0]；
var todoTask=document.getElementById（“未完成的任务”）；
var completeTask=document.getElementById（“已完成的任务”）；
var createNewTaskElement=函数（taskString）{
var listItem=document.createElement（“li”）；
var checkBox=document.createElement（“输入”）；
var label=document.createElement（“标签”）；
var editInput=document.createElement（“输入”）；
var editButton=document.createElement（“按钮”）；
var deleteButton=document.createElement（“按钮”）；
checkBox.type=“checkBox”；
editInput.type=“文本”；
editButton.innerText=“编辑”；
editButton.className=“编辑”；
deleteButton.innerText=“删除”；
deleteButton.className=“删除”；
label.innerText=任务字符串；
listItem.appendChild（复选框）；
listItem.appendChild（标签）；
listItem.appendChild（editInput）；
listItem.appendChild（编辑按钮）；
listItem.appendChild（deleteButton）；
返回列表项；
}
var addTask=function（）{
如果（newTaskInput.value==“”）{
警报（“Nhap todoTask项目！”）；
返回false；
}
var listItem=createNewTaskElement（newTaskInput.value）；
todoTask.appendChild（列表项）；
bindTaskEvents（listItem，taskCompleted）；
newTaskInput.value=“”；
返回true；
}
var editTask=函数（）{
var listItem=this.parentNode；
var editInput=listItem.querySelector（“输入[type=text”）；
var label=listItem.querySelector（“标签”）；
var containsClass=listItem.classList.contains（“编辑模式”）；
如果（包含类）{
label.innerText=editInput.value；
}否则{
editInput.value=label.innerText；
}
listItem.classList.toggle（“编辑模式”）；
}
var deleteTask=函数（）{
var listItem=this.parentNode；
var ul=listItem.parentNode；
ul.removeChild（列表项）；
}
var taskCompleted=函数（）{
var listItem=this.parentNode；
completeTask.appendChild（列表项）；
bindTaskEvents（listItem，TaskCompleted）；
}
var taskcomplete=函数（）{
var listItem=this.parentNode；
todoTask.appendChild（列表项）；
bindTaskEvents（listItem，taskCompleted）；
}
var bindTaskEvents=函数（taskListItem，checkBoxEventHandler）{
log（“绑定列表项事件”）；
var checkBox=taskListItem.querySelector（“输入[type=checkBox]”）；
var editButton=taskListItem.querySelector（“button.edit”）；
var deleteButton=taskListItem.querySelector（“button.delete”）；
editButton.onclick=editTask；
deleteButton.onclick=deleteTask；
checkBox.onchange=checkBoxEventHandler；
}
addButton.addEventListener（“单击”，addTask）；
for（变量i=0；i

您可以尝试在本地存储中存储HTML

用于在本地存储中存储HTML 用于在本地存储中获取HTML

---

在保存到localstorage时尝试JSON.stringify（），在从localstorage返回数组时尝试JSON.parse（）。在这里，请与我一起尝试。感谢给出正确的答案，请在问题本身中提供一个，而不是作为外部链接（或两者兼而有之）。

var newTaskInput = document.getElementById("new-task");
var addButton = document.getElementsByTagName("button")[0];
var todoTask = document.getElementById("incomplete-tasks");
var completeTask= document.getElementById("completed-tasks");

var createNewTaskElement = function(taskString) {
  var listItem = document.createElement("li");
  var checkBox = document.createElement("input");
  var label = document.createElement("label");
  var editInput = document.createElement("input");
  var editButton = document.createElement("button");
    var deleteButton = document.createElement("button");

  checkBox.type = "checkbox";
  editInput.type = "text";
  editButton.innerText = "Edit";
  editButton.className = "edit";
  deleteButton.innerText = "Delete";
  deleteButton.className = "delete";

  label.innerText = taskString;

  listItem.appendChild(checkBox);
  listItem.appendChild(label);
  listItem.appendChild(editInput);
  listItem.appendChild(editButton);
  listItem.appendChild(deleteButton);

  return listItem;
}

var addTask = function() {
    if(newTaskInput.value == ""){
        alert("Nhap todoTask Item !");
        return false;
    }
  var listItem = createNewTaskElement(newTaskInput.value);
  todoTask.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);

    newTaskInput.value = "";
    return true;
}

var editTask = function() {
  var listItem = this.parentNode;
  var editInput = listItem.querySelector("input[type=text");
  var label = listItem.querySelector("label");
    var containsClass = listItem.classList.contains("editMode");

  if(containsClass) {
    label.innerText = editInput.value;
  } else {
    editInput.value = label.innerText;
  }
  listItem.classList.toggle("editMode");  
}

var deleteTask = function() {
  var listItem = this.parentNode;
  var ul = listItem.parentNode;

  ul.removeChild(listItem);
}

var taskCompleted = function() {
  var listItem = this.parentNode;
  completeTask.appendChild(listItem);
  bindTaskEvents(listItem, taskIncomplete);
}

var taskIncomplete = function() {
  var listItem = this.parentNode;
  todoTask.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
}

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  console.log("Bind list item events");
  var checkBox = taskListItem.querySelector("input[type=checkbox]");
  var editButton = taskListItem.querySelector("button.edit");
  var deleteButton = taskListItem.querySelector("button.delete");

  editButton.onclick = editTask;

  deleteButton.onclick = deleteTask;

  checkBox.onchange = checkBoxEventHandler;
}

addButton.addEventListener("click", addTask);

for(var i = 0; i < todoTask.children.length; i++) {
  bindTaskEvents(todoTask.children[i], taskCompleted);
}

for(var i = 0; i < completeTask.children.length; i++) {
  bindTaskEvents(completeTask.children[i], taskIncomplete);
}

 window.localStorage.setItem('todoTask', todoTask.innerHTML);
 window.localStorage.setItem('completeTask', completeTask.innerHTML);

todoTask.innerHTML = window.localStorage.getItem('todoTask');
completeTask.innerHTML = window.localStorage.getItem('completeTask');