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事件回调中执行。这个回调仅在以下两种情况下触发：

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

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

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

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

例如，我们可以创建一个名为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数据库可能是一个更简单、更直观的解决方案。

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模式设计：动态对象存储区的挑战与替代方案的详细内容，更多请关注乐哥常识网其它相关文章！