如何将用户创建的列表项保存在本地存储中？

Question

这是一个杂务列表，应将用户输入的列表项保存到本地存储。 请帮忙！

const form = document.querySelector("form");
const toDoList = document.querySelector("#list");

form.addEventListener("submit", function(event) {
    event.preventDefault();

    const newToDo = document.querySelector("#addToDo");
    const newLi = document.createElement("li");
    const newButton = document.createElement("button");
    newLi.innerText = newToDo.value;
    newButton.innerText = "Remove";
    localStorage.setItem('newitem', newLi.innerText)

    newLi.append(newButton);
    toDoList.append(newLi);
    form.reset();

    toDoList.addEventListener("click", function(event){
        if (event.target.tagName === "LI") {
            event.target.style.textDecoration = "line-through";
        } else if (event.target.tagName === "BUTTON") {
            event.target.parentNode.remove();
        } 
    });
    
});

Answer 1

实验 trocar a linha ：

localStorage.setItem('newitem', newLi.innerText)

波尔：

if(!localStorage.getItem('countItems'))
{
   //se não existe cria o contador
   localStorage.setItem('countItems',0);
}

let cont =parseInt( localStorage.getItem('countItems') , 10 );

localStorage.setItem('newitem-' + cont , newLi.innerText)

localStorage.setItem('countItems',cont+1);

Para saber quantos, você pega o valor de countItems, assim：

const quantidade = parseInt(localStorage.getItem('countItems'),10);

Para pegar os valores, você usa o index de cada item, assim：

 const item0 = localStorage.getItem('newitem-0');
  const item1 = localStorage.getItem('newitem-1');

Ou pode navegar entre os itens :

    const cont =parseInt( localStorage.getItem('countItems') , 10 );
    let index =0;

    while (index < cont)
   {
      let item = localStorage.getItem('newitem-' + index);
      console.log('Item ' + index + ' tem valor ' + item);
      index++;
   }

Answer 2

一种选择是在每次向列表中添加新项目时创建一个新的键/值对。 这样你就不会覆盖写入localStorage的最后一个键/值对。 您可以简单地命名每个键并在其后附加一个数字，该数字表示它是哪个键的计数器。

 let numKeys = null; // Will store the # of keys in localStorage const form = document.querySelector("form"); const toDoList = document.querySelector("#list"); form.addEventListener("submit", function(event) { event.preventDefault(); const newToDo = document.querySelector("#addToDo"); const newLi = document.createElement("li"); const newButton = document.createElement("button"); newLi.innerText = newToDo.value; newButton.innerText = "Remove"; numKeys = localStorage.length; // Get the # of keys already in localStorage // Create a new key so as not to overwrite existing ones localStorage.setItem('newitem' + (numKeys + 1), newLi.innerText) newLi.append(newButton); toDoList.append(newLi); form.reset(); toDoList.addEventListener("click", function(event){ if (event.target.tagName === "LI") { event.target.style.textDecoration = "line-through"; } else if (event.target.tagName === "BUTTON") { event.target.parentNode.remove(); } }); });