你正在使用的网页，究竟算一个什么系统？
读解释、检查证据、修订自己的设计。正文与参考记录可离线阅读，真实网络观察需要联网或启动本机服务。
导出包含第 0–7 章作答。导入会替换八章全部作答，包括文件中未包含的章节；建议先导出备份。
0.1 · 先提出一个能检查的问题
同一个网页，为什么不是同一份进度？
你把课件网址发给朋友。你已经写了三道题，朋友打开时却是空白。网址相同，页面也相同，答案去了哪里？要设计自己的应用，先学会把这个问题拆开：谁在使用，哪个程序处理输入，哪些数据需要留下，留下在哪里。
状态就是系统在某一时刻记住的信息，例如输入框里的文字、已完成的题号。页面能显示文字，只说明它现在有这些状态；刷新后还能找回，说明有某种恢复途径；另一台设备也能找到，则还需要数据到达那台设备。这是三个不同的要求。
学完本章，你应能画出处理与数据的位置，并为每个判断说明依据。无需安装软件；准备一个普通浏览器，用一条虚构笔记完成实验即可。
0.2 · 把预测与实际结果分开
先观察，不急着给架构命名
下面是真实的浏览器存储实验。请从课程的 HTTPS 网址进入；直接双击 HTML 文件时，各浏览器的存储行为可能不同，页面会提示你换入口。先写下“刷新后”和“换浏览器后”各会看到什么，再动手。
真实操作 · 一条独立测试笔记
- 输入“周五复习第一章”，保存，再点“重新读取”，记录显示的值。
- 刷新本页，再次读取。比较文字是否相同。
- 用另一个普通浏览器或独立浏览器配置打开完全相同的网址，再读取。没有第二个浏览器时，将这一步记为“未观察”。
- 回到第一个浏览器，清除这条测试笔记，再读取，确认这一条已不存在。这个按钮不清除你的其他作答。
若页面报告存储不可用，先记录错误，不把“读不到”解释为“刷新一定丢数据”。浏览器设置会影响结果；阅读后面的参考例子可以继续理解原理，但不能把例子的结果写成自己的实测。
0.3 · 一个现象可以有多个解释
换浏览器后不同，证明了什么？
假设某个陌生网站也出现“刷新后保留，换浏览器后空白”。解释甲是：数据由第一个浏览器保管。解释乙是：数据在远端，但网站给两个浏览器分配了不同的访问身份，所以各自取回不同记录。还可能同时有本地副本和远端副本。仅凭这两次观察，无法选出唯一解释。
这里的“远端”指你的浏览器之外、通过网络访问的计算机。它可能负责发来网页文件，也可能运行接收笔记的程序。拿到同一份网页程序，不等于拿到同一份用户数据。就像两个人安装同一个记事本，仍然可以写各自的内容。
0.4 · 用实现证据缩小结论
这一次，我们知道数据由谁保管
现在补上本实验的实现说明：三个按钮由浏览器中的代码处理，分别使用下面三个操作。key 是页面显示的存储名称，value 是测试笔记。它们像字典中的名称与内容；知道名称才能取回对应内容。
localStorage.setItem(key, value); // 保存这一条
localStorage.getItem(key); // 读取这一条
localStorage.removeItem(key); // 删除这一条localStorage 是浏览器提供的本地存储。通常刷新或关闭页面后还可取回，但用户清理网站数据、浏览器策略等可能使其不可用或被清除。它按网站来源隔离；来源由协议、主机名和端口共同确定，所以本地预览和正式网址的记录不自动相通。普通模式和隐私模式也不要混作同一个实验条件。MDN 对存储范围的说明
完整地解释小林的结果：浏览器 A 保存了“周五复习第一章”；刷新后程序从 A 的本地存储重新读取；浏览器 B 没有这条记录，所以显示为空；A 删除后再读，也为空。操作记录与已知代码吻合，支持“本实验使用本地存储”。本实验的保存操作没有发送网络请求，并不能由此推断整站不存在任何服务端功能。第一章会再学习查看网络证据。
检查下面这份不完整设计：“作者把 HTML 放到网上；学生在页面作答；因此作者打开同一网址就能收齐答案。”请指出少了什么，并区分你知道的事实与仍需确认的事。
提示 1：追踪数据，而不是网址
学生输入之后，哪一步让这些文字到达作者能够读取的位置？图上的文件传输箭头，传的是谁的数据？
提示 2：补上负责传递的人或程序
可以由学生导出文件交给作者，也可以增加接收作业的服务。两条路都需要明确传什么、由谁接收，不能只写“已经上线”。
提示 3：一份参考推理
当前实验只把笔记留在学生浏览器中。若采用手动交作业，需提供导出与接收步骤；若要求自动收集，则需传输、接收、保存和作者读取的能力。这些是拟增加的设计，不能声称现有网页已经实现。
0.5 · 把同一个问题带到自己的项目
为一个收藏夹做最小决定
朋友想在手机和电脑上使用文章收藏夹。先别急着说“需要服务器”：每周手动搬一次收藏、打开就自动同步、两台设备同时编辑，是不同需求。本题先选一种，写明谁使用、添加／查看／删除在哪里处理、记录保存在哪里，以及怎样到达另一台设备。画不出的路径可以写“待设计”。
对照一种可行答案
若接受每周手动迁移，可先在浏览器保存，导出文件，再到另一设备导入。验收是导入后逐项核对收藏是否相同。代价是操作麻烦，而且新修改不会自动传过去；若需求改成自动同步，就必须重新设计数据传递路径。这只是一个满足特定条件的选择。
用证据自评，不用“读完了”代替理解
勾选是你的自评记录。若第一项做不到，回看 0.3；第二项不清楚，回看 0.4；第三项缺少路径，再读迁移题参考。没有完成实操时，保留“未观察”，不必为了通过而补写结果。
短选读：带着问题读一小段
- MDN · How the web works：只读“Clients and servers”。网页文件到达浏览器后，谁把它变成可见页面？
- MDN · localStorage：读开头、Description 和 Examples。哪些条件会使你的两次存储实验不可比？
- C4 · System context diagram：看 Scope 与 Intended audience。先说明使用者和系统关系，为什么比先写云产品名称更有用？本章的位置图无需符合完整 C4 规范。