学习进度表：把清单变成能打勾的表

这一页和总验收清单的区别只有一点：它是真能打勾的。勾完之后刷新、切页、明天再来，进度都还在——因为勾选状态存在你自己浏览器的 localStorage 里，不上传任何服务器，也没有账号。

前提是同一台电脑、同一个浏览器。换设备、清缓存、开无痕窗口都会是空的。

已完成 0 / 29 项 · 0%

一、Web 怎么工作 0 / 6

能凭记忆画出「输入网址 → DNS → TCP/TLS → 请求 → 响应 → 渲染」的完整流程能用 nslookup 查出域名对应的 IP，并说清 DNS 的查询顺序能说出一条 HTTP 请求由哪几部分组成，并解释 Host 头的作用见到 200 / 301 / 403 / 404 / 500 能说出服务端那边发生了什么能用 curl -I 读出响应头，并指出其中哪几条是安全头能解释 HTTPS 证书是干什么的、地址栏的小锁代表什么

二、前端三件套 0 / 6

能用 F12 的 Elements 面板改掉页面上的文字和样式并立刻看到效果能读懂一个表单把参数提交到哪个地址、用的是 GET 还是 POST能说清同源策略的三个要素，并判断两个 URL 是否同源能解释 innerHTML 为什么危险、textContent 为什么安全能在 Network 面板找到页面调用的接口，并 Copy as cURL 重放一次能在 Application 面板看到 Cookie，并说出 HttpOnly / SameSite 的作用

三、后端与数据库 0 / 6

能在本机起一个最小 HTTP 服务，并用浏览器访问到它能说出用户输入进入服务端的五个入口（query / body / header / cookie / path）能解释 Cookie 与 Session 的分工，以及完整登录流程的五步能写基本的 SELECT / INSERT / UPDATE / DELETE，并在本地数据库跑通能写出「拼接字符串」和「参数化查询」两版代码，并说清差在哪能解释为什么错误回显与详细日志属于信息泄露

四、工具与靶场 0 / 6

装好 Burp，并让浏览器（或手机）的流量成功经过代理、证书导入成功能用 Repeater 改一个参数重放，并观察响应有什么变化能在 DVWA 上完成至少 5 关，且每一关都能说清原理能把 DVWA 调到 High 等级，并解释原 payload 为什么失效能说清授权边界：哪些目标可以测、哪些碰都不能碰任何时候动手之前，手上都有可依据的授权（自己的靶场 / 书面委托 / 平台规则）

五、综合与输出 0 / 5

对自己有授权的站点做过一次信息收集（响应头、Cookie、接口）手工验证过一个漏洞，而不是只跑扫描器看报告写过一份漏洞报告：现象、复现步骤、影响范围、修复建议把知识库里至少 3 篇文章重读了一遍，并写下自己的总结清楚「发现漏洞之后的正确处理流程」：不公开细节、联系厂商或 SRC

一、怎么用它才有效

• 每周固定看一次，不要天天勾。进度条爬得太慢会让人焦虑，一周一次刚好能看到台阶。
• 哪一组分数最低，下一步就补哪一组。二十九条里最难的是第四组（工具与靶场），因为那几条要求"手上有授权"，不是靠看书能完成的。
• 勾不动的时候就别硬勾。某一组卡住，说明对应的课还没吃透——点回那个阶段的课重看一遍（比如第三组卡住就回去看服务端如何接收一个请求和SQL 基础），再回来打勾。
• 别追求 100%。第八条、第十四条这类"能说清原理"的条目，允许自己第二次重读后才能真正勾上；那才是这张表的价值。

二、原理：这一页为什么能"记住"你勾了什么

整件事没有后端、没有数据库，只有三行思路：

页面加载 → onMounted 里读 localStorage → 把勾选状态填回去
你打一个勾 → 组件状态变化 → watch 捕获 → 写回 localStorage

对应到 docs/.vitepress/theme/components/ProgressList.vue 里的三段代码：

onMounted(() => {                       // 只能在浏览器里读,构建时没有 localStorage
  const raw = window.localStorage.getItem('learn-web:progress:v1')
  if (raw) checked.value = JSON.parse(raw) || {}
  ready.value = true
})

watch(checked, (val) => {               // 状态一变就写回,实现"记住"
  if (!ready.value) return
  window.localStorage.setItem('learn-web:progress:v1', JSON.stringify(val))
}, { deep: true })

这里有一个静态站点特有的坑，值得你记住：VitePress 在构建时会在 Node 里把每个页面渲染成 HTML（SSR），那时根本没有 window 和 localStorage。所以在 <script setup> 顶层直接写 localStorage.getItem(...) 会让构建直接崩掉；必须放进 onMounted，因为那个钩子只在浏览器里执行。

ready 这个标志位的用处也在这里：首屏渲染时状态必须是"全都没勾"（和服务端渲染的 HTML 一致），等挂载完成后再把本地进度填进去，避免"服务端渲染的内容和浏览器里的内容不一致"这种警告。

三、去浏览器里验证

1. 勾几条，然后按 F12 → Application → 左侧 Local Storage → 选 https://learn.myxbw.cn，你会看到一条 key：learn-web:progress:v1，值是一串 JSON。这就是"网站把东西存在你电脑上"的现场。
2. 直接在 DevTools 里双击那个值，把某一条从 true 改成 false，刷新页面——对应的勾会消失。反过来也能凭空"伪造"进度，因为客户端存储的一切都是用户说了算（这也是为什么权限判断永远不能放在前端）。
3. 切到 总验收清单 再切回来，勾选依然在：数据不在页面里，而在浏览器里。

💡 动手实验 1：打开 Application → Local Storage，找到 learn-web:progress:v1，右键删除它，刷新——进度清零。这就是"清空记录"按钮背后实际发生的事。

💡 动手实验 2：给组件加一条你自己的验收项。打开 ProgressList.vue，在任意一个 items: [ ... ] 数组里加一行带引号的字符串，保存后本地预览，你会看到清单里多了一条——改数据不用碰模板，这就是"数据驱动视图"。

💡 动手实验 3：把 STORAGE_KEY 改成 'learn-web:progress:v2'，刷新页面，进度会变成空的（因为去读另一个 key 了）。再改回来，进度又回来了——key 就是这份数据的"门牌号"。

四、小结

勾选状态 → 组件里的 ref        （页面内唯一真相）
持久化   → localStorage        （只在你本机,不上传）
读的时机 → onMounted           （SSR 阶段没有 window,顶层读会崩）
写的时机 → watch + deep        （状态一变就写回）
安全提醒 → 前端存储全可伪造    （权限校验必须在服务端）

一句话：这张表是给你自己看的仪表盘，不是给别人看的成绩单。 勾满了不代表学会了，勾不动就说明还有课要回去重看——它的作用是让你知道下一步该点哪里。

想继续往下走：回到总验收清单看每条对应的自测方式，或者直接进第四阶段：工具与靶场把最难的那一组补上。

📎 本课对应知识库阅读：知识库里的《客户端存储与敏感信息》主题文章——同一条 localStorage，学习站拿来存进度是无害的，放 token 就是把钥匙交给 XSS。