CHAPTER 26 · PRACTICE WORKSPACE

TODO A：CRUD、render、localStorage

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

03 Checkpoint 2 2/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01已完成

新增並安全顯示待辦事項

修改檔案：script.js

完成後看見：新增唯一 id 項目，輸入只會成為文字節點

TASK-02已完成

切換完成狀態

修改檔案：script.js

完成後看見：點擊完成可切換 done 並保存

TASK-03本階段處理

刪除並保存待辦事項

修改檔案：script.js、index.html

完成後看見：刪除後重整頁面不會復活

WORKSPACE

本階段實作區

已完成 TASK-02；先核對可見結果，再前往 TASK-03。

FOCUS TASK · TASK-03

現在只處理：刪除並保存待辦事項

修改：script.js、index.html

完成後：刪除後重整頁面不會復活

講解時展開：2 個小型比較

remove vs filter｜刪除資料與畫面同步

比較：刪除要從資料集合移除，再重新 render；只隱藏 DOM 會讓項目重新出現。

現在做：在 Solution 清除 course-todos 後新增「保留」與「刪除」，記下兩個 id；只刪除第二筆，確認清單剩「保留」、storage 只剩保留的 id，再重新整理確認仍只有 1 筆。

看預期與證據

預期：remove 會從 todos 與 storage 移除指定 id，再 render；其他資料不受影響。

證據：留下刪除前後兩個 id、清單剩餘文字、storage 陣列長度 1 與重整後結果。

刪除後重整｜驗收不復活

比較：真正完成刪除要通過重新整理測試，確認 localStorage 沒有留下舊資料。

現在做：在 Solution 新增「會被刪除」，按刪除後檢查 course-todos 為空陣列 []、summary=「共 0 筆」，再重新整理確認清單仍空且不復活。

看預期與證據

預期：刪除不只是移除 DOM；資料、storage、summary 與重新整理後畫面都維持 0 筆。

證據：留下刪除後 storage=[]、summary=「共 0 筆」、清單 0 筆與重整後 0 筆四項證據。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 2 將一筆待辦切為完成並重整確認狀態保留，再按另一筆的刪除鍵，觀察項目仍留在清單。
  2. B｜預測：刪除一筆待辦事項後重新整理，確認被刪項目不會復活。
  3. C｜實作：在 script.js、index.html 的 removeTodo()、#task-list 完成「刪除並保存待辦事項」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 removeTodo()、#task-list 與 script.js、index.html，最後重跑原操作。
  5. E｜驗收：刪除後重整頁面不會復活

完成條件：DONE-03：刪除後重整頁面不會復活

我的待辦事項

    CONTINUE

    繼續完成 TASK-03

    前往 Solution，依要求完成「刪除並保存待辦事項」。

    前往 Solution：完成 TASK-03

    CHAPTER HANDOFF

    從本機 CRUD，交棒到可復原的同步佇列

    接收第 25 章：沿用 owner／guest／unauth 的資料責任觀念；本章不共用 Auth runtime，改把「誰擁有資料」轉成每筆項目的唯一 id 與本機保存。

    交給第 27 章：完成後帶著 create、toggle、remove、safe render、`course-todos` 重整證據；下一章直接加入 queue、mock sender、offline 保留與 retry，不把 localStorage 說成同步。

    前往第 27 章：Mock 同步、失敗復原與 GAS 延伸