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

本步目标：让 AI 帮我们实现数据的自动保存和读取

本节是数据存储的核心实现。我们会分两步完成：先实现「保存」，再实现「读取」。

技术小贴士：理解 localStorage

在开始之前，用一个生活类比帮你建立直觉：

就像快递柜一样，localStorage 可以帮你"寄存"数据，下次来还能取回来。

步骤 1：添加保存和读取功能

我们用一个完整的 Prompt，让 AI 同时实现保存和读取逻辑。

完整 Prompt

复制下面的 Prompt，发送给你的 AI IDE：

【背景】
我有一个待办清单网页，目前已经实现了添加、删除、标记完成的功能。
但刷新页面后，所有任务都会消失。
我需要添加数据持久化功能，让任务能够保存下来。

【当前任务】
请帮我实现 localStorage 数据存储功能：

1. 保存功能：
   - 每当任务列表发生变化（添加、删除、完成状态改变）时
   - 自动将当前任务列表保存到 localStorage
   - 使用 "todoList" 作为存储的 key 名

2. 读取功能：
   - 页面加载时，自动从 localStorage 读取之前保存的任务
   - 如果有保存的数据，用它来初始化任务列表
   - 如果没有保存的数据（第一次使用），显示空列表

3. 数据格式：
   - 每个任务需要保存：任务内容、完成状态
   - 使用 JSON 格式存储

【技术要求】
- 使用原生 JavaScript
- 关键逻辑添加中文注释
- 确保保存和读取的数据格式一致

【我是初学者】
请保持代码简洁易懂，并解释关键的保存/读取逻辑。

预期结果

发送 Prompt 后，AI 会更新你的代码。替换文件内容后：

1. 表面上看起来没变化 - 页面还是和之前一样
2. 但数据已经在自动保存了 - 每次操作都会触发保存

如何确认保存生效？

用浏览器开发者工具查看：

1. 按 F12 打开开发者工具
2. 点击顶部的 Application（应用程序）标签
3. 在左侧找到 Storage > Local Storage
4. 点击你的网页地址
5. 你应该能看到一条 key 为 todoList 的数据

检查点

在继续之前，确认以下几点：

代码更新后，页面能正常显示
添加一个任务，开发者工具中能看到 todoList 数据
再添加一个任务，todoList 的值会更新
标记一个任务为完成，todoList 的值会更新
删除一个任务，todoList 的值会更新

常见问题排查

问题 1：开发者工具中看不到 Local Storage

可能原因：你可能打开的是 Console 或其他标签页。

解决方法：

• 确保点击的是 Application 标签（不是 Elements、Console 等）
• 如果找不到 Application，试试点击 >> 展开更多标签

问题 2：Local Storage 中没有 todoList

可能原因：保存逻辑没有正确执行。

修复 Prompt：

我按照你的代码修改了，但是在浏览器的 Local Storage 中看不到 todoList 数据。
请检查保存逻辑，确保每次任务变化时都会调用 localStorage.setItem。
给我检查后的完整代码。

问题 3：todoList 的值是 undefined 或 [object Object]

可能原因：数据没有正确转换为 JSON 字符串。

修复 Prompt：

Local Storage 中的 todoList 值显示为 [object Object] 或 undefined。
请确保保存时使用 JSON.stringify 转换数据，读取时使用 JSON.parse 解析数据。
给我修复后的完整代码。

问题 4：页面报错，功能不正常

排查步骤：

1. 按 F12 打开开发者工具
2. 点击 Console 标签
3. 查看红色的报错信息

修复 Prompt：

更新代码后页面报错了。
控制台报错信息：[粘贴你看到的红色报错内容]
请帮我修复这个问题。

步骤 2：验证刷新后数据恢复

保存功能确认正常后，现在验证最关键的部分——刷新页面后数据是否还在。

验证流程

1. 确保当前有 1-2 个任务（如果没有，先添加几个）
2. 标记其中一个为已完成
3. 刷新页面（按 F5 或点击浏览器刷新按钮）
4. 检查结果

预期结果

如果刷新后数据丢失

可能原因：读取逻辑没有正确执行。

修复 Prompt：

保存功能正常（我能在 Local Storage 中看到数据），
但刷新页面后，任务列表变空了，没有从 localStorage 读取数据。

请检查页面加载时的读取逻辑，确保：
1. 页面加载时会调用 localStorage.getItem("todoList")
2. 读取到的数据会正确解析并显示在页面上

给我修复后的完整代码。

检查点

刷新页面后，之前添加的任务还在
刷新页面后，任务的完成状态也保留了
关闭浏览器标签页，重新打开文件，任务还在

技术小贴士：JSON 是什么？

你可能注意到 AI 的代码中使用了 JSON.stringify 和 JSON.parse。这里简单解释一下：

因为 localStorage 只能存储文本，所以：

• 存的时候：先用 JSON.stringify 把任务列表"打包"成文本
• 取的时候：再用 JSON.parse 把文本"解包"还原成任务列表

你不需要记住这些，只需要知道 AI 生成的代码中会包含这两个步骤。

本步完成确认

如果你已经：

• ✅ 在开发者工具中能看到 todoList 数据
• ✅ 刷新页面后任务还在
• ✅ 完成状态也能保留

恭喜！数据存储功能已经实现。接下来我们做更完整的测试。

→ 4.4.3 测试数据持久化