无法再次从本地存储中获取数据答案

【问题标题】：Can't get data from locale storage again无法再次从本地存储中获取数据
【发布时间】：2020-10-23 21:24:51
【问题描述】：

我正在尝试显示已传输到本地存储的列表元素（例如，当我重新加载页面时）。
存储工作，但项目没有从存储返回到列表中......似乎 forEach 最后不起作用。

index.js

const input = document.querySelector("input");
const btn = document.querySelector(".addTask > button");

let itemsArray = localStorage.getItem("items")
  ? JSON.parse(localStorage.getItem("items"))
  : [];

localStorage.setItem("items", JSON.stringify(itemsArray));
const data = JSON.parse(localStorage.getItem("items"));

btn.addEventListener("click", addList);
input.addEventListener("keyup", (e) => {
  e.keyCode === 13 ? addList(e) : null;
});

function addList(e) {
  const notCompleted = document.querySelector(".notCompleted");
  const Completed = document.querySelector(".Completed");

  const newLi = document.createElement("li");
  newLi.contentEditable = "true";
  const checkBtn = document.createElement("button");
  const delBtn = document.createElement("button");

  checkBtn.innerHTML = '<i class="fa fa-check"></i>';
  delBtn.innerHTML = '<i class="fa fa-trash"></i>';

  if (input.value !== "") {
    newLi.textContent = input.value;
    itemsArray.push(input.value);
    localStorage.setItem("items", JSON.stringify(itemsArray));
    input.value = "";
    notCompleted.appendChild(newLi);
    newLi.appendChild(checkBtn);
    newLi.appendChild(delBtn);
  }

  checkBtn.addEventListener("click", function () {
    const parent = this.parentNode;
    parent.remove();
    Completed.appendChild(parent);
    checkBtn.style.display = "none";
    newLi.contentEditable = "false";
  });

  delBtn.addEventListener("click", function () {
    const parent = this.parentNode;
    parent.remove();
  });
}

data.forEach((item) => {
  addList(item);
});

你也可以在codesandbox中观看：
https://codesandbox.io/s/eloquent-lovelace-zm5f0

有什么想法吗？

非常感谢！

【问题讨论】：

在问题中也发布代码。
@PrerakSola 和 Patrick Evans 哦，抱歉，我现在添加了，谢谢！

标签： javascript arrays foreach local-storage

【解决方案1】：

当您添加到列表时，您只是在测试 input.value 而不是本地存储项。并且您需要测试何时是新项目或仅从本地存储中填充。看这个版本：

const input = document.querySelector("input");
const btn = document.querySelector(".addTask > button");

const data = JSON.parse(localStorage.getItem("items"));

btn.addEventListener("click", e => {
  addList(input.value, true);
});
input.addEventListener("keyup", (e) => {
  e.keyCode === 13 ? addList(input.value, true) : null;
});

data.forEach((item) => {  
  addList(item, false);
});

function addList(item, newItem) {
  if(item && item.trim() !== ""){
    const notCompleted = document.querySelector(".notCompleted");
    const Completed = document.querySelector(".Completed");

    const newLi = document.createElement("li");
    newLi.contentEditable = "true";
    const checkBtn = document.createElement("button");
    const delBtn = document.createElement("button");

    checkBtn.innerHTML = '<i class="fa fa-check"></i>';
    delBtn.innerHTML = '<i class="fa fa-trash"></i>';

    newLi.textContent = item;
    if(newItem){
      const itemsArray = JSON.parse(localStorage.getItem("items")) || [];
      itemsArray.push(item);
      localStorage.setItem("items", JSON.stringify(itemsArray));
      input.value = "";
    }
    notCompleted.appendChild(newLi);
    newLi.appendChild(checkBtn);
    newLi.appendChild(delBtn);

    checkBtn.addEventListener("click", function () {
      const parent = this.parentNode;
      parent.remove();
      Completed.appendChild(parent);
      checkBtn.style.display = "none";
      newLi.contentEditable = "false";
    });

    delBtn.addEventListener("click", function () {
      const parent = this.parentNode;
      parent.remove();
    });
  }
}

【讨论】：