待辦清單一刷新就丟：用 Codex 理清本地儲存

待辦清單能添加、能刪除，一刷新卻全沒了，通常要先看資料是不是只放在頁面的記憶體陣列裏。

這個教學項目把任務陣列儲存為文字，再在啟動時讀回來。重點有兩個：每次修改都儲存，讀取失敗也別把整個頁面卡住。

儲存和恢復是一對動作

核心過程可以寫成下面幾行。它們只是資料流摘錄，不能代替異常處理和格式檢查：

複製const key = "codex-todo-demo-v1";
localStorage.setItem(key, JSON.stringify(tasks));
const restored = JSON.parse(localStorage.getItem(key) || "[]");

儲存時用 JSON.stringify 把陣列變成字串，恢復時用 JSON.parse 還原。但能解析不代表結構正確，{} 也是合法 JSON，卻不是任務陣列。

原項目的讀取函數還做了這些處理：

複製function loadTasks() {
  try {
    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
    if (!Array.isArray(saved)) return [];
    return saved.filter(task =>
      task &&
      typeof task.id === "string" &&
      typeof task.text === "string" &&
      task.text.trim()
    );
  } catch {
    return [];
  }
}

這是教學項目選擇的恢復策略：無法使用的資料不阻斷新增。正式產品還可以儲存損壞原文供恢復，別未經設計就把異常資料永久丟掉。

刪完也要儲存

如果只更新頁面，沒有寫回剩餘陣列，刷新後被刪除的任務會重新出現：

複製tasks = tasks.filter(task => task.id !== idToDelete);
saveTasks();
render();

saveTasks() 中同樣要捕獲寫入失敗，並提示用戶當前內容可能無法在刷新後保留。瀏覽器策略可能禁止儲存，不能把每一次 setItem 都當作必然成功。MDN：localStorage 的範圍與異常

怎樣讓 Codex 檢查到這些地方

複製檢查任務的儲存與恢復，保持現有頁面樣式。
驗證新增後刷新、刪除後刷新、損壞JSON以及模擬寫入失敗。
報告相關程式碼位置、實際檢查結果與未覆蓋部分。

原演示用主動關閉儲存的版本作教學對照：同樣添加兩項任務，刷新後對照版為空，儲存版仍有兩條。另有刪除、新頁面恢復、壞 JSON、模擬寫入失敗等檢查，共6項通過；不是線上事故記錄。

原筆記發表於2026年10月5日。本文於10月27日整理，沿用原本地 Edge 驗收記錄，沒有重新執行；未驗證跨裝置同步。演示請通過本地 HTTP 服務打開，直接雙擊 file: 頁面的儲存行為不能當成統一保證。

香港繁體版整理日期：2026年10月28日。原文引用的產品說明核對截至2026年10月27日；原實驗日期與範圍保留於文中。

查看 AI Coding 系列全部文章