昨天完成了基本功能，但是大家注意刷新之后，內(nèi)容都沒有了。

今天我們就來解決這個刷新之后內(nèi)容消失的問題。

而解決這個問題的方案，就是使用本地存儲。

?

在使用了本地存儲之后，注意在刷新操作下，內(nèi)容依然還顯示在頁面上。

數(shù)據(jù)的操作

在引入存儲之后，任務就變成了要保存的數(shù)據(jù)。

保存的數(shù)據(jù)又要拿來使用，就會有獲取數(shù)據(jù)的操作。

而刪除任務操作則會刪除數(shù)據(jù)。

總結下來，在這個項目里，數(shù)據(jù)需要處理三種操作：保存（添加）、讀取和刪除。

它們發(fā)生的時間點分別在點擊創(chuàng)建、任務列表加載和點擊刪除按鈕。

為了代碼的易讀和維護，我們對原來的addTask函數(shù)做一個調(diào)整，先從中抽出一個函數(shù)addTaskToDOM，用于處理把任務添加到列表元素里。

同時添加以下兩個函數(shù)處理數(shù)據(jù)的保存和獲取:

• saveTasks：把任務數(shù)據(jù)保存到本地存儲里。

• loadTasks: 從本地存儲里讀取任務數(shù)據(jù) 。

至于刪除，大家要注意，它是在動態(tài)生成的 DOM 元素里的按鈕，這一部分的邏輯代碼在 addTaskToDOM里。

保存數(shù)據(jù)

function saveTasks() {   const tasks = [];   document.querySelectorAll('.task').forEach((task) => {     tasks.push({       text: task.firstChild.textContent,       completed: task.classList.contains('completed'),     });   });   localStorage.setItem('tasks', JSON.stringify(tasks)); } 

定義任務列表為數(shù)組，通過querySelectorAll讀取所有 CSS 類為.task 的元素，所以把數(shù)據(jù) push 到數(shù)組。

最后通過JSON.stringify()方法，把數(shù)組轉(zhuǎn)成 JSON 格式的字符串，存儲到本地存儲，存儲 key 為 tasks。

 function addTaskToDOM(taskText, completed = false) {   // 1. 創(chuàng)建新的任務項   const newTask = document.createElement('li');   newTask.className = 'task';   if (completed) {     newTask.classList.add('completed');   }   newTask.textContent = taskText;    // 2. 添加完成按鈕   const completeBtn = document.createElement('button');   completeBtn.textContent = '完成';   completeBtn.className = 'complete-btn';   completeBtn.addEventListener('click', () => {     newTask.classList.toggle('completed');     saveTasks();   });    // 3. 添加刪除按鈕   const deleteBtn = document.createElement('button');   deleteBtn.textContent = '刪除';   deleteBtn.className = 'delete-btn';   deleteBtn.addEventListener('click', () => {     taskList.removeChild(newTask);     saveTasks();   });    newTask.appendChild(completeBtn);   newTask.appendChild(deleteBtn);    // 將新任務項添加到任務列表中   taskList.appendChild(newTask);    // 清空輸入框   taskInput.value = ''; } 

大家注意這一段抽出來的代碼和之前不同之處，在于在完成和刪除按鈕的事件里，都調(diào)用了剛才實現(xiàn)的saveTasks()方法。

function addTask() {   const taskText = taskInput.value;   if (taskText === '') {     alert('任務不能為空');     return;   }   addTaskToDOM(taskText);   saveTasks(); } 

原來的 addTask 方法則重構成上面這個樣子。

讀取數(shù)據(jù)

加載任務數(shù)據(jù)的方法，則比較簡單，只需要把數(shù)據(jù)從本地存儲讀取出來。

注意它是 JSON 格式的字符串，通過使用JSON.parse()方法把它轉(zhuǎn)成對象。

由于它是數(shù)組，則可以使用遍歷方法forEach()對它進行遍歷后逐個加載到 DOM 里。

此時就知道為什么要抽出方法 addTaskToDOM()了，因為這里要復用它。

function loadTasks() {   const tasks = JSON.parse(localStorage.getItem('tasks')) || [];   tasks.forEach((task) => {     addTaskToDOM(task.text, task.completed);   }); } 

讀取數(shù)據(jù)，需要發(fā)生在頁面加載的時候，只需要監(jiān)聽DOMContentLoaded事件。

document.addEventListener('DOMContentLoaded', loadTasks); 

總結

完整代碼如下：

// 獲取DOM元素 const taskList = document.getElementById('task-list'); const taskInput = document.getElementById('task-input'); const addTaskBtn = document.getElementById('add-task-btn');  // 從localStorage加載任務 document.addEventListener('DOMContentLoaded', loadTasks);  function loadTasks() {   const tasks = JSON.parse(localStorage.getItem('tasks')) || [];   tasks.forEach((task) => {     addTaskToDOM(task.text, task.completed);   }); }  function saveTasks() {   const tasks = [];   document.querySelectorAll('.task').forEach((task) => {     tasks.push({       text: task.firstChild.textContent,       completed: task.classList.contains('completed'),     });   });   localStorage.setItem('tasks', JSON.stringify(tasks)); }  // 添加任務函數(shù) function addTask() {   const taskText = taskInput.value;   if (taskText === '') {     alert('任務不能為空');     return;   }   addTaskToDOM(taskText);   saveTasks(); }  function addTaskToDOM(taskText, completed = false) {   // 1. 創(chuàng)建新的任務項   const newTask = document.createElement('li');   newTask.className = 'task';   if (completed) {     newTask.classList.add('completed');   }   newTask.textContent = taskText;    // 2. 添加完成按鈕   const completeBtn = document.createElement('button');   completeBtn.textContent = '完成';   completeBtn.className = 'complete-btn';   completeBtn.addEventListener('click', () => {     newTask.classList.toggle('completed');     saveTasks();   });    // 3. 添加刪除按鈕   const deleteBtn = document.createElement('button');   deleteBtn.textContent = '刪除';   deleteBtn.className = 'delete-btn';   deleteBtn.addEventListener('click', () => {     taskList.removeChild(newTask);     saveTasks();   });    newTask.appendChild(completeBtn);   newTask.appendChild(deleteBtn);    // 將新任務項添加到任務列表中   taskList.appendChild(newTask);    // 清空輸入框   taskInput.value = ''; }  // 綁定事件監(jiān)聽器 addTaskBtn.addEventListener('click', addTask);  

今天是堆積代碼的一天，希望你看得快樂！