外部 JavaScript 文件（如 app.js）无法独立运行，必须通过 嵌入 HTML 文档中才能执行；直接双击打开或用 file:// 协议访问 JS 文件时，浏览器仅将其作为纯文本展示，不会触发 DOM 事件，localStorage 操作也因无执行上下文而静默失效。
外部 javascript 文件（如 `app.js`）无法独立运行，必须通过 `<script src="...">` 嵌入 html 文档中才能执行；直接双击打开或用 `file://` 协议访问 js 文件时，浏览器仅将其作为纯文本展示，不会触发 dom 事件，`localstorage` 操作也因无执行上下文而静默失效。</script>
JavaScript 是一种宿主环境依赖型语言——它本身没有独立的运行容器，必须依附于 HTML 文档（即浏览器 DOM 环境）才能被解析和执行。当你把 localStorage.setItem("Name", "Jeff") 写在 HTML 的 <script> 标签内，浏览器会在加载该页面时将其纳入当前文档生命周期；但若你将完全相同的代码保存为 app.js 并试图“单独运行”（例如双击文件、拖入浏览器地址栏、或用 file:///path/to/app.js 打开），浏览器只会显示源码（或报 MIME 类型错误），<strong>绝不会执行任何一行 JS。</script>
根本原因在于：
- DOMContentLoaded、window.onload 等事件只存在于 HTML 文档的加载生命周期中；
- 一个孤立的 .js 文件没有 DOM、没有文档对象、没有事件循环上下文，因此这些事件永远不会被触发；
- localStorage 虽然属于 window 对象，但其 API 仅在合法的浏览上下文（即已加载的 HTML 页面）中可用；在非上下文中调用会静默失败（不报错，也不生效）。
✅ 正确做法：用标准 HTML 容器加载外部 JS
你需要一个结构完整、语义合规的 HTML 文件作为“宿主”，并通过 <script> 标签引入外部脚本：</script>
<!-- index.html --> <meta charset="UTF-8"><title>localStorage 示例</title><p>检查控制台输出及 localStorage 是否写入成功。</p> <!-- ✅ 关键：通过 src 加载外部 JS，且确保路径正确 --> <script src="./app.js"></script>
对应 app.js（无需修改，保持简洁）：
// app.js
document.addEventListener('DOMContentLoaded', () => {
localStorage.setItem('Name', 'Jeff');
console.log('已写入 localStorage:', localStorage.getItem('Name'));
});
⚠️ 必须排查的常见陷阱：
- 路径错误：src="./app.js" 中的 ./ 表示与 HTML 文件同级目录；若 JS 文件在 js/ 子目录下，应写为 src="js/app.js"。可在浏览器开发者工具 → Network 面板确认请求状态是否为 200 OK。
- HTML 结构不完整：务必包含 和闭合的 标签；缺少 DOCTYPE 可能触发怪异模式（Quirks Mode），导致事件监听异常。
- 执行时机误判：不要在外部 JS 中使用 document.addEventListener('load', ...) —— load 事件不存在于 document 对象上（应为 window.addEventListener('load', ...)），且 DOMContentLoaded 已是更优选择。
-
本地协议限制（file://）：虽然上述方案在 file:// 下可基础运行，但部分浏览器（如 Chrome）对 file:// 协议下的 localStorage 有额外限制（如禁用或隔离）。强烈推荐使用本地服务器开发：
# 使用 Node.js 快速启动（需已安装 Node） npx http-server -p 8080 # 然后访问 http://localhost:8080
这能绕过 file:// 的安全沙箱，确保 localStorage、fetch、模块导入等全部功能正常。
? 总结：JavaScript 不是“可执行文件”，而是“文档逻辑片段”。它的运行前提永远是——一个被浏览器加载并解析的 HTML 文档。脱离这个上下文，一切 DOM 操作、事件监听、存储 API 都失去意义。请始终以 HTML 为入口，以 <script src> 为桥梁，这才是前端开发的标准范式。</script>
