課程目的:

這次的內容為簡單的待辦事項列表 (to-do list) 應用，並使用 localStorage 來儲存數據。

作品實做

本次功能實作重點：

• 選取 HTML 元素
• 新增待辦事項功能
• 渲染待辦事項到頁面
• 切換待辦事項完成狀態
• 每次初始化頁面時自動渲染已經儲存的資料

選取 HTML 元素

     const addItems = document.querySelector(".add-items");
     const itemsList = document.querySelector(".plates");
     const items = JSON.parse(localStorage.getItem("items")) || [];
     
     addItems.addEventListener("submit", addItem);
     itemsList.addEventListener("click", toggleItem);

addItems 選取接受輸入值的form表

itemsList 選取待辦事項的顯示列表

items 從 localStorage 讀取已儲存的待辦事項，若無則使用空陣列

新增待辦事項功能

 function addItem(e) {
        e.preventDefault(); //防止表單的默認提交行為
        let text = this.querySelector("[name=item]").value; //選取 input的值
        items.push({ text, done: false }); 
        localStorage.setItem("items", JSON.stringify(items)); 
        createList(items, itemsList);
        this.reset();
      }

items.push({ text, done: false }) 將變數text以及設定屬性done:false 放入items

localStorage.setItem("items", JSON.stringify(items)); 設定localStorage key名稱為”items”，key值是JSON.stringify(items)

createList(items, itemsList); 為我們等等要渲染list畫面的函式

this.reset(); 用於重置表單內容，讓輸入框清空

渲染待辦事項到頁面

  function createList(plates = [], platesList) {
        platesList.innerHTML = plates
          .map((plate, i) => {
            return `
              <li>
                <input type="checkbox" data-index=${i} id="item${i}" ${
              plate.done ? "checked" : "" //如果是done狀態則打勾
            } />
                <label for="item${i}">${plate.text}</label>
              </li>
            `;
          })
          .join("");
      }

plates.map 利用map來閱歷plates.map 的每個元素，並return相應的Html結構
若plate.done為（done: true），則 checkbox 會顯示勾選狀態。

切換待辦事項完成狀態

 function toggleItem(e) {
        //避免重複觸發
        if (!e.target.matches("input")) return;
        let index = e.target.dataset["index"];
        items[index].done = !items[index].done;
        localStorage.setItem("items", JSON.stringify(items));//更新localStorag資料
        createList(items, itemsList); //更新畫面
      }

if (!e.target.matches("input")) 判斷e.target 是否為一個input元素，如果不是則跳出

index 賦值e.target屬性名稱為data-index的值

items[index].done = !items[index].done; 紀錄checkBox是否check的開關

每次初始化頁面時自動渲染已經儲存的資料

populateList(items, itemsList); 

當頁面重新加載時，會將localStorage儲存的待辦事項顯示出來

導讀文件以及學習資源

JS30
[ Alex 宅幹嘛 ] 👨‍💻 深入淺出 Javascript30 快速導覽 | Day 15：LocalStorage