来源：https://github.com/datawhalechina/vibe-vibe

本步目标：通过多种场景验证数据存储功能是否完善

在 4.4.2 中，我们已经初步验证了刷新后数据还在。本节进行更全面的测试，确保各种情况下数据都能正确保存。

五步验证法

按照以下步骤，系统性地测试数据持久化功能：

步骤 1：准备测试数据

1. 如果当前有任务，先全部删除（从一个干净的状态开始）
2. 添加 3 个任务：
   • "学习 Vibe Coding"
   • "完成待办清单项目"
   • "庆祝一下"

步骤 2：修改任务状态

1. 将 "学习 Vibe Coding" 标记为已完成
2. 确认它有视觉变化（删除线或变灰）

步骤 3：刷新页面测试

1. 按 F5 或 Ctrl+R（Mac: Cmd+R）刷新页面
2. 检查结果：

步骤 4：关闭标签页测试

这是更严格的测试：

1. 完全关闭当前浏览器标签页
2. 重新打开 HTML 文件（或重新访问网址）
3. 检查结果：任务列表应该和关闭前一样

步骤 5：删除操作测试

1. 删除 "庆祝一下" 这个任务
2. 刷新页面
3. 检查结果：应该只剩 2 个任务，"庆祝一下" 不应该回来

如何查看 localStorage 中的原始数据

有时候需要直接查看存储的数据内容，可以这样操作：

1. 按 F12 打开开发者工具
2. 点击 Application 标签
3. 展开左侧的 Storage > Local Storage
4. 点击你的网页地址（如 file:// 或 localhost）
5. 在右侧找到 Key 为 todoList 的那一行
6. 双击 Value 列可以查看完整内容

正确的数据格式示例：

[
  {"text": "学习 Vibe Coding", "completed": true},
  {"text": "完成待办清单项目", "completed": false}
]

测试检查清单

完成所有测试后，确认以下项目都通过：

添加任务后，刷新页面任务还在
删除任务后，刷新页面任务不会回来
标记完成后，刷新页面完成状态保留
取消完成后，刷新页面状态正确更新
关闭标签页再打开，数据完整保留
在开发者工具中能看到 todoList 数据

常见问题排查

问题 1：刷新后所有任务消失

通用修复 Prompt：

刷新页面后任务都消失了。
我在开发者工具的 Local Storage 中 [能看到/看不到] todoList 数据。
请帮我检查保存和读取逻辑，确保：
1. 每次任务变化都会保存到 localStorage
2. 页面加载时会读取并显示保存的数据
给我修复后的完整代码。

问题 2：任务内容在，但完成状态丢失

可能原因：保存时没有包含 completed 状态。

修复 Prompt：

刷新页面后任务内容还在，但所有任务都变成未完成状态了。
请检查保存逻辑，确保每个任务对象都包含完成状态（completed 或 done 属性）。
给我修复后的完整代码。

问题 3：删除的任务刷新后又回来了

可能原因：删除操作后没有更新 localStorage。

修复 Prompt：

我删除了一个任务，但刷新页面后它又出现了。
请确保删除任务后会立即更新 localStorage 中的数据。
给我修复后的完整代码。

问题 4：控制台报错 JSON 相关错误

常见报错如：

• SyntaxError: Unexpected token
• JSON.parse: unexpected character

修复 Prompt：

控制台报错：[粘贴具体报错信息]
这似乎是 JSON 解析相关的问题。
请检查 localStorage 数据的保存和读取逻辑，确保格式正确。
给我修复后的完整代码。

本节检查点

在继续之前，确认：

完成了五步验证法的所有测试
所有测试场景都通过
没有控制台报错

全部通过后，进入最后的完整功能验证。

→ 4.4.4 完整功能验证