Question

我正在尝试显示已转移到本地存储的列表元素（例如，当我重新加载页面时）。
存储可以工作，但是项目不会从存储返回到列表中。似乎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);
});

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

有什么主意吗？

非常感谢！

Answer 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();
    });
  }
}

无法再次从语言环境存储中获取数据

1 个答案: