如何隔离本地开发时各网站的localStorage命名空间？

这个问题我在本地并行开发多个项目时也踩过坑，除了你提到的改端口、给键名加前缀/后缀之外，还有几个更优雅的解决方案：

• 利用本地反向代理+自定义Hosts实现域名隔离
  这是我最常用的方法：先在本地hosts文件里把你的测试域名（比如domain.local、another.local）都指向127.0.0.1，然后用Nginx、Apache或者像Caddy这样的轻量工具做反向代理，给每个域名配置独立的server块，将请求转发到本地运行的5000端口服务。这样浏览器会把这些域名识别为完全独立的站点，LocalStorage自然就分开了，完全不需要修改业务代码，也不用换端口。

• 使用浏览器容器标签页功能
  现在主流浏览器都支持容器/会话隔离功能：比如Firefox的「多容器标签页」、Chrome的「会话盒（Session Box）」插件，你可以给每个站点分配一个独立的容器，即使它们用同一个端口访问，容器内的存储、Cookie都是完全隔离的。这个方法适合快速测试，不需要配置任何开发环境。

• 封装LocalStorage的代理层（无需手动加前缀）
  如果你不想改端口也不想用代理，可以写一个简单的LocalStorage封装工具，自动根据当前站点的唯一标识（比如页面的meta[name="app-id"]内容、或者项目的package.json里的name字段）给键名添加前缀。这样业务代码里还是正常调用localStorage.getItem('test')，但底层实际存储的键是类似domain_com_test的格式，完全对上层透明。示例代码大概是这样：

  const getAppId = () => document.querySelector('meta[name="app-id"]')?.content || window.location.hostname;
  const proxyStorage = {
    getItem(key) {
      return localStorage.getItem(`${getAppId()}_${key}`);
    },
    setItem(key, value) {
      localStorage.setItem(`${getAppId()}_${key}`, value);
    },
    removeItem(key) {
      localStorage.removeItem(`${getAppId()}_${key}`);
    }
  };
  

  之后业务里用proxyStorage代替原生的localStorage即可。

• 改用IndexedDB做持久化存储
  IndexedDB支持自定义数据库名称，你可以给每个站点创建独立的数据库，这样即使域名/端口相同，数据库之间也不会互相干扰。虽然IndexedDB的API比LocalStorage复杂一些，但现在有很多封装库可以让你用类似LocalStorage的API来操作IndexedDB，迁移成本很低。

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