Chrome与Firefox本地文件localStorage行为差异及调整咨询

问题1：行为差异的原因 #

核心在于同源策略的实现差异：

• Chrome/Edge 将所有file://协议的本地文件视为同一源，因此共享同一个localStorage存储空间，所有本地HTML文件都能访问彼此存储的数据。
• Firefox 则将每个本地文件的完整文件路径作为独立源，每个文件拥有专属的localStorage隔离空间，数据无法跨文件共享，修改文件路径或名称后，原存储空间无法被匹配，数据自然丢失。

问题2：是否为业内已知情况 #

是的，这是前端开发领域内广为人知的浏览器兼容性问题，大量开发人员在构建纯本地HTML应用、离线工具时都会遇到该差异，相关的浏览器文档、开发社区讨论中均有提及。

问题3：能否改变该行为 #

可以通过以下方式调整：

让Firefox适配Chrome的行为 #

在Firefox地址栏输入about:config，找到配置项security.fileuri.strict_origin_policy，将其值改为false。修改后，所有本地file://协议的HTML文件会被视为同源，localStorage数据可以跨文件共享。

让Chrome/Edge适配Firefox的行为 #

浏览器没有直接的内置设置，但可以通过以下方案实现类似效果：

• 手动为每个文件添加自定义隔离标识：存储数据时将当前文件的路径作为key的前缀，例如window.localStorage.setItem(${window.location.pathname}-key, 'value')，读取时对应使用带前缀的key，实现数据按文件隔离。
• 使用Electron等框架打包应用：将本地页面封装成桌面应用，通过框架提供的存储API实现更精细的隔离控制。

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