如何为同域下不同子应用分离localStorage？无需前缀方案

首先明确：浏览器的localStorage作用域绑定域名，和路径无关，没法直接让它隶属于mysite.com/app1或mysite.com/app2这类子路径，浏览器不会根据URL路径自动隔离同域名下的localStorage数据。

不过可以通过以下几种方案实现无感知的隔离，无需每次手动编写前缀逻辑：

1. 封装通用的带前缀localStorage工具类 #

只需要写一次封装代码，后续所有应用直接调用封装后的方法，自动为键名添加应用专属前缀，避免重复编写自定义逻辑。

示例代码：

// 生成带前缀的存储实例的通用函数
function createScopedStorage(prefix) {
  return {
    getItem(key) {
      return localStorage.getItem(`${prefix}_${key}`);
    },
    setItem(key, value) {
      localStorage.setItem(`${prefix}_${key}`, value);
    },
    removeItem(key) {
      localStorage.removeItem(`${prefix}_${key}`);
    },
    clear() {
      // 仅清除当前应用前缀的所有键，不影响其他应用
      Object.keys(localStorage).forEach(key => {
        if (key.startsWith(`${prefix}_`)) {
          localStorage.removeItem(key);
        }
      });
    }
  };
}

// app1初始化专属存储实例
const app1Storage = createScopedStorage('app1');
app1Storage.setItem('user', 'alice');

// app2初始化专属存储实例
const app2Storage = createScopedStorage('app2');
app2Storage.setItem('user', 'bob'); // 不会覆盖app1的user数据

2. 使用IndexedDB按应用分组存储 #

IndexedDB支持创建多个对象存储空间（Object Store），可以为每个应用单独创建一个存储空间，实现数据天然隔离，且存储容量比localStorage更大，适合复杂数据场景。

示例代码：

// 初始化对应应用的IndexedDB操作实例
function initAppStorage(appName) {
  return new Promise((resolve, reject) => {
    const dbRequest = indexedDB.open('SiteSharedDB', 1);
    
    dbRequest.onupgradeneeded = (e) => {
      const db = e.target.result;
      // 不存在对应应用的存储空间则创建
      if (!db.objectStoreNames.contains(appName)) {
        db.createObjectStore(appName);
      }
    };

    dbRequest.onsuccess = (e) => {
      const db = e.target.result;
      // 返回封装好的读写方法
      resolve({
        async setItem(key, value) {
          const transaction = db.transaction(appName, 'readwrite');
          const store = transaction.objectStore(appName);
          await store.put(value, key);
        },
        async getItem(key) {
          const transaction = db.transaction(appName, 'readonly');
          const store = transaction.objectStore(appName);
          return await store.get(key);
        }
      });
    };

    dbRequest.onerror = () => reject(dbRequest.error);
  });
}

// app1使用
initAppStorage('app1').then(storage => {
  storage.setItem('user', 'alice');
});

// app2使用
initAppStorage('app2').then(storage => {
  storage.setItem('user', 'bob');
});

3. 子域名隔离（彻底方案） #

如果需要完全的域名级隔离，可以将两个应用部署到不同的子域名下，比如app1.mysite.com和app2.mysite.com，此时两个应用的localStorage会被浏览器完全隔离，互不影响。但这个方案需要后端配置域名解析、服务器部署等支持，成本相对较高。

补充：SessionStorage的局限性 #

如果你的应用不需要跨标签页共享数据，可以考虑使用sessionStorage，它的作用域是单个标签页，不同标签页的sessionStorage数据天然隔离。但要注意：同一应用的不同标签页也无法共享数据，仅适合不需要跨标签页同步数据的场景。

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