Firefox中同本地域不同窗口无法访问localStorage的解决方法

Firefox对file://协议的页面采用了比Chrome更严格的同源策略：默认情况下，每个本地文件都被视为独立的源，即使位于同一目录下，也无法共享localStorage数据。以下是三种可行的解决办法：

办法一：修改Firefox配置，允许本地文件共享存储 #

1. 在Firefox地址栏输入about:config，按回车进入高级配置页面（提示风险时点击“接受风险并继续”）
2. 搜索配置项privacy.file_unique_origin，将其值从true改为false——这个配置控制是否将同一目录下的本地文件视为同源
3. 搜索dom.storage.enabled_for_file_urls，确保其值为true（默认通常是开启状态，若被修改过则手动开启）
4. 重启Firefox后，同目录下的file://页面即可正常共享localStorage数据

办法二：搭建本地HTTP服务器（推荐） #

通过HTTP协议访问本地文件，完全避开file协议的同源限制：

• 如果你有Node.js环境，全局安装http-server工具：

  npm install -g http-server
  

• 打开命令行，进入D:/Path目录，运行：

  http-server
  

• 用http://localhost:8080/window1.html和http://localhost:8080/window2.html访问页面，此时两个页面属于同源，localStorage数据可正常共享

办法三：通过窗口通信传递数据（无需改配置/搭服务器） #

如果不想修改浏览器配置或搭建服务器，可以通过postMessage在窗口间传递数据：

• window1.html 代码示例：

  // 先写入localStorage
  localStorage.setItem('sharedData', 'Hello from window1');
  // 打开window2并发送数据
  const win2 = window.open('window2.html');
  // 等待window2加载完成后发送消息
  win2.addEventListener('load', () => {
    win2.postMessage(localStorage.getItem('sharedData'), '*');
  });
  

• window2.html 代码示例：

  // 监听消息事件接收数据
  window.addEventListener('message', (event) => {
    if (event.data) {
      // 将接收到的数据存入自己的localStorage
      localStorage.setItem('sharedData', event.data);
      // 验证读取
      console.log('读取到的数据：', localStorage.getItem('sharedData'));
    }
  });
  

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