localStorage 在 file:// 协议下行为未定义，Chrome/Edge 可能保留数据而 Firefox 则为每个本地 HTML 文件分配独立存储空间，导致页面间无法共享；正确做法是通过本地服务器（如 http://localhost）提供服务，确保同源策略生效。
localstorage 在 `file://` 协议下行为未定义，chrome/edge 可能保留数据而 firefox 则为每个本地 html 文件分配独立存储空间，导致页面间无法共享；正确做法是通过本地服务器（如 `http://localhost`）提供服务，确保同源策略生效。
在前端开发中，localStorage 是实现页面间轻量级数据持久化传递的常用手段——只要两页同源（协议、域名、端口完全一致），即可通过 setItem() 和 getItem() 安全共享字符串化数据。然而，当开发者直接双击打开 .html 文件（即使用 file:// 协议）时，会遭遇一个隐蔽却普遍的兼容性陷阱：Firefox 严格遵循规范，为每个 file:// URL 分配隔离的 localStorage 实例；而 Chrome/Edge 出于历史或实现原因，可能表现出“意外”的跨文件共享行为，但这绝非标准，也不应被依赖。
? 问题根源：file:// 协议下的同源判定失效
根据 MDN 官方文档 明确说明：
For documents loaded from
file:URLs [...] the requirements forlocalStoragebehavior are undefined and may vary among different browsers.
这意味着：
-
file:///C:/project/file1.html与file:///C:/project/file2.html在规范层面不构成同源； - 浏览器可自由决定是否共享存储空间——Firefox 选择“严格隔离”，Edge 选择“宽松复用”，二者均合规，但结果不可移植。
你观察到的现象正是这一未定义行为的典型体现：
✅ Edge 中 file1.html 写入 → file2.html 成功读取
❌ Firefox 中 file1.html 写入 → file2.html 读得 null，localStorage.length === 0
✅ 正确解决方案：启用本地 HTTP 服务
唯一可靠、跨浏览器一致的方式，是让两个 HTML 文件通过 http:// 协议访问，且处于同一源下（例如均为 http://localhost:5173/file1.html 和 http://localhost:5173/file2.html）。
▶ 快速启动本地服务（零配置）
-
使用 VS Code + Live Server 插件：右键
file1.html→ “Open with Live Server”，自动打开http://127.0.0.1:5500/file1.html，此时file2.html同目录访问即为同源。 -
使用 Node.js 命令行（需安装 Node）：
npx http-server -p 8080 # 访问 http://localhost:8080/file1.html 和 http://localhost:8080/file2.html
-
Python（若已安装）：
python3 -m http.server 8000 # Python 3 # 或 python -m SimpleHTTPServer 8000 # Python 2
▶ 验证修复效果（推荐在新无痕窗口测试）
<!-- file1.html -->
<body onload="localStorage.setItem('test', JSON.stringify({a:1})); console.log('Saved')">
<a href="file2.html">Go to file2</a>
</body><!-- file2.html -->
<body onload="console.log('Loaded:', JSON.parse(localStorage.getItem('test')))">
<!-- 确保两者均通过 http://localhost:xxx/ 访问 -->
</body>✅ 此时无论 Edge、Firefox、Chrome，均可稳定输出 {a:1}。
⚠️ 补充注意事项
-
不要尝试绕过协议限制：诸如
--unsafely-treat-insecure-origin-as-secure启动参数仅用于调试，禁用同源策略存在严重安全风险，且不适用于生产或协作场景。 -
localStorage 仅支持字符串：务必对对象执行
JSON.stringify()存储、JSON.parse()读取，并建议包裹try...catch处理解析失败：function safeLoad(key) { try { const str = localStorage.getItem(key); return str ? JSON.parse(str) : null; } catch (e) { console.error(`Failed to parse localStorage item "${key}"`, e); return null; } } -
容量与异常处理：
localStorage容量约 5MB，超限时抛出QuotaExceededError，关键业务应捕获该异常并降级（如提示用户清理缓存或改用 IndexedDB）。
✅ 总结
localStorage 跨页面失效的根本原因并非代码错误，而是运行环境违反了 Web 存储的同源前提。file:// 协议不是 Web 应用的正确运行载体——它缺少服务器上下文、CORS 控制、MIME 类型协商等基础能力。将开发流程迁移到本地 HTTP 服务，不仅能解决 localStorage 共享问题，更能提前暴露真实部署环境中的路径、跨域、缓存等潜在问题，是专业前端开发的必备实践。
