如何在 Javascript 中设置 localStorage答案

【问题标题】：How to set localStorage in Javascript如何在 Javascript 中设置 localStorage
【发布时间】：2018-11-26 21:49:23
【问题描述】：

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

  var inputItem = document.getElementById("inputItem");
inputItem.focus();

function addItem(list, input) {
  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 = input.value;

  label.appendChild(checkBox);
  label.appendChild(labelText);

  listItem.appendChild(label);
  listItem.appendChild(deleteButton);

  list.appendChild(listItem);
  inputItem.focus();
  inputItem.select();
  return false;

}

function store() {
  var html = listItem.innerHTML;
  localStorage.setItem("page", html);
}

function retrieve() {
  var html = localStorage.getItem("page");
  listItem.innerHTML = html;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

</head>

<h1 align="center"> To-Do List </h1>

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

  <div id="innerDiv">
    <ul id="list"></ul>
  </div>

</body>

</html>

【问题讨论】：

请解释“不工作”是什么意思。错误信息？预期成绩？观察到的结果？
你没有在任何地方打电话给store 或retrieve，所以很难说它们是否有效。尝试在document is ready 或window has finished loading 和store before the document unloads 之后调用retrieve。
你没有在任何地方调用 store，为什么你期望它可以工作？
这是我第一次在函数中使用本地存储。你有什么建议？

标签： javascript html local-storage storage

【解决方案1】：

我认为你必须只存储价值而不是整个 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>

【讨论】：

只是一个链接答案不是最好的方法，在这里发布相关部分代码。顺便提一句。链接不可点击，请修复。 :) Tip on answering