浏览器与Web基础：URL、HTTP、同源和本地存储

前置：会保存文件、在终端进入目录；HTML负责结构、CSS负责样式、JavaScript负责交互，Node.js是另一个运行环境。先理解浏览器如何取得资源，再完成阅读记录项目。本批使用Chromium浏览器、Node24.21.0和本地静态服务；不需要框架或业务API，macOS不列入验收。

URL与HTTP资源

http://127.0.0.1:5186/index.html中协议是http，主机127.0.0.1，端口5186，路径/index.html；query是?后参数，fragment是#后页内定位，不发送给HTTP服务器。相对路径./seed.json基于文档URL解析，CSS的资源URL相对CSS文件；不要假设都相对终端当前目录。

浏览器按响应状态、标头和内容处理资源。200通常表示成功，404表示路径不存在；Content-Type应与资源匹配，ES模块尤其不能收到HTML错误页后当脚本执行。请求成功不代表JSON内容合法，还要解析并校验结构。缓存可能复用旧响应，调试时先确认Network中的实际URL、状态和资源内容，不盲目清空所有浏览器数据。

完整项目通过本机HTTP服务加载，不能用file://替代验证模块和存储行为。进入 examples/web/reading 后用 python -m http.server 5186 --bind 127.0.0.1（Linux常用python3）；在浏览器打开上述URL，用完Ctrl+C。该服务只用于本机教学，不提供保存业务数据的API，不在含有私密文件的上级目录启动，不向公网暴露。

同源、CORS与存储边界

源由协议、主机、端口组成，localhost与127.0.0.1、5186与5187不属于同一个源。相同源中不同路径通常共享localStorage，因此项目使用自己的键，不能清空整个存储。file://的存储行为不作为可移植约定。

CORS是浏览器对跨源响应读取的约束，不是用户身份认证。即使服务响应了请求，脚本也可能无法读到响应；mode:'no-cors'通常得到不可读的opaque响应，不是绕过方案。客户端校验不是服务端授权；本批只读同源静态seed.json，不凭空依赖一个未实现的/api/items。

localStorage保存字符串，是同步接口；JSON序列化/解析仍需要结构校验，容量/权限/隐私模式都可能导致失败。它不保证账号同步，也不适合存凭据或敏感业务数据。loadNotes检测损坏并显示提示，saveNotes失败时不把界面改动标为“已保存”，详见项目持久化。

Fetch失败与可复现检查

阅读记录项目点击“从静态文件追加示例”才发出请求。正常seed.json返回数组并追加两项；404仍通常得到Response，必须先检查response.ok，网络失败才通常拒绝；await response.json()还可能因无效JSON失败。按钮读取期间禁用，finally恢复，失败在status中显示，原记录不应被抹掉。

自检步骤：正常追加后刷新，记录仍在；另一个端口/主机打开得到另一个存储空间；把seed.json临时移出实验目录，点击得到HTTP404提示，再恢复文件。不要通过禁用浏览器保护解决跨源或模块加载错误。生产查询词包括“HTTP404”“同源端口”“localStorage损坏”，应能在本站得到对应操作和边界。

练习与自检

把项目复制到另一个目录仍用同源同端口服务，解释为什么记录可能共享；把请求路径误写成不存在文件时区分HTTP失败、解析失败和数据结构失败。画出页面→CSS/模块→seed.json的资源关系。

参考解法

localStorage按源而非文件夹隔离，同端口同主机下路径不同仍可能读到同一个键；独立应用使用不同键或不同源。404在response.ok处失败；200返回非JSON会在json()失败；200合法JSON但不是要求数组在validateNotes失败。三者都应显示错误并保留已有状态，不能直接赋空列表。先检查URL与响应内容，再调整文件或路径。

资源关系：index.html通过link加载styles.css，通过模块script加载app.mjs；app.mjs通过import加载model.mjs，点击示例按钮后才fetch seed.json。这些资源在本例同一目录且同源；seed.json不是HTML加载时自动请求的脚本依赖，localStorage也不是其中一个HTTP资源。

依据：URL、同源策略、Fetch、localStorage。核对2026-10-17。

深入课程已接续：浏览器任务与资源生命周期。基础内容与旧锚点保留，按当前路线进入完整机制和实践。