teaching-design/data/Web/17.md

任务管理系统——状态管理与本地存储 教学设计

课题	任务管理系统——状态管理与本地存储
课时	1课时（40分钟）
教学目标	知识目标：理解任务状态、数据数组、界面渲染和持久化之间的关系，掌握对象、数组更新、localStorage、JSON 序列化与反序列化。 技能目标：能够保存任务对象，实现完成状态切换、任务删除和刷新后恢复，并通过统一渲染函数保持数据与页面一致。 素养目标：建立“数据是单一事实来源”的状态管理意识，养成每次修改数据后保存、渲染和复测的习惯。
教学重难点	重点：任务对象数组；状态更新；删除；JSON 转换；本地存储读写。 难点：理解先修改数据、再保存、最后重新渲染的流程，避免只改页面而数据未同步。
教学资源准备	上节课项目、状态流转图、本地存储示例、测试任务数据、浏览器 Application 面板、故障代码。

教学过程

教学环节	教学内容	教师活动	学生活动	设计意图
1. 数据丢失导入 （5分钟）	刷新页面后任务消失，提出状态管理和本地保存需求。	问题演示 添加任务后刷新页面，展示列表清空；再演示完成版可恢复数据。 任务发布 明确本课实现添加、完成、删除和刷新恢复。	现象分析 说明当前任务只存在于页面节点中。 流程猜想 提出需要把数据保存到浏览器并在启动时读取。	用数据丢失形成真实动机，引出界面之外的数据状态和持久化。
2. 状态模型探究 （10分钟）	使用对象表示单项任务，用数组保存全部任务，建立数据与界面关系。	模型讲解 示范任务对象包含 id、name、done，说明唯一标识和状态字段作用。 流程绘制 画出“用户操作→修改数组→保存数据→重新渲染”的单向流程。	对象建模 为两项任务填写对象属性和值。 流程追踪 模拟点击完成后数组中哪一项、哪个字段发生变化。	把操作转化为数据变化，建立后续功能共享同一状态的核心模型。
3. 存储渲染示范 （8分钟）	学习 JSON.stringify、JSON.parse 和 localStorage 读写。	代码演示 编写 saveTasks() 保存数组，启动时读取字符串并还原；在 Application 面板查看数据。 边界讲解 说明首次访问没有数据时使用空数组，避免解析空值。	跟随编码 保存两项模拟任务，刷新后读取并在控制台确认。 面板观察 查看键名和值，删除存储后观察程序默认状态。	通过可视化存储面板理解浏览器持久化及 JSON 转换的必要性。
4. 完整功能实践 （13分钟）	改造添加逻辑，完成统一渲染、状态切换、删除和本地保存。	任务分解 添加时先写入数组；完成和删除根据 id 更新数组；每次修改后调用保存与渲染。 巡回指导 检查只改 DOM、标识重复、删除索引错误和启动时未渲染等问题。	系统改造 编写 renderTasks()，为任务生成完成和删除按钮，连接状态更新函数。 持久测试 添加三项、完成一项、删除一项、刷新页面，核对剩余数据和状态。	以固定测试序列验证数据、界面和存储一致，完成系统核心闭环。
5. 成果评价总结 （4分钟）	展示刷新恢复效果，归纳状态管理流程。	故障点评 对比只修改页面与修改数据后渲染的两种实现，说明前者刷新后失效。 知识总结 强调“数据先变、保存跟上、界面重画”。	成果演示 按测试序列操作并刷新验证。 流程复述 说明一次删除操作经过的四个步骤。	用刷新作为真实性检验，强化单一数据来源和一致性意识。

板书设计

任务状态

tasks = [
  { id, name, done }
]

用户操作
   ↓
修改 tasks
   ↓
saveTasks()
   ↓
renderTasks()

localStorage 只存字符串
数组 → JSON.stringify → 保存
读取 → JSON.parse → 数组

教学成效与反思

教学成效	学生能够用任务对象数组管理状态，并实现完成、删除和刷新恢复。固定操作序列有效检验了数据、页面和本地存储的一致性，多数学生理解了统一渲染的价值。
教学反思	本课概念密度较高，学生容易同时修改 DOM 和数组造成不同步。应提供状态流转图和函数骨架，把实践重点限定为“修改数据—保存—渲染”，高级事件委托不在本课展开。