如何让不同子文件夹下的离线表单App拥有独立localStorage？

我明白你的痛点——当用file://协议打开本地HTML文件时，所有页面都会共享同一个localStorage存储空间，这就导致不同子文件夹里的应用副本会互相干扰数据。下面是几个实用的解决方案，按实现复杂度和适用性排序：

方案1：自定义带路径标识的存储键（最简单直接） #

核心思路是给每个存储项的键名加上当前文件所在路径的唯一标识，这样即使同属file://域名，不同文件夹的应用会使用不同的键来存储数据，自然实现隔离。

实现步骤： #

1. 获取当前HTML文件的完整路径：通过window.location.pathname可以拿到文件的本地路径（比如/Users/xxx/Documents/app-folder1/form.html）。
2. 生成唯一前缀：可以直接截取路径的文件夹部分，或者对路径进行哈希处理（避免路径过长导致键名冗余）。
3. 封装localStorage的读写方法，自动添加前缀。

代码示例： #

// 封装带路径前缀的localStorage工具类
class ScopedLocalStorage {
  constructor() {
    // 获取当前文件的文件夹路径作为标识
    const filePath = window.location.pathname;
    const folderPath = filePath.substring(0, filePath.lastIndexOf('/'));
    // 对路径进行哈希，生成短且唯一的前缀
    this.prefix = this.hashString(folderPath) + '_';
  }

  // 简单的字符串哈希函数
  hashString(str) {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
      hash = ((hash << 5) - hash) + str.charCodeAt(i);
      hash |= 0; // 转为32位整数
    }
    return Math.abs(hash).toString(16);
  }

  setItem(key, value) {
    const scopedKey = this.prefix + key;
    localStorage.setItem(scopedKey, JSON.stringify(value));
  }

  getItem(key) {
    const scopedKey = this.prefix + key;
    const value = localStorage.getItem(scopedKey);
    return value ? JSON.parse(value) : null;
  }

  removeItem(key) {
    const scopedKey = this.prefix + key;
    localStorage.removeItem(scopedKey);
  }
}

// 使用示例
const myStorage = new ScopedLocalStorage();
myStorage.setItem('formData', {name: 'test', email: 'test@example.com'});
console.log(myStorage.getItem('formData'));

优点： #

• 无需额外依赖，代码量小，完全兼容离线场景。
• 对现有代码改动小，只需要替换原有的localStorage调用为封装后的方法。

缺点： #

• 数据还是存在同一个file://的localStorage里，只是通过键名区分，若手动清理可能会一起删除，但日常使用足够。

方案2：使用IndexedDB实现路径分区存储 #

如果你的应用需要存储更复杂的数据（比如大量表单数据、二进制内容），可以用IndexedDB代替localStorage，它支持更灵活的数据结构，你可以直接把文件路径作为数据的分区字段，实现完全隔离。

实现思路： #

1. 创建一个IndexedDB数据库，设计对象仓库时包含folderPath和data两个字段。
2. 读写数据时，以当前文件的文件夹路径作为查询条件，确保只操作当前文件夹对应的数据。

代码示例（简化版）： #

// 封装IndexedDB工具类，按文件夹路径隔离数据
class FolderIndexedDB {
  constructor(dbName = 'FormStorage') {
    this.dbName = dbName;
    this.folderPath = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
  }

  // 打开数据库
  openDB() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, 1);
      request.onupgradeneeded = (e) => {
        const db = e.target.result;
        // 创建对象仓库，以folderPath和key作为联合索引
        if (!db.objectStoreNames.contains('formData')) {
          const store = db.createObjectStore('formData', {keyPath: ['folderPath', 'key']});
          store.createIndex('folderPathIdx', 'folderPath');
        }
      };
      request.onsuccess = (e) => resolve(e.target.result);
      request.onerror = (e) => reject(e.target.error);
    });
  }

  // 存储数据
  setItem(key, value) {
    return this.openDB().then(db => {
      const tx = db.transaction('formData', 'readwrite');
      const store = tx.objectStore('formData');
      store.put({folderPath: this.folderPath, key, value});
      return tx.complete;
    });
  }

  // 获取数据
  getItem(key) {
    return this.openDB().then(db => {
      const tx = db.transaction('formData', 'readonly');
      const store = tx.objectStore('formData');
      const request = store.get([this.folderPath, key]);
      return new Promise((resolve) => {
        request.onsuccess = () => resolve(request.result ? request.result.value : null);
      });
    });
  }
}

// 使用示例
const myDB = new FolderIndexedDB();
myDB.setItem('userForm', {name: 'Alice', age: 30}).then(() => {
  myDB.getItem('userForm').then(data => console.log(data));
});

优点： #

• 数据结构更清晰，真正实现按文件夹逻辑隔离。
• 支持更大的数据存储量（localStorage一般限制5MB，IndexedDB限制更大）。

缺点： #

• 代码复杂度比方案1高，需要理解IndexedDB的异步API。

方案3：使用本地HTTP服务器替代file://协议（彻底隔离） #

如果你的场景允许启动一个本地HTTP服务器，而不是直接打开HTML文件，那可以彻底解决file://的共享问题：

• 用Python的python -m http.server、Node.js的http-server或者其他轻量服务器，把根目录指向你的应用父文件夹。
• 不同子文件夹的应用会对应不同的URL路径（比如http://localhost:8000/folder1/form.html和http://localhost:8000/folder2/form.html）。不过这里要注意，localStorage还是按域名（localhost）共享，所以还是需要结合方案1的键前缀，或者你可以给每个文件夹配置不同的子域名（比如folder1.localhost），这样每个子域名的localStorage完全独立。

优点： #

• 更接近线上环境，避免file://协议的各种限制（比如跨域、API权限问题）。
• 子域名配置后可以实现完全隔离的localStorage。

缺点： #

• 需要用户启动本地服务器，不能直接双击HTML文件打开，离线使用的便捷性略有下降。

总结一下，如果追求最简单的实现，方案1是首选；如果需要更复杂的数据管理，方案2更合适；如果可以接受启动本地服务器，方案3能带来更标准的Web环境体验。

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