新增唯一項目
輸入文字後建立含唯一 id、text、done 的 TODO。
CHAPTER 26 · 180 MINUTES
TODO A：CRUD、render、localStorage
把 TODO 當成一箱有編號的便條：先改資料、保存整箱，再由 render 依資料重畫畫面。
3個明確任務
1個資料來源
1次重整驗收
LEARNING GOALS
本章結束時，你能做出什麼
切換完成狀態
依 id 找到資料，改 done、保存並重畫。
刪除且不復活
刪除後重新整理，localStorage 仍維持最新狀態。
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
資料先改，畫面後畫
- 每筆 TODO 使用穩定唯一 id，不用陣列索引當長期身份。
- 新增、切換、刪除都先產生新資料狀態，再 save，再 render。
- render 只根據 todos 畫畫面，不暗中改 todos。
- localStorage 只存在目前瀏覽器與裝置，不是帳號或雲端同步。
- 真正的保存驗收一定包含重新整理頁面。
DEBUGGING
看資料、保存內容，再看畫面
課堂刻意錯誤：建立重複 id；或 filter 後只 render 沒 save，讓刪除項目重新整理後復活。
- 確認事件取得的目標 id 與 todos 內 id 型別一致。
- 檢查 map／filter 後的新陣列是否正確。
- 到 Application 面板查看 localStorage 實際保存內容。
- 確認 save 在 render 前後都不遺漏，且 load 能處理空資料。
- 重新整理再操作同一筆，不能只看當下畫面。
畫面改了但重整復活
先查：查是否只 render 沒 save，並看 Application 內容。
切錯另一筆 TODO
先查：確認事件 id 與資料內 id 型別一致。
刪除後清單怪怪的
先查：檢查 filter 新陣列、save 時機與 render 責任。
PRACTICE CONTRACT
Starter 到 Solution 共用同一份 todos 狀態
開始前先確認這四件事
- 我先找到 todos、render、save、load。
- 每筆資料都有唯一 id，不用索引當身份。
- 新增、切換、刪除遵循資料 → save → render。
- 我會重新整理後確認刪除不復活。
新增並安全顯示待辦事項
檔案：script.js
位置：loadTodos()、addTodo()、createTodoElement()、render()
結果：新增唯一 id 項目，輸入只會成為文字節點
切換完成狀態
檔案：script.js
位置：toggleTodo()
結果：點擊完成可切換 done 並保存
刪除並保存待辦事項
檔案：script.js
位置：removeTodo()
結果：刪除後重整頁面不會復活
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
這筆 TODO 的 id 是 ______；我先改 ______，再由 ______ 保存，最後由 ______ 畫回。
localStorage 只證明本機保存；不要把它描述成帳號同步、Firebase 或 GAS。
新增兩筆、切換其中一筆、刪除另一筆，再重新整理；截圖需同時看到清單與 Application 面板保存內容。
下一章：把每次本機變更放入待同步 queue，練習失敗保留與重試。