即使列表保存在本地存储中，如何阻止项目列表从页面刷新中消失？

Question

我正在创建一个待办事项列表。

该应用程序可以执行以下操作：

• 创建任务
• 渲染任务
• 将数据存储在本地存储中

需要帮助

当浏览器刷新时，本地存储不会停留在 DOM 上，而是消失。

我创建了一个函数，用于创建任务并将新任务存储在一个对象中，并将该对象推送到一个空数组中。

`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();

} 

我创建了另一个将新项目渲染到 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);
        
      });
}

因为数组正在接收对象，所以我确保本地存储将对象转换为 JSON，然后解析 JSON。

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

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

}  

initializeTaskAraryFromLocalStoraege();

我确实在 consol 命令中遇到错误，并带有

taskArray.JSON.parse(storedTask);

，错误如下：

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

Answer 1

问题已解决。

问题是

taskArray.JSON.parse(storedTask);

，已更改为

taskArray = JSON.parse(storedTask);

function initializeTaskAraryFromLocalStoraege(){
  const storedTask = localStorage.getItem("taskLocalstorage");

  if(storedTask){
      taskArray = JSON.parse(storedTask);
      renderTask();
  }
  
}