---
title: "4.4 第三轮：让数据活起来"
order: 1
---


![04-practice-0-to-1_4.4-data-storage_index.png](/images/Basic/04-practice-0-to-1_4.4-data-storage_index.png)
# 4.4 第三轮：让数据活起来

> **本节目标**：让任务数据保存下来，刷新页面后还在

## 从 4.3 到 4.4：最后一块拼图

在 4.3 节，你已经让待办清单具备了完整的交互能力：添加、删除、标记完成。

但如果你现在刷新一下页面（按 F5），你会发现——**所有任务都消失了**。

这不是 Bug，而是因为目前数据只存在于浏览器的"临时记忆"中。就像在白板上写字，擦掉就没了。

本轮，我们要给待办清单装上"记忆"，让它能记住你的任务。

## 本轮学习收获

经过本轮学习，你将掌握：

- 理解为什么网页需要数据存储
- 使用 localStorage 实现数据持久化
- 验证数据是否正确保存和读取
- 完成一个「刷新不丢数据」的完整应用

## 章节导航

| 小节 | 主题 | 预计时间 |
|------|------|---------|
| [4.4.1](./4.4.1-why-storage.md) | 为什么需要数据存储 | 3 分钟 |
| [4.4.2](./4.4.2-localstorage.md) | 使用本地存储（localStorage） | 10 分钟 |
| [4.4.3](./4.4.3-test-persistence.md) | 测试数据持久化 | 5 分钟 |
| [4.4.4](./4.4.4-final-verification.md) | 完整功能验证与阶段回顾 | 5 分钟 |

**预计总时间：约 25 分钟**

→ [4.4.1 为什么需要数据存储](./4.4.1-why-storage.md)