IndexedDB模式设计：动态对象存储区的挑战与替代方案-js教程-PHP中文网

IndexedDB模式设计：动态对象存储区的挑战与替代方案

本文探讨了在IndexedDB中动态添加对象存储区（Object Store）的挑战，特别是createObjectStore方法只能在onupgradeneeded回调中调用的限制。针对希望实现类似localStorage分区功能的需求，文章深入分析了直接在运行时更改数据库模式的局限性，并提出了两种推荐的替代方案：一是通过在单个对象存储区内使用数据字段进行逻辑分区，二是在必要时创建独立的IndexedDB数据库。这两种方法均能有效规避动态模式变更的问题，同时提供灵活的数据组织方式。

理解IndexedDB的模式变更机制

indexeddb是一个强大的客户端存储解决方案，它基于事务模型和对象存储区（object store）来组织数据。每个对象存储区可以被视为一个表，其中存储了键值对数据。在设计应用时，我们有时会遇到需要根据不同的“分区”或“命名空间”来存储数据的场景，例如实现一个支持多实例的异步localstorage。

开发者可能会自然而然地想到为每个分区创建一个新的对象存储区，就像这样：

class LocalStorageAsync {
  #database;
  #dbName = 'LocalStorageAsyncDB'; // 统一的数据库名称

  constructor(storeName = 'default') {
    this.#database = new Promise((resolve, reject) => {
      const openRequest = indexedDB.open(this.#dbName); // 不指定版本号，或使用一个固定的版本号

      openRequest.onupgradeneeded = (event) => {
        const db = event.target.result;
        // 尝试在这里创建storeName对应的对象存储区
        if (!db.objectStoreNames.contains(storeName)) {
          db.createObjectStore(storeName);
        }
      };

      openRequest.onsuccess = (event) => {
        const db = event.target.result;
        // 问题所在：db.createObjectStore()不能在这里调用
        // if (!db.objectStoreNames.contains(storeName)) {
        //   db.createObjectStore(storeName); // 错误！
        // }
        resolve(db);
      };

      openRequest.onerror = (event) => {
        console.error("IndexedDB open error:", event.target.errorCode);
        reject(new Error("Failed to open IndexedDB."));
      };
    });
    this.currentStoreName = storeName; // 保存当前实例对应的存储区名称
  }

  // ... getItem, setItem 等方法会使用 this.currentStoreName
}

登录后复制

然而，IndexedDB的设计规定，createObjectStore()、deleteObjectStore()以及createIndex()等模式（schema）修改操作，只能在onupgradeneeded事件回调中执行。这个回调仅在以下两种情况下触发：

首次创建数据库时。
当indexedDB.open()方法中请求的数据库版本号高于当前数据库的现有版本号时。

这意味着，我们无法在onsuccess回调中根据运行时条件动态地创建新的对象存储区。试图在onsuccess中通过某种“假想的”db.bumpVersion()方法来触发onupgradeneeded是不可能的，因为IndexedDB没有提供这样的API，且版本升级是一个严格的、有计划的数据库管理操作。

避免动态模式变更：核心原则

IndexedDB的模式（schema）应被视为相对静态的。频繁地在运行时修改数据库结构（例如，为每个新类别或新用户创建一个新的对象存储区）通常不是一个好的设计实践。这不仅会使数据库管理变得复杂，也可能导致性能问题。

当面临需要对数据进行逻辑分区时，我们应该考虑两种主要策略，它们都避免了在运行时动态修改数据库模式：

策略一：在单个对象存储区内进行数据逻辑分区

这是最推荐的方法。与其为每个分区创建单独的对象存储区，不如创建一个通用的对象存储区，并在存储的数据中添加一个字段来标识其所属的分区。

北极象沉浸式AI翻译

免费的北极象沉浸式AI翻译 - 带您走进沉浸式AI的双语对照体验

查看详情

例如，我们可以创建一个名为dataStore的通用对象存储区，所有键值对都存储在这里。为了区分不同分区的数据，我们在每个数据对象中添加一个partitionName字段。

class LocalStorageAsync {
  #dbPromise;
  #dbName = 'LocalStorageAsyncDB';
  #mainStoreName = 'dataStore'; // 所有键值对都存储在这个主存储区

  constructor(partitionName = 'default') {
    this.#dbPromise = new Promise((resolve, reject) => {
      // 数据库版本号设为1，如果数据库不存在或版本低于1，则触发onupgradeneeded
      const openRequest = indexedDB.open(this.#dbName, 1);

      openRequest.onupgradeneeded = (event) => {
        const db = event.target.result;
        if (!db.objectStoreNames.contains(this.#mainStoreName)) {
          // 只在第一次创建数据库时创建主存储区
          db.createObjectStore(this.#mainStoreName, { keyPath: 'id' });
          // 可选：为partitionName字段创建索引，以便高效查询特定分区的数据
          // const store = event.target.transaction.objectStore(this.#mainStoreName);
          // store.createIndex('partitionIndex', 'partitionName', { unique: false });
        }
      };

      openRequest.onsuccess = (event) => {
        resolve(event.target.result);
      };

      openRequest.onerror = (event) => {
        console.error("IndexedDB error:", event.target.errorCode);
        reject(new Error("Failed to open IndexedDB."));
      };
    });
    this.partitionName = partitionName; // 保存当前实例对应的分区名称
  }

  /**
   * 从指定分区获取键值。
   * 实际存储的键为：`${this.partitionName}_${key}`
   */
  async getItem(key) {
    const db = await this.#dbPromise;
    const transaction = db.transaction([this.#mainStoreName], 'readonly');
    const store = transaction.objectStore(this.#mainStoreName);
    const request = store.get(`${this.partitionName}_${key}`); // 使用组合ID

    return new Promise((resolve, reject) => {
      request.onsuccess = () => {
        resolve(request.result ? request.result.value : undefined);
      };
      request.onerror = (event) => {
        console.error("Get item error:", event.target.errorCode);
        reject(new Error("Failed to get item."));
      };
    });
  }

  /**
   * 将键值对存储到指定分区。
   * 存储的数据结构为：{ id: '分区名_键', value: '值', partitionName: '分区名' }
   */
  async setItem(key, value) {
    const db = await this.#dbPromise;
    const transaction = db.transaction([this.#mainStoreName], 'readwrite');
    const store = transaction.objectStore(this.#mainStoreName);
    // 存储一个包含分区信息的完整对象
    const data = { id: `${this.partitionName}_${key}`, value: value, partitionName: this.partitionName };

    const request = store.put(data); // put方法会插入或更新

    return new Promise((resolve, reject) => {
      request.onsuccess = () => {
        resolve();
      };
      request.onerror = (event) => {
        console.error("Set item error:", event.target.errorCode);
        reject(new Error("Failed to set item."));
      };
    });
  }

  // 示例：删除特定分区下的项
  async removeItem(key) {
    const db = await this.#dbPromise;
    const transaction = db.transaction([this.#mainStoreName], 'readwrite');
    const store = transaction.objectStore(this.#mainStoreName);
    const request = store.delete(`${this.partitionName}_${key}`);

    return new Promise((resolve, reject) => {
      request.onsuccess = () => resolve();
      request.onerror = (event) => reject(event.target.error);
    });
  }

  // 示例：清空特定分区（需要partitionIndex）
  // async clearPartition() {
  //   const db = await this.#dbPromise;
  //   const transaction = db.transaction([this.#mainStoreName], 'readwrite');
  //   const store = transaction.objectStore(this.#mainStoreName);
  //   const index = store.index('partitionIndex');
  //   const range = IDBKeyRange.only(this.partitionName);
  //   const request = index.openCursor(range);
  //
  //   return new Promise((resolve, reject) => {
  //     request.onsuccess = (event) => {
  //       const cursor = event.target.result;
  //       if (cursor) {
  //         cursor.delete();
  //         cursor.continue();
  //       } else {
  //         resolve();
  //       }
  //     };
  //     request.onerror = (event) => reject(event.target.error);
  //   });
  // }
}

// 使用示例
async function demonstratePartitionedStorage() {
  console.log('--- 使用逻辑分区存储 ---');
  const defaultStore = new LocalStorageAsync();
  const fooStore = new LocalStorageAsync('foo');
  const barStore = new LocalStorageAsync('bar');

  await defaultStore.setItem('userSettings', '{"theme": "dark"}');
  await fooStore.setItem('userSettings', '{"theme": "light"}'); // 相同的键，不同的分区
  await barStore.setItem('sessionToken', 'xyz123');

  console.log('Default Store userSettings:', await defaultStore.getItem('userSettings')); // Output: {"theme": "dark"}
  console.log('Foo Store userSettings:', await fooStore.getItem('userSettings'));     // Output: {"theme": "light"}
  console.log('Bar Store sessionToken:', await barStore.getItem('sessionToken'));     // Output: xyz123

  await defaultStore.removeItem('userSettings');
  console.log('Default Store userSettings after removal:', await defaultStore.getItem('userSettings')); // Output: undefined
}

demonstratePartitionedStorage();

登录后复制

优点：

数据库模式稳定，无需频繁升级版本。
所有数据集中在一个存储区，管理相对简单。
通过索引可以高效地查询特定分区的数据。

缺点：

如果分区数量非常庞大，单个对象存储区可能会变得非常大，影响某些操作的性能（尽管IndexedDB设计上能处理大量数据）。
清理特定分区的数据可能需要遍历或使用索引，不如直接删除一个对象存储区那么直接。

策略二：为每个分区创建独立的IndexedDB数据库

如果你的“分区”意味着完全隔离的数据集，并且它们之间几乎没有交互，那么为每个分区创建独立的IndexedDB数据库可能是一个更简单、更直观的解决方案。

class LocalStorageAsyncSeparateDB {
  #dbPromise;
  #baseDbName = 'LocalStorageAsync_'; // 数据库名称前缀

  constructor(partitionName = 'default') {
    const fullDbName = this.#baseDbName + partitionName; // 每个分区一个独立的数据库
    const mainStoreName = 'dataStore'; // 每个数据库内只有一个主存储区

    this.#dbPromise = new Promise((resolve, reject) => {
      const openRequest = indexedDB.open(fullDbName, 1); // 每个数据库独立管理版本

      openRequest.onupgradeneeded = (event) => {
        const db = event.target.result;
        if (!db.objectStoreNames.contains(mainStoreName)) {
          db.createObjectStore(mainStoreName, { keyPath: 'key' }); // 键就是key
        }
      };

      openRequest.onsuccess = (event) => {
        resolve(event.target.result);
      };

      openRequest.onerror = (event) => {
        console.error("IndexedDB open error:", event.target.errorCode);
        reject(new Error("Failed to open IndexedDB."));
      };
    });
    this.mainStoreName = mainStoreName;
  }

  async getItem(key) {
    const db = await this.#dbPromise;
    const transaction = db.transaction([this.mainStoreName], 'readonly');
    const store = transaction.objectStore(this.mainStoreName);
    const request = store.get(key);

    return new Promise((resolve, reject) => {
      request.onsuccess = () => {
        resolve(request.result ? request.result.value : undefined);
      };
      request.onerror = (event) => {
        console.error("Get item error:", event.target.errorCode);
        reject(new Error("Failed to get item."));
      };
    });
  }

  async setItem(key, value) {
    const db = await this.#dbPromise;
    const transaction = db.transaction([this.mainStoreName], 'readwrite');
    const store = transaction.objectStore(this.mainStoreName);
    const data = { key: key, value: value };

    const request = store.put(data);

    return new Promise((resolve, reject) => {
      request.onsuccess = () => {
        resolve();
      };
      request.onerror = (event) => {
        console.error("Set item error:", event.target.errorCode);
        reject(new Error("Failed to set item."));
      };
    });
  }

  async removeItem(key) {
    const db = await this.#dbPromise;
    const transaction = db.transaction([this.mainStoreName], 'readwrite');
    const store = transaction.objectStore(this.mainStoreName);
    const request = store.delete(key);

    return new Promise((resolve, reject) => {
      request.onsuccess = () => resolve();
      request.onerror = (event) => reject(event.target.error);
    });
  }

  // 清空整个分区（即删除整个数据库）
  async clearPartition() {
    const db = await this.#dbPromise;
    db.close(); // 必须先关闭数据库连接
    return new Promise((resolve, reject) => {
      const deleteRequest = indexedDB.deleteDatabase(this.#baseDbName + this.partitionName);
      deleteRequest.onsuccess = () => resolve();
      deleteRequest.onerror = (event) => reject(event.target.error);
    });
  }
}

// 使用示例
async function demonstrateSeparateDbStorage() {
  console.log('\n--- 使用独立数据库存储 ---');
  const defaultStore = new LocalStorageAsyncSeparateDB();
  const fooStore = new LocalStorageAsyncSeparateDB('foo');

  await defaultStore.setItem('config', '{"lang": "en"}');
  await fooStore.setItem('config', '{"lang": "fr"}'); // 相同的键，不同的数据库

  console.log('Default DB config:', await defaultStore.getItem('config')); // Output: {"lang": "en"}
  console.log('Foo DB config:', await fooStore.getItem('

登录后复制

以上就是IndexedDB模式设计：动态对象存储区的挑战与替代方案的详细内容，更多请关注php中文网其它相关文章！