尝试使用 JavaScript 将所有生成的“li”元素保存到本地存储

Question

此代码成功获取表单的内容并将其保存到有序列表中，另外 2 个函数执行相同的操作，但创建了一个时间戳。 我正在尝试获取生成的每个li元素，并在您按下保存按钮时将其保存到localStorage ，然后在按下“加载”按钮时从本地存储重新填充它。 我无法让它工作来地狱或高水位。 加载按钮什么都不做，奇怪的是，“保存”按钮充当清除所有按钮，实际上删除所有内容而不是保存它。 控制台日志显示没有错误。 我有下面的 JavaScript 和相应的 HTML。

 let item; let text; let newItem; function todoList() { item = document.getElementById("todoInput").value text = document.createTextNode(item) newItem = document.createElement("li") newItem.onclick = function() { this.parentNode.removeChild(this); } newItem.onmousemove = function() { this.style.backgroundColor = "orange"; } newItem.onmouseout = function() { this.style.backgroundColor = "lightblue"; } todoInput.onclick = function() { this.value = "" } newItem.appendChild(text) document.getElementById("todoList").appendChild(newItem) }; function save() { const fieldvalue = querySelectorAll('li').value; localStorage.setItem('item', JSON.stringify(item)); } function load() { const storedvalue = JSON.parse(localStorage.getItem(item)); if (storedvalue) { document.querySelectorAll('li').value = storedvalue; } }

 <form id="todoForm"> <input id="todoInput" value="" size="15" placeholder="enter task here"> <button id="button" type="button" onClick="todoList()">Add task</button> <button id="save" onclick="save()">Save</button> <button id="load" onclick="load()">Load</button> </form>

Answer 1

正如@Phil 和@Gary 解释的那样，您的问题的一部分是尝试使用 querySelectorAll('li') ，就好像它会返回一个值一样。 您必须循环遍历它返回的数组。

检查下面的代码给自己一个起点。 我不得不重命名你的一些函数，因为它们给我带来了一些错误。

<form id="todoForm">
  <input id="todoInput" value="" size="15" placeholder="enter task here">
  <button id="button" type="button" onClick="todoList()">Add task</button>
  <button id="save" onclick="saveAll()" type="button">Save</button>
  <button id="load" onclick="loadAll()" type="button">Load</button>
</form>

<div id="todoList"></div>

<script>
  let item;
  let text;
  let newItem;

  function todoList() {
    item = document.getElementById("todoInput").value
    text = document.createTextNode(item)
    newItem = document.createElement("li")

    newItem.onclick = function() {
      this.parentNode.removeChild(this);
    }
    newItem.onmousemove = function() {
      this.style.backgroundColor = "orange";
    }
    newItem.onmouseout = function() {
      this.style.backgroundColor = "lightblue";
    }
    todoInput.onclick = function() {
      this.value = ""
    }

    newItem.appendChild(text)
    //Had to add the element
    document.getElementById("todoList").appendChild(newItem);
  }


  function saveAll() {

    //Create an array to store the li values
    var toStorage = [];

    var values = document.querySelectorAll('li');
    //Cycle through the li array
    for (var i = 0; i < values.length; i++) {
      toStorage.push(values[i].innerHTML);
    }

    console.log(toStorage);
    //Can´t test this on stackoverflow se the jsFiddle link
    localStorage.setItem('items', JSON.stringify(toStorage));
    console.log(localStorage);

  }

  function loadAll() {

    const storedvalue = JSON.parse(localStorage.getItem('items'));
    console.log(storedvalue);
        //Load your list here
  }

</script>

检查https://jsfiddle.net/nbe18k2u/看它工作