Блог

Я пытаюсь отобразить элементы моего списка, которые я перенес в локальное хранилище (например, при перезагрузке страницы).
Хранилище работает, но элементы не возвращаются из хранилища в список… Кажется, что 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

Есть идеи?

Большое спасибо!

Когда вы добавляете в список, вы тестируете только элементы input.value, а не localstorage. И вам нужно проверить, когда создается новый элемент или только заполняется из localstorage. Посмотрите эту версию:

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