Question

这是一个待办事项列表程序。我希望在刷新页面时保存我的待办事项列表页面。所有的css和其他功能都能正常工作。我认为我的错误是在商店功能中使用了错误的变量我当前的尝试仍然没有工作。该尝试位于脚本的末尾。我做错了什么？

＆＃13;

  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;
}

＆＃13;

<!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>

＆＃13;

Answer 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>

如何在Javascript中设置localStorage

1 个答案: