4.4.3 测试数据持久化
本步目标：通过多种场景验证数据存储功能是否完善
在 4.4.2 中，我们已经初步验证了刷新后数据还在。本节进行更全面的测试，确保各种情况下数据都能正确保存。
五步验证法
按照以下步骤，系统性地测试数据持久化功能：
步骤 1：准备测试数据
- 如果当前有任务，先全部删除（从一个干净的状态开始）
- 添加 3 个任务：
- "学习 Vibe Coding"
- "完成待办清单项目"
- "庆祝一下"
步骤 2：修改任务状态
- 将 "学习 Vibe Coding" 标记为已完成
- 确认它有视觉变化（删除线或变灰）
步骤 3：刷新页面测试
- 按 F5 或 Ctrl+R（Mac: Cmd+R）刷新页面
- 检查结果：
| 检查项 | 预期结果 |
|---|---|
| 任务数量 | 3 个 |
| "学习 Vibe Coding" | 仍然是已完成状态 |
| 其他两个任务 | 仍然是未完成状态 |
步骤 4：关闭标签页测试
这是更严格的测试：
- 完全关闭当前浏览器标签页
- 重新打开 HTML 文件（或重新访问网址）
- 检查结果：任务列表应该和关闭前一样
步骤 5：删除操作测试
- 删除 "庆祝一下" 这个任务
- 刷新页面
- 检查结果：应该只剩 2 个任务，"庆祝一下" 不应该回来
如何查看 localStorage 中的原始数据
有时候需要直接查看存储的数据内容，可以这样操作：
- 按 F12 打开开发者工具
- 点击 Application 标签
- 展开左侧的 Storage > Local Storage
- 点击你的网页地址（如
file://或localhost） - 在右侧找到 Key 为
todoList的那一行 - 双击 Value 列可以查看完整内容
正确的数据格式示例：
json
[
{"text": "学习 Vibe Coding", "completed": true},
{"text": "完成待办清单项目", "completed": false}
]提示
如果你的数据格式和上面不完全一样也没关系，只要包含任务内容和完成状态两个信息即可。不同的 AI 可能会使用不同的属性名（如 content 代替 text，done 代替 completed）。
测试检查清单
完成所有测试后，确认以下项目都通过：
- [ ] 添加任务后，刷新页面任务还在
- [ ] 删除任务后，刷新页面任务不会回来
- [ ] 标记完成后，刷新页面完成状态保留
- [ ] 取消完成后，刷新页面状态正确更新
- [ ] 关闭标签页再打开，数据完整保留
- [ ] 在开发者工具中能看到
todoList数据
常见问题排查
问题 1：刷新后所有任务消失
| 可能原因 | 排查方法 |
|---|---|
| 保存逻辑没执行 | 检查开发者工具中有没有 todoList |
| 读取逻辑没执行 | 有 todoList 但页面空白 |
| 数据格式错误 | todoList 值是乱码或 undefined |
通用修复 Prompt：
刷新页面后任务都消失了。
我在开发者工具的 Local Storage 中 [能看到/看不到] todoList 数据。
请帮我检查保存和读取逻辑，确保：
1. 每次任务变化都会保存到 localStorage
2. 页面加载时会读取并显示保存的数据
给我修复后的完整代码。问题 2：任务内容在，但完成状态丢失
可能原因：保存时没有包含 completed 状态。
修复 Prompt：
刷新页面后任务内容还在，但所有任务都变成未完成状态了。
请检查保存逻辑，确保每个任务对象都包含完成状态（completed 或 done 属性）。
给我修复后的完整代码。问题 3：删除的任务刷新后又回来了
可能原因：删除操作后没有更新 localStorage。
修复 Prompt：
我删除了一个任务，但刷新页面后它又出现了。
请确保删除任务后会立即更新 localStorage 中的数据。
给我修复后的完整代码。问题 4：控制台报错 JSON 相关错误
常见报错如：
SyntaxError: Unexpected tokenJSON.parse: unexpected character
修复 Prompt：
控制台报错：[粘贴具体报错信息]
这似乎是 JSON 解析相关的问题。
请检查 localStorage 数据的保存和读取逻辑，确保格式正确。
给我修复后的完整代码。本节检查点
在继续之前，确认：
- [ ] 完成了五步验证法的所有测试
- [ ] 所有测试场景都通过
- [ ] 没有控制台报错
全部通过后，进入最后的完整功能验证。