I am trying to make the list stay on the page when the browser refreshes, I did ask this question before, but I am a bit confused about what exactly should I do or how should I update my code to get it right.

Here is a link to my original question original question

They mentioned a forEach loop should be used, which I have been trying but it is not working

//variable of empty array that gets new task
let taskList = [];

//function that creates new tasks with date and time

const creatTask = (task) => {
  
  const data = {
   id: createId(),
  taskNew: el.input.value,
  taskDate:el.date.value,
   taskTime: el.time.value,
}

  if (!data.taskNew) {
    alert("Please add a new Task");
  }
  if (!data.taskDate) {
    alert("Please add a new Task with a due date");
  }
  if (!data.taskTime) {
    alert("Please add a new Task with a due time");
  }

    const tasks = document.createElement("div");

    tasks.innerHTML = `
       <div class="task-content">
        <div class="task" data-id="${data.id}">
        <div class="new-task-created">${data.taskNew}</div>
        <label class="due-date">${data.taskDate}</label>
        <label class="due-time">${data.taskTime}</label>
    </div>

    <div class="atcion-buttons">
        <button onclick="editItem()" class="edit" data-id="${data.id}">Edit</button>
        <button onclick="deleteItem()" class="delete" data-id="${data.id}">Delete</button>
        <button onclick="completeItem()" class="complete" data-id="${data.id}">Complete</button>
    </div>
</div>`;


  taskList.push(data);
  el.list.appendChild(tasks);
  storeList();
};

//function that stores task list.
function storeList() {

  localStorage.setItem(STORAGE_KEY, JSON.stringify(taskList));
}