4.4.2 使用本地存储（localStorage）
本步目标：让 AI 帮我们实现数据的自动保存和读取
本节是数据存储的核心实现。我们会分两步完成：先实现「保存」，再实现「读取」。
技术小贴士：理解 localStorage
在开始之前，用一个生活类比帮你建立直觉：
| 生活场景 | 对应概念 |
|---|---|
| 快递寄存柜 | localStorage |
| 柜子编号（如 A-15） | 存储的 key（键名） |
| 柜子里的包裹 | 存储的 value（值） |
| 存包裹 | localStorage.setItem(key, value) |
| 取包裹 | localStorage.getItem(key) |
就像快递柜一样，localStorage 可以帮你"寄存"数据，下次来还能取回来。
注意
localStorage 只能存储文本（字符串）。如果要存储任务列表这样的复杂数据，需要先把它转换成文本格式（JSON），取出来时再转回去。这个转换 AI 会自动帮你处理。
步骤 1：添加保存和读取功能
我们用一个完整的 Prompt，让 AI 同时实现保存和读取逻辑。
完整 Prompt
复制下面的 Prompt，发送给你的 AI IDE：
【背景】
我有一个待办清单网页，目前已经实现了添加、删除、标记完成的功能。
但刷新页面后，所有任务都会消失。
我需要添加数据持久化功能，让任务能够保存下来。
【当前任务】
请帮我实现 localStorage 数据存储功能：
1. 保存功能：
- 每当任务列表发生变化（添加、删除、完成状态改变）时
- 自动将当前任务列表保存到 localStorage
- 使用 "todoList" 作为存储的 key 名
2. 读取功能：
- 页面加载时，自动从 localStorage 读取之前保存的任务
- 如果有保存的数据，用它来初始化任务列表
- 如果没有保存的数据（第一次使用），显示空列表
3. 数据格式：
- 每个任务需要保存：任务内容、完成状态
- 使用 JSON 格式存储
【技术要求】
- 使用原生 JavaScript
- 关键逻辑添加中文注释
- 确保保存和读取的数据格式一致
【我是初学者】
请保持代码简洁易懂，并解释关键的保存/读取逻辑。预期结果
发送 Prompt 后，AI 会更新你的代码。替换文件内容后：
- 表面上看起来没变化 - 页面还是和之前一样
- 但数据已经在自动保存了 - 每次操作都会触发保存
如何确认保存生效？
用浏览器开发者工具查看：
- 按 F12 打开开发者工具
- 点击顶部的 Application（应用程序）标签
- 在左侧找到 Storage > Local Storage
- 点击你的网页地址
- 你应该能看到一条 key 为
todoList的数据
截图对照
如果操作正确，你会看到类似这样的界面：
- 左侧：Local Storage >
file://或你的网址 - 右侧：Key 列显示
todoList，Value 列显示类似[{"text":"买牛奶","completed":false}]的内容
检查点
在继续之前，确认以下几点：
- [ ] 代码更新后，页面能正常显示
- [ ] 添加一个任务，开发者工具中能看到
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：页面报错，功能不正常
排查步骤：
- 按 F12 打开开发者工具
- 点击 Console 标签
- 查看红色的报错信息
修复 Prompt：
更新代码后页面报错了。
控制台报错信息：[粘贴你看到的红色报错内容]
请帮我修复这个问题。步骤 2：验证刷新后数据恢复
保存功能确认正常后，现在验证最关键的部分——刷新页面后数据是否还在。
验证流程
- 确保当前有 1-2 个任务（如果没有，先添加几个）
- 标记其中一个为已完成
- 刷新页面（按 F5 或点击浏览器刷新按钮）
- 检查结果
预期结果
| 检查项 | 刷新前 | 刷新后（预期） |
|---|---|---|
| 任务数量 | 2 个 | 2 个（不变） |
| 任务内容 | "买牛奶"、"写报告" | 相同（不变） |
| 完成状态 | "买牛奶"已完成 | 仍然是已完成 |
如果刷新后数据丢失
可能原因：读取逻辑没有正确执行。
修复 Prompt：
保存功能正常（我能在 Local Storage 中看到数据），
但刷新页面后，任务列表变空了，没有从 localStorage 读取数据。
请检查页面加载时的读取逻辑，确保：
1. 页面加载时会调用 localStorage.getItem("todoList")
2. 读取到的数据会正确解析并显示在页面上
给我修复后的完整代码。检查点
- [ ] 刷新页面后，之前添加的任务还在
- [ ] 刷新页面后，任务的完成状态也保留了
- [ ] 关闭浏览器标签页，重新打开文件，任务还在
技术小贴士：JSON 是什么？
你可能注意到 AI 的代码中使用了 JSON.stringify 和 JSON.parse。这里简单解释一下：
| 方法 | 作用 | 类比 |
|---|---|---|
JSON.stringify | 把数据转换成文本 | 把衣服叠好装进行李箱 |
JSON.parse | 把文本转换回数据 | 从行李箱里把衣服拿出来 |
因为 localStorage 只能存储文本，所以：
- 存的时候：先用
JSON.stringify把任务列表"打包"成文本 - 取的时候：再用
JSON.parse把文本"解包"还原成任务列表
你不需要记住这些，只需要知道 AI 生成的代码中会包含这两个步骤。
本步完成确认
如果你已经：
- ✅ 在开发者工具中能看到
todoList数据 - ✅ 刷新页面后任务还在
- ✅ 完成状态也能保留
恭喜！数据存储功能已经实现。接下来我们做更完整的测试。