Firefox中file:///协议下window.name无法跨页面持久化的问题咨询

是否属于预期情况 #

是的，这属于浏览器实现差异导致的预期行为。

由于file://并非标准的HTTP/HTTPS协议，W3C对其同源策略、存储机制的规范并不明确，不同浏览器厂商可自行实现相关逻辑：

• Chrome 119中允许同一窗口内的file://资源共享window.name，即使文件位于不同文件夹；
• Firefox 119则将不同文件夹下的file://资源视为独立上下文，切换页面时会重置window.name，仅在同一页面刷新时保留。

而localStorage和sessionStorage在file://协议下的文件夹隔离规则，也是浏览器遵循“本地文件按目录隔离”的安全逻辑导致的，同样属于各厂商的共识实现。

可行解决办法 #

1. 统一文件目录结构（最简单妥协方案） #

将所有需要共享数据的页面放置在同一文件夹或其子文件夹下，此时localStorage和sessionStorage就能正常跨页面共享数据，无需额外代码修改。

2. 基于本地文件的手动数据同步（纯前端无依赖） #

通过将数据序列化后保存为本地JSON文件，切换页面时手动读取该文件实现数据共享，需要用户配合完成保存/读取操作：

保存数据到本地文件

function saveAppData(data) {
  const jsonStr = JSON.stringify(data);
  const blob = new Blob([jsonStr], { type: 'application/json' });
  const downloadLink = document.createElement('a');
  
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = 'app-shared-data.json';
  downloadLink.click();
  
  URL.revokeObjectURL(downloadLink.href); // 释放URL资源
}

// 使用示例：保存用户信息
saveAppData({ username: 'fffred', preferences: { theme: 'dark' } });

从本地文件读取数据

function loadAppData(fileInput, onLoaded) {
  fileInput.addEventListener('change', (e) => {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;
    
    const reader = new FileReader();
    reader.onload = (event) => {
      try {
        const parsedData = JSON.parse(event.target.result);
        onLoaded(parsedData);
      } catch (err) {
        console.error('读取数据失败：', err);
      }
    };
    reader.readAsText(selectedFile);
  });
}

// 使用示例：页面中添加<input type="file" id="data-loader">
const fileInput = document.getElementById('data-loader');
loadAppData(fileInput, (data) => {
  console.log('加载的共享数据：', data);
  // 此处将数据注入页面逻辑
});

3. 浏览器扩展（适合个人/内部使用场景） #

如果是个人使用或内部场景，可以开发一个简单的浏览器扩展：

• 扩展拥有独立的存储区域（如chrome.storage或browser.storage），不受file://协议的目录限制；
• 在file://页面中注入内容脚本，通过扩展的API读写共享数据。

这种方式无需用户手动操作文件，但需要安装自定义扩展。

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