Local storage in JS not loading items problem

Question

I have a problem with the local storage it seems the items are getting saved to local storage but I cannot make it work to load at start.

Any tips and advice much appreciated.

I am posting the code below.

const input = document.getElementById('input');
const list = document.getElementById('list');
const addButton = document.getElementById('addButton');
const completed = document.getElementById("completed");

let LIST;
let id;

let loadSTORAGE = localStorage.getItem("STORAGE");

if (loadSTORAGE) {
  LIST = JSON.parse(loadSTORAGE);
  id = LIST.length;
  loadList(LIST);
} else {

  LIST = [];
  id = 0;
}

function loadList() {
  LIST.forEach(function() {
    addTask();
  });
}


addButton.addEventListener("click", addTask);

input.addEventListener("keyup", function(event) {
  (event.keyCode === 13 ? addTask() : null)

})



function addTask() {
  const newTask = document.createElement("li");
  const delBtn = document.createElement("button");
  const checkBtn = document.createElement("button");

  delBtn.innerHTML = "<button>Reset</button>"
  checkBtn.innerHTML = "<button>Done</button>"
  if (input.value !== "") {
    newTask.textContent = input.value;

    list.appendChild(newTask);
    newTask.appendChild(checkBtn);
    newTask.appendChild(delBtn);
    LIST.push({
      name: input.value,
      id: id,

    });


    id++
    input.value = "";
    console.log(LIST);
    localStorage.setItem("STORAGE", JSON.stringify(LIST));
  }
  checkBtn.addEventListener("click", function() {
    const parent = this.parentNode
    parent.remove();
    completed.appendChild(parent);


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

  });


}

Answer 1

You need to break out the logic of building the item and getting the value. Something like the following where the addTask just makes sure there is input and calls a method that builds an item. Now with the localstorage call, you can call just the code that builds the item.

const input = document.getElementById('input');
const list = document.getElementById('list');
const addButton = document.getElementById('addButton');
const completed = document.getElementById("completed");

const loadSTORAGE = localStorage.getItem("STORAGE");
const LIST = loadSTORAGE ? JSON.parse(loadSTORAGE) : [];
let id = LIST.length;
loadList(LIST);

function loadList() {
  LIST.forEach(function(data) {
    addTaskElement(data);
  });
}

function addTask() {
  if (input.value !== "") {
    cons newItem = {
      name: input.value,
      id: id,
    };
    LIST.push(newItem);
    id++;
    localStorage.setItem("STORAGE", JSON.stringify(LIST));
    input.value = "";
    addTaskElement(newItem);
  }
}

function addTaskElement(data) {
  const newTask = document.createElement("li");
  const delBtn = document.createElement("button");
  const checkBtn = document.createElement("button");

  delBtn.textContent = "Reset"
  checkBtn.textContent = "Done"
  newTask.textContent = data.name;

  newTask.appendChild(checkBtn);
  newTask.appendChild(delBtn);
  list.appendChild(newTask);
}