---
title: "4.4.2 使用本地存储（localStorage）"
order: 3
---


![04-practice-0-to-1_4.4-data-storage_4.4.2-localstorage.png](/images/Basic/04-practice-0-to-1_4.4-data-storage_4.4.2-localstorage.png)
# 4.4.2 使用本地存储（localStorage）

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

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

## 技术小贴士：理解 localStorage

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

| 生活场景 | 对应概念 |
|---------|---------|
| 快递寄存柜 | localStorage |
| 柜子编号（如 A-15） | 存储的 key（键名） |
| 柜子里的包裹 | 存储的 value（值） |
| 存包裹 | `localStorage.setItem(key, value)` |
| 取包裹 | `localStorage.getItem(key)` |

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

::: warning 注意
localStorage 只能存储文本（字符串）。如果要存储任务列表这样的复杂数据，需要先把它转换成文本格式（JSON），取出来时再转回去。这个转换 AI 会自动帮你处理。
:::

## 步骤 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` 的数据

::: tip 截图对照
如果操作正确，你会看到类似这样的界面：
- 左侧：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：页面报错，功能不正常

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

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

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

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

### 验证流程

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

### 预期结果

| 检查项 | 刷新前 | 刷新后（预期） |
|--------|-------|---------------|
| 任务数量 | 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` 数据
- ✅ 刷新页面后任务还在
- ✅ 完成状态也能保留

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

→ [4.4.3 测试数据持久化](./4.4.3-test-persistence.md)