外部 JavaScript 文件无法独立执行（如直接双击打开或用 file:// 协议访问），必须通过 在 HTML 页面中加载，否则 DOMContentLoaded、window.onload 等 DOM 事件根本不会触发，localStorage 操作也因无运行上下文而静默失效。
外部 javascript 文件无法独立执行（如直接双击打开或用 file:// 协议访问），必须通过 `<script src="...">` 在 html 页面中加载，否则 `domcontentloaded`、`window.onload` 等 dom 事件根本不会触发，localstorage 操作也因无运行上下文而静默失效。</script>
JavaScript 本质上是一种宿主环境依赖型脚本语言——它不能像 Python 或 Node.js 那样脱离环境直接运行。当你把一段 JS 代码写在 HTML 的 <script> 标签内，浏览器会将其作为当前 HTML 文档的逻辑部分解析并执行；但若你将完全相同的代码保存为 app.js 并试图“单独运行”（例如双击文件、拖入浏览器、或用 file:// 协议打开），浏览器只会将其当作纯文本资源展示（或报错 MIME 类型不匹配），<strong>绝不会执行其中任何一行 JS 代码。</script>
这就是问题的根本原因：你提供的 JS 文件片段（含 document.addEventListener("DOMContentLoaded", ...)）本身语法正确、逻辑合理，但它从未被浏览器加载和执行。DOMContentLoaded 事件只存在于 HTML 文档加载生命周期中，而一个孤立的 .js 文件没有 DOM、没有文档、没有生命周期——因此该事件永远不会发生，控制台自然不会输出，localStorage 也不会写入。
✅ 正确做法：将 JS 文件作为模块引入 HTML
你需要一个合法的 HTML 容器，并通过 <script> 标签引用外部 JS 文件：</script>
<!-- index.html --> <meta charset="UTF-8"><title>LocalStorage 示例</title><p>检查控制台查看 localStorage 是否写入成功。</p> <!-- ✅ 关键：通过 src 属性加载外部 JS --> <script src="./app.js"></script>
对应 app.js（无需修改，保持简洁）：
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
// app.js
document.addEventListener('DOMContentLoaded', () => {
localStorage.setItem('Name', 'Jeff');
console.log('已写入 localStorage:', localStorage.getItem('Name'));
});
⚠️ 注意事项与常见陷阱：
- 路径必须正确：确保 src="./app.js" 中的路径与 HTML 文件相对位置一致（推荐使用 ./ 显式声明同级目录）。可在浏览器开发者工具 → Network 面板中确认 app.js 返回状态码为 200。
-
不要用 file:// 直接打开 HTML：部分浏览器（尤其是 Chrome）出于安全策略，会禁用 file:// 协议下的 localStorage、fetch 和跨域资源加载。✅ 推荐使用轻量本地服务器，例如：
# 使用 Python 快速启动（需安装 Python） python3 -m http.server 8000 # 然后访问 http://localhost:8000/index.html
- 避免无效事件监听：document.addEventListener("load", ...) 是错误写法（load 是 window 的事件，且拼写应为 "load"，但更推荐 DOMContentLoaded）；window.onload 虽可用，但会等待全部资源（图片、CSS）加载完毕，延迟更高。
- localStorage 可用性验证：可在控制台手动执行 localStorage.getItem('Name') 验证是否生效；也可在 Application → Storage → Local Storage 中实时查看键值。
? 进阶建议：使用常量管理键名，提升可维护性
// app.js
const STORAGE_KEYS = {
USER_NAME: 'Name',
};
document.addEventListener('DOMContentLoaded', () => {
localStorage.setItem(STORAGE_KEYS.USER_NAME, 'Jeff');
console.log('用户名称已存入：', localStorage.getItem(STORAGE_KEYS.USER_NAME));
});
总结：JavaScript 不是“可执行文件”，而是“文档脚本”。一切 DOM 操作、事件监听、localStorage 调用，都必须依托于一个被浏览器解析的 HTML 文档上下文。脱离 HTML，.js 文件只是文本——这是 Web 平台的设计本质，而非 bug 或配置问题。
