Skip to content

4.4 第三轮:让数据活起来

本节目标:让任务数据保存下来,刷新页面后还在

从 4.3 到 4.4:最后一块拼图

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

但如果你现在刷新一下页面(按 F5),你会发现——所有任务都消失了

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

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

本轮学习收获

经过本轮学习,你将掌握:

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

章节导航

小节主题预计时间
4.4.1为什么需要数据存储3 分钟
4.4.2使用本地存储(localStorage)10 分钟
4.4.3测试数据持久化5 分钟
4.4.4完整功能验证与阶段回顾5 分钟

预计总时间:约 25 分钟

4.4.1 为什么需要数据存储