如何在Javascript中设置本地存储

这是一个待办事项列表程序。我想在刷新页面时保存我的待办事项列表页面。所有css和其他功能都正常工作。我认为我的错误是在存储函数中使用了错误的变量。我当前的尝试仍然不起作用。尝试在脚本末尾。我做错了什么

var-inputItem=document.getElementById（“inputItem”）；
inputItem.focus（）；
函数附加项（列表、输入）{
var inputItem=this.inputItem；
var list=document.getElementById（列表）；
var listItem=document.createElement（“li”）；
var deleteButton=document.createElement（“按钮”）；
deleteButton.innerText=“X”；
deleteButton.addEventListener（“单击”，函数（）{
this.parentElement.style.display='none'；
});
var checkBox=document.createElement（“输入”）；
checkBox.id=“check”；
checkBox.type='checkBox'；
checkBox.addEventListener（'change'，function（））{
labelText.style.textDecoration=checkBox.checked？'line-through'：'none'；
});
var label=document.createElement（“标签”）；
var labelText=document.createElement（“span”）；
labelText.innerText=input.value；
label.appendChild（复选框）；
label.appendChild（labelText）；
listItem.appendChild（标签）；
listItem.appendChild（deleteButton）；
list.appendChild（listItem）；
inputItem.focus（）；
inputItem.select（）；
返回false；
}
函数存储（）{
var html=listItem.innerHTML；
setItem（“页面”，html）；
}
函数检索（）{
var html=localStorage.getItem（“页面”）；
listItem.innerHTML=html；
}

待办事项清单

我认为您必须只存储值，而不是整个html

var inputItem = document.getElementById("inputItem");
inputItem.focus();
function addItem(list, value, onLoad) {
  var inputItem = this.inputItem;
  var list = document.getElementById(list);
  var listItem = document.createElement("li");
  var deleteButton = document.createElement("button");
  deleteButton.innerText = "X";
  deleteButton.addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });
  var checkBox = document.createElement("input");
  checkBox.id = "check";
  checkBox.type = 'checkbox';
  checkBox.addEventListener('change', function() {
    labelText.style.textDecoration = checkBox.checked ? 'line-through' : 'none';
  });
  var label = document.createElement("label");
  var labelText = document.createElement("span");
  labelText.innerText = value;
  label.appendChild(checkBox);
  label.appendChild(labelText);
  listItem.appendChild(label);
  listItem.appendChild(deleteButton);
  list.appendChild(listItem);
  inputItem.focus();
  inputItem.select();
  if(!onLoad) {
    this.store(value);
  }
  return false;
}
function store(value) {
  var list = localStorage.getItem("list");
  if(list) {
    list = list.split(",");
    list.push(value);                 ;
  } else {
    list = [value];
  }
  localStorage.setItem("list", list.toString());
}
window.onload = function() {
  var list = localStorage.getItem("list");
  if(list) {
    list = list.split(",");
    list.forEach(function(li){
      this.addItem("list", li, true);
    },this);
  }
}

你必须改变你的html

<form onsubmit="return addItem('list', this.inputItem.value)">
      <input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
      <input id="submit" type="submit">
    </form>

请解释“不工作”的含义。错误消息？预期结果？观察结果？您没有在任何地方调用

存储

或

检索

，因此很难说它们是否有效。尝试在或之后调用

retrieve

和

store

。您还没有调用store anywhere，为什么希望它工作？这是我第一次在函数中使用本地存储。你有什么建议？只是一个链接答案不是最好的方式，在这里发布相关的部分代码。顺便说一句，链接不可点击，请修复。：）