Logo
← 全部极客知识库

主流 Agent 入门教程 / ZCode

5. 持久化筛选与浏览器验证

原文备份 · 第 7 / 12 篇 · 查看极客时间原知识库 ↗

本篇目录 · 11 节

来源：ZCode

当前应用能添加、完成和删除事项，也能显示统计，但刷新页面后数据会清空。这个缺口正适合引入两个能力：用 localStorage 保存本地数据，以及让 ZCode Agent 在内置浏览器里执行真实操作。

完成本课后，事项会在刷新后保留，并可按“全部、进行中、已完成”筛选。Agent 会先跑一遍浏览器验收，你再独立复查。

固定存储来源

从本课起使用固定 HTTP 地址。先确认 Python 可用，在项目目录运行 python3 -m http.server 8000 --bind 127.0.0.1（Windows 用 py 替代 python3），在 ZCode 浏览器打开 http://127.0.0.1:8000。保持终端运行，结束时 Ctrl+C；后续使用同一浏览器、协议、主机名和端口。

file:// 的 localStorage 行为没有跨浏览器保证。此前只有少量练习数据，可记录后重新录入；不要把移动文件后看不到数据直接判为业务删除。

开始前确认浏览器控制

打开“设置 → 浏览器”，确认“开启内置浏览器控制”处于开启状态。Browser Use 官方插件通常默认开启；如果你刚刚打开它，需要新建任务，因为开关只对新会话生效。浏览器自动化

创建一个新的项目任务。这样既能载入第 4 课的 AGENTS.md，也能确保浏览器控制使用最新设置。

本课的文件范围明确，且只有三个应用文件可能修改，可以将执行模式切换为“自动编辑”：文件编辑自动进行，命令等风险更高的操作仍会请求确认。如果你希望逐个检查文件，也可以继续使用“变更前确认”。

规定数据结构和存储边界

在输入框中用 @ 引用 index.html、styles.css、app.js 和 AGENTS.md，发送：

为当前“今日专注清单”加入本地持久化和状态筛选，并遵守 AGENTS.md。

功能要求：
1. 使用 localStorage，固定键名为 focus-board.tasks。
2. 每条事项至少保存 id、text、completed、createdAt；createdAt 使用可重新解析的时间字符串。
3. 页面首次加载时读取已有数据；添加、完成状态变化和删除后立即保存。JSON 损坏时保留原值并提示用户备份后恢复，不静默清空；写入失败显示“未保存”，不能假装刷新仍会保留。
   所有事项文本用 textContent 等按文本渲染，不拼入 innerHTML。
4. 增加“全部、进行中、已完成”三个筛选控件，当前筛选状态要清楚可见。
5. 筛选只改变显示结果，不删除或重写被隐藏的数据。
6. 保留现有统计、空输入提示和窄屏可用性。
7. 不添加框架、依赖、后端、导入导出或其他功能。

修改完成后，请打开自己的内置浏览器标签验证：
A. 添加“整理本周计划”和“阅读 20 分钟”；
B. 将“阅读 20 分钟”标记完成；
C. 检查进行中只显示第一项，已完成只显示第二项，全部显示两项；
D. 刷新页面，再确认两项内容、完成状态、统计和筛选仍然正确；
E. 将视口设为 375×812，确认控件没有重叠或超出页面。

最后按 A～E 报告实际观察结果；不要只说“测试通过”。

固定存储键和字段不是为了增加技术感，而是为下一课制造并定位刷新问题提供稳定基础。createdAt 会在第 7 课计算近七天统计，当前只需正确保存。

看着 Agent 执行浏览器步骤

Agent 新建标签时，右侧浏览器面板会自动展开。它默认只操作自己打开的标签；你在上一课手动打开的页面不会自动被接管。因此，看到它新开一个本地页面是正常现象。

观察时注意三个信号：

  • 输入和点击顺序是否与 A～E 一致；
  • 刷新前后页面状态是否真的相同；
  • 失败时它是否停下来说明实际现象，而不是继续编造后续结果。

如果 Agent 只检查源代码，没有打开页面，补充：

代码检查不能替代本课验收。请在你自己的内置浏览器标签中打开工作区的 index.html，按 A～E 实际操作，并逐步报告可见结果。

人工重复关键路径

Agent 的浏览器记录是证据之一，不是最终裁判。在它完成后，自己打开或刷新 index.html，执行下面这组更短的独立检查：

  1. 删除已有事项，回到空列表。
  2. 添加“测试持久化”，将它标记完成。
  3. 切换到“已完成”，应只看到这条事项。
  4. 刷新页面；页面可以回到默认的“全部”，也可以保留原筛选，但这条事项及其完成状态必须仍然存在。
  5. 切换到“进行中”，列表应为空，但总数据不应被删除。
  6. 切回“全部”，删除事项，再刷新；列表仍应为空。

步骤 5 用来区分“筛选隐藏”和“数据被删”。这是很多初版实现容易混淆的地方。

检查实际数据和代码边界

打开 app.js，搜索 focus-board.tasks。键名应在读写逻辑中保持一致。再检查事项对象是否包含 createdAt，以及添加、完成和删除三条路径是否都会保存。

不要求你能独立理解每行 JavaScript。你只需要确认需求中的固定词能在正确职责附近找到，并且没有出现远程接口地址或额外依赖。

文件树应仍为：

focus-board/
├── AGENTS.md
├── index.html
├── styles.css
└── app.js

两个常见失败

刷新后事项还在，但完成状态丢失

这通常说明保存或恢复时只处理了文字，没有完整保留 completed。把复现步骤和 @app.js 一起交给 Agent，要求先说明数据写入和读取路径，不要直接大改界面。第 6 课会系统练习这种调试流程。

浏览器控制已打开，当前任务仍不能操作

浏览器控制开关只对新会话生效。保留当前文件，重新新建一个项目任务，再发送验收步骤即可，不要重复生成代码。还要确认这是桌面端；官方说明浏览器面板仅桌面端可用。

本课结束状态

应用现在把数据保存在 focus-board.tasks，每条事项具有 id、text、completed 和 createdAt，并提供三种筛选。你已经看过一次 Agent 浏览器验收，也亲自复查了刷新和筛选。

下一课会先把这个可用版本记录为 Git 基线，再故意引入一个“刷新后完成状态丢失”的缺陷，练习复现、最小修复和变更审查。

负向验收

在独立练习数据上，将存储值改为非法 JSON 后刷新，应显示恢复提示且原始值还在；模拟 setItem 抛错，应出现未保存提示；输入 <b>阅读</b>，应显示字面文本而不是粗体元素。测试前备份当前值，结束后恢复。