AI 编程与开发

待办清单一刷新就丢：用 Codex 理清本地保存

待办清单能添加、能删除，一刷新却全没了，通常要先看数据是不是只放在页面的内存数组里。

这个教学项目把任务数组保存为文本，再在启动时读回来。重点有两个：每次修改都保存，读取失败也别把整个页面卡住。

保存和恢复是一对动作

核心过程可以写成下面几行。它们只是数据流摘录，不能代替异常处理和格式检查：

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

保存时用 JSON.stringify 把数组变成字符串，恢复时用 JSON.parse 还原。但能解析不代表结构正确，{} 也是合法 JSON，却不是任务数组。

原项目的读取函数还做了这些处理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 [];
  }
}

这是教学项目选择的恢复策略：无法使用的数据不阻断新增。正式产品还可以保存损坏原文供恢复，别未经设计就把异常数据永久丢掉。

删完也要保存

如果只更新页面，没有写回剩余数组，刷新后被删除的任务会重新出现：

1
2
3
tasks = tasks.filter(task => task.id !== idToDelete);
saveTasks();
render();

saveTasks() 中同样要捕获写入失败，并提示用户当前内容可能无法在刷新后保留。浏览器策略可能禁止存储，不能把每一次 setItem 都当作必然成功。MDN：localStorage 的范围与异常

怎样让 Codex 检查到这些地方

1
2
3
检查任务的保存与恢复，保持现有页面样式。
验证新增后刷新、删除后刷新、损坏JSON以及模拟写入失败。
报告相关代码位置、实际检查结果与未覆盖部分。

原演示用主动关闭保存的版本作教学对照：同样添加两条任务，刷新后对照版为空，保存版仍有两条。另有删除、新页面恢复、坏 JSON、模拟写入失败等检查，共6项通过；不是线上事故记录。

原笔记发表于2026年10月5日。本文于10月27日整理，沿用原本地 Edge 验收记录，没有重跑；未验证跨设备同步。演示请通过本地 HTTP 服务打开，直接双击 file: 页面的存储行为不能当成统一保证。

本文发表日期：