# 任务管理系统——状态管理与本地存储 教学设计
| **课题** | **任务管理系统——状态管理与本地存储** |
|:---|:---|
| **课时** | 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分钟） | 展示刷新恢复效果，归纳状态管理流程。 | **故障点评**
对比只修改页面与修改数据后渲染的两种实现，说明前者刷新后失效。
**知识总结**
强调“数据先变、保存跟上、界面重画”。 | **成果演示**
按测试序列操作并刷新验证。
**流程复述**
说明一次删除操作经过的四个步骤。 | 用刷新作为真实性检验，强化单一数据来源和一致性意识。 |
## 板书设计
```text
任务状态
tasks = [
{ id, name, done }
]
用户操作
↓
修改 tasks
↓
saveTasks()
↓
renderTasks()
localStorage 只存字符串
数组 → JSON.stringify → 保存
读取 → JSON.parse → 数组
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够用任务对象数组管理状态，并实现完成、删除和刷新恢复。固定操作序列有效检验了数据、页面和本地存储的一致性，多数学生理解了统一渲染的价值。 |
| **教学反思** | 本课概念密度较高，学生容易同时修改 DOM 和数组造成不同步。应提供状态流转图和函数骨架，把实践重点限定为“修改数据—保存—渲染”，高级事件委托不在本课展开。 |