---
title: "4.4.3 测试数据持久化"
order: 4
---


![04-practice-0-to-1_4.4-data-storage_4.4.3-test-persistence.png](/images/Basic/04-practice-0-to-1_4.4-data-storage_4.4.3-test-persistence.png)
# 4.4.3 测试数据持久化

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

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

## 五步验证法

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

### 步骤 1：准备测试数据

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

### 步骤 2：修改任务状态

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

### 步骤 3：刷新页面测试

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

| 检查项 | 预期结果 |
|--------|---------|
| 任务数量 | 3 个 |
| "学习 Vibe Coding" | 仍然是已完成状态 |
| 其他两个任务 | 仍然是未完成状态 |

### 步骤 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 列可以查看完整内容

**正确的数据格式示例**：

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

::: tip 提示
如果你的数据格式和上面不完全一样也没关系，只要包含任务内容和完成状态两个信息即可。不同的 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 token`
- `JSON.parse: unexpected character`

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

## 本节检查点

在继续之前，确认：

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

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

→ [4.4.4 完整功能验证](./4.4.4-final-verification.md)