零基礎前端課程

CHAPTER 26 · 180 MINUTES

TODO A：CRUD、render、localStorage

把 TODO 當成一箱有編號的便條：先改資料、保存整箱，再由 render 依資料重畫畫面。

3個明確任務
1個資料來源
1次重整驗收

LEARNING GOALS

本章結束時，你能做出什麼

01

新增唯一項目

輸入文字後建立含唯一 id、text、done 的 TODO。

02

切換完成狀態

依 id 找到資料，改 done、保存並重畫。

03

刪除且不復活

刪除後重新整理，localStorage 仍維持最新狀態。

進場檢核與作品接力

  • 具備第 25 章成果：完成明確標示非真實登入的 Auth 與權限概念模擬：不看答案，展示或口述第 25 章成果，並說出一項可見證據。 需要補強時從這裡接回
  • 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
  • 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回

輸入：第 25 章產物：完成明確標示非真實登入的 Auth 與權限概念模擬

本章輸出：完成可新增、切換與刪除且能保存的本機待辦事項 App

產物類型：mainline；後續用途：第 27 章、第 28 章

PROBLEM & ANALOGY

畫面不是資料本身

第 25 章用 uid 辨認資料；本章用唯一 id 找到每張便條。DOM 像展示櫃，todos 陣列才是本頁資料，localStorage 是留在這台瀏覽器的收納箱。

本章要解決：只改 DOM 會在 render 後消失，只改陣列不 save 會在重新整理後復活。

合回共同作品：TODO A 是第 27 章同步佇列的本機可靠基礎。

把名詞對回畫面與程式

todos
目前待辦資料的陣列狀態。
唯一 id
找到一筆 TODO 的穩定識別，不用陣列索引代替。
render
只根據 todos 產生目前畫面。
save / load
把資料寫入與從 localStorage 讀回。
localStorage
目前瀏覽器與裝置的本機保存，不是雲端同步。

SCOPE

今天的學習邊界

必會

能自己完成

CRUD、唯一 id、陣列 state、render、save/load 與 localStorage。

辨識

看得懂即可

JSON stringify／parse 是資料進出 localStorage 的轉換。

不教

刻意延後

雲端同步、多人衝突、資料庫 schema 與離線優先架構。

CORE IDEAS

資料先改，畫面後畫

  1. 每筆 TODO 使用穩定唯一 id，不用陣列索引當長期身份。
  2. 新增、切換、刪除都先產生新資料狀態，再 save，再 render。
  3. render 只根據 todos 畫畫面，不暗中改 todos。
  4. localStorage 只存在目前瀏覽器與裝置，不是帳號或雲端同步。
  5. 真正的保存驗收一定包含重新整理頁面。

DEBUGGING

看資料、保存內容，再看畫面

課堂刻意錯誤：建立重複 id；或 filter 後只 render 沒 save，讓刪除項目重新整理後復活。

  1. 確認事件取得的目標 id 與 todos 內 id 型別一致。
  2. 檢查 map／filter 後的新陣列是否正確。
  3. 到 Application 面板查看 localStorage 實際保存內容。
  4. 確認 save 在 render 前後都不遺漏，且 load 能處理空資料。
  5. 重新整理再操作同一筆，不能只看當下畫面。
症狀 01

畫面改了但重整復活

先查：查是否只 render 沒 save，並看 Application 內容。

症狀 02

切錯另一筆 TODO

先查：確認事件 id 與資料內 id 型別一致。

症狀 03

刪除後清單怪怪的

先查：檢查 filter 新陣列、save 時機與 render 責任。

PRACTICE CONTRACT

Starter 到 Solution 共用同一份 todos 狀態

開始前先確認這四件事

  • 我先找到 todos、render、save、load。
  • 每筆資料都有唯一 id，不用索引當身份。
  • 新增、切換、刪除遵循資料 → save → render。
  • 我會重新整理後確認刪除不復活。
TASK-01

新增並安全顯示待辦事項

檔案：script.js

位置：loadTodos()、addTodo()、createTodoElement()、render()

結果：新增唯一 id 項目，輸入只會成為文字節點

TASK-02

切換完成狀態

檔案：script.js

位置：toggleTodo()

結果：點擊完成可切換 done 並保存

TASK-03

刪除並保存待辦事項

檔案：script.js

位置：removeTodo()

結果：刪除後重整頁面不會復活

  1. 先讀任務 Starter 清單、資料與函式骨架。 累積完成 0／3 個任務 開始練習
  2. 完成第一項 Checkpoint 1 完成 TASK-01。 累積完成 1／3 個任務 繼續第一步
  3. 累積第二項 Checkpoint 2 再完成 TASK-02。 累積完成 2／3 個任務 繼續第二步
  4. 核對完成品 Solution 只補 TASK-03，完整重整驗收。 累積完成 3／3 個任務 查看完整結果

網頁版答案位置對照卡住時先完成 Checkpoint 2，再查看每個 TASK 對應的檔案與位置。

EVIDENCE

成果證據與檢核

30 秒說法可以直接照這個句型練習：

這筆 TODO 的 id 是 ______；我先改 ______，再由 ______ 保存，最後由 ______ 畫回。

localStorage 只證明本機保存；不要把它描述成帳號同步、Firebase 或 GAS。

新增兩筆、切換其中一筆、刪除另一筆，再重新整理；截圖需同時看到清單與 Application 面板保存內容。

交件前自我檢核 4 項 · 點選每一列完成自評

下一章：把每次本機變更放入待同步 queue，練習失敗保留與重試。

下一步：前往第 27 章「TODO B：Mock 同步、失敗復原與 GAS 延伸」，帶著本章輸出繼續累積作品。