由 pnpm docs:lessons 生成。教学脚本在 src/data/network-state.json，合同补充在 scripts/generate-network-state.mjs。本页含教师参考答案。
理解存储范围、生命周期与页面状态。先修按 完整目录 的章节关系；基础操作、原理关系随本课讲解。
localStorage 跨同源页面共享；sessionStorage 按源与顶层标签会话分组。
localStorage 持久保存但不自动发到服务器
sessionStorage 通常跨刷新保留；有 opener 的新标签可能初始复制，不能只看是否开了新标签
两个端口是不同源；所有本课键有会话前缀，避免误删其他数据
刷新、开新标签、清理并比较。模型不改变真实浏览器设置，不计为实战完成。
- 先预测一个条件变化的结果。
- 只改变一个条件，比较输入与输出。
- 将模型中的关系对应到真实 DevTools。
症状：购物车没有持久保存，或筛选条件错误地串到其他标签。
正常结果：购物车保存到 localStorage；每标签筛选保存到 sessionStorage。
真实机制：真实 Storage API，键前缀含 token；刷新只重新读取，不偷偷重写。
- 从本课准备并打开独立商城；先打开 DevTools，再运行故障。
- Application 分别查看 Local storage 和 Session storage 的当前实验源与会话前缀。
- 运行后刷新，使用「重新读取状态」比较内存显示与真实存储。
- 点「新标签验证」打开无 opener 页面，核对标签隔离；最后只清理本会话键。
- 先保存证据，再应用针对性的对照；错误对照不会通过页面检查。
- 回到教程选择真实证据，完成独立挑战后写下排查与恢复步骤。
修复另一处错误持久化。新会话改变输入与故障配置，可能再次抽到同一类型；按实际证据判断。
| 配置 | 原因 | 证据 | 修复/验证 |
|---|---|---|---|
| 配置1 | 购物车被写进临时 sessionStorage | 购物车只有 session 键，本地持久键缺失 | 将购物车保存到本地持久存储 |
| 配置2 | 筛选被写进共享 localStorage | localStorage 有筛选值，新标签也会读取它 | 将每标签筛选保存到 sessionStorage |
| 干扰项 | 只凭界面颜色判断 | 没有对应请求或存储证据 | 同时改变全部条件且不复测 |
- 先区分实际请求、浏览器策略、存储与界面处理，记录第一次偏离的环节。
- Application 分别查看 Local storage 和 Session storage 的当前实验源与会话前缀。
- 比较两个候选解释：购物车被写进临时 sessionStorage；筛选被写进共享 localStorage。保持其他输入一致再验证。
新标签链接 rel=noopener，避免 opener 初始复制干扰实验。只清理命名空间，不调用全源 clear。
清理与会话约定见 共同合同。请在复盘写下条件、观察对象、实际值、根因、最小修改与恢复设置；将 HTTP 缓存、Cache Storage、内存状态分开。