How to Stop list of Items from Disappearing from page refresh, even though list is saved in local storage?

I am creating a to-do list.

The app can do the following:

• Create a task
• Render the Task
• storing the data in local storage

Need help on

When the browser refreshes, the local storage does not stay on the DOM, instead it disappears.

I created a function that creates the task and stores the new task in an object and pushes that object into an empty array.

`let taskArray = [];

let taskListEl = document.getElementById("tasklist");

function createTask() { 

/Time Stamp/ 

let currentDate = new Date();

let year = currentDate.getFullYear(); 
let month = (currentDate.getMonth() + 1).toString().padStart(2, "0"); 
let day = currentDate.getDate().toString().padStart(2, "0"); 
let hours = currentDate.getHours().toString().padStart(2, "0"); 
let minutes = currentDate.getMinutes().toString().padStart(2, "0"); 
let seconds = currentDate.getSeconds().toString().padStart(2, "0");

let timeStamp = ${year}-${month}-${day} ${hours}:${minutes}:${seconds}; let randomId = Math.round(Math.random() * parseInt(${year}${month}${day}, 10) * 100);

let taskObj = { timeStamp: timeStamp, id: randomId, task: InputTask.value, date: InputDate.value, };

taskArray.push(taskObj); 
renderTask() 
storeTaskArrayLocally();

} 

I created another function that renders the new item to the DOM

function renderTask(){
    taskListEl.innerHTML = '';
    taskArray.forEach((task) => {
        let divEl = document.createElement("div");
        divEl.classList.add("task-flex");
    
        divEl.innerHTML = `<div class="task-buttons">
            <img src="./resources/icons/edit.png" alt="Edit Buttin"/>
            <img src="./resources/icons/bin.png" alt="Bin Buttons" />
            <img src="./resources/icons/completed-task.png" alt="Complete Task Button" />
          </div>
    
          <div class="task-to-do" data-id="${task.id}" data-value = "${task.timeStamp}">
              <div class="list" id="list-item-date">Due: ${task.date}</div>
              <div class="list" id="list-item-task">${task.task}</div>
          </div>`;
    
        taskListEl.append(divEl);
        
      });
}

Because the array is taking in objects, I made sure the local storage was turning the obejcts into a JSON and then parsing the JSON.

function storeTaskArrayLocally() {   
    localStorage.setItem("taskLocalstorage", JSON.stringify(taskArray)); 
}  

function initializeTaskAraryFromLocalStoraege(){   
    const storedTask = localStorage.getItem("taskLocalstorage");    
    if(storedTask){
    taskArray.JSON.parse(storedTask);
    renderTask();
    }    

}  

initializeTaskAraryFromLocalStoraege();

I do get an error in the consol command with the taskArray.JSON.parse(storedTask); the error is as follows:

main.js:139 Uncaught TypeError: Cannot read properties of undefined (reading 'parse')
    at initializeTaskAraryFromLocalStoraege (main.js:139:22)
    at main.js:145:1