4.4.1 为什么需要数据存储
本步目标：理解数据存储的必要性，了解 localStorage 的基本概念
小李的困惑
还记得第二章的小李吗？他兴冲冲地完成了待办清单的交互功能，添加了几个任务，准备明天继续用。
第二天打开电脑，打开页面——任务列表空空如也。
"我的任务呢？"小李懵了。
这不是 Bug，而是因为小李的待办清单还缺少最后一个关键能力：数据存储。
用生活类比理解
想象两种记录方式：
| 场景 | 类比 | 结果 |
|---|---|---|
| 在沙滩上写字 | 数据只存在浏览器内存中 | 浪一来（刷新页面），字就没了 |
| 在石板上刻字 | 数据存储到 localStorage | 风吹雨打（刷新、关闭），字还在 |
目前我们的待办清单就像在沙滩上写字。本轮要做的，就是把它变成"刻在石板上"。
网页数据存储的几种方式
| 方式 | 存在哪里 | 特点 | 本章是否使用 |
|---|---|---|---|
| localStorage | 浏览器本地 | 简单、免费、无需配置 | ✅ 使用 |
| sessionStorage | 浏览器本地 | 关闭标签页就没了 | ❌ 不适合 |
| 云数据库 | 远程服务器 | 多设备同步，需要后端 | ❌ 进阶篇内容 |
为什么选择 localStorage？
对于个人工具类项目，localStorage 是最佳起点：
| 优势 | 说明 |
|---|---|
| 零配置 | 浏览器原生支持，不需要安装任何东西 |
| 持久化 | 关闭浏览器、重启电脑，数据依然存在 |
| 容量足够 | 约 5MB 空间，存几千条任务都没问题 |
| 隐私安全 | 数据只存在你自己的电脑上 |
| 学习成本低 | 只需要两个方法：保存和读取 |
localStorage 的局限性
当然，localStorage 也有不适用的场景：
| 场景 | 为什么不适合 | 解决方案 |
|---|---|---|
| 多设备同步 | 数据只存在当前浏览器 | 需要云数据库（进阶篇） |
| 团队协作 | 别人看不到你的数据 | 需要后端服务（进阶篇） |
| 大量数据 | 超过 5MB 会报错 | 需要专业数据库 |
进阶预告
在进阶篇中，我们会学习如何使用 Supabase 等云数据库服务，实现多设备同步和数据备份。但对于个人工具的第一版来说，localStorage 完全够用。
本节检查点
在继续之前，确认你理解了：
- [ ] 目前待办清单的数据为什么会在刷新后消失
- [ ] localStorage 是什么（浏览器提供的本地存储空间）
- [ ] 为什么我们选择 localStorage 作为第一步
理解了这些概念，接下来就可以动手实现了。