为何Firefox中window.localStorage跨HTML页面无法保存对象？

原因分析 #

• Firefox对file://协议的本地文件执行严格的同源策略：每个本地文件都会被当作独立的源，哪怕在同一目录下，file1.html和file2.html的localStorage存储空间也是相互隔离的，所以file2.html读取不到file1.html存入的数据。
• Edge对本地文件的同源策略限制更宽松，允许同目录下的本地文件共享同一localStorage空间，因此能正常读取数据。

解决方法 #

方法一：通过本地服务器运行文件（推荐） #

将两个HTML文件部署到本地服务器，比如：

• 使用Python启动简易服务器：

  # Python 3
  python -m http.server 8000
  

• 或者用Node.js的http-server工具：

  # 先安装http-server
  npm install -g http-server
  # 启动服务器
  http-server
  

之后通过http://localhost:8000/file1.html和http://localhost:8000/file2.html访问文件，此时两个文件属于同一源，localStorage数据可以正常共享。

方法二：修改Firefox配置（仅适合本地测试） #

在Firefox地址栏输入about:config，找到privacy.file_unique_origin配置项，将其值改为false。修改后，Firefox会将同一目录下的本地文件视为同源，即可共享localStorage。注意该设置会降低浏览器的安全性，测试完成后建议改回默认值。

内容的提问来源于stack exchange，提问作者user17911