本文探讨了在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）应被视为相对静态的。频繁地在运行时修改数据库结构（例如，为每个新类别或新用户创建一个新的对象存储区）通常不是一个好的设计实践。这不仅会使数据库管理变得复杂，也可能导致性能问题。
当面临需要对数据进行逻辑分区时，我们应该考虑两种主要策略，它们都避免了在运行时动态修改数据库模式：
策略一：在单个对象存储区内进行数据逻辑分区
这是最推荐的方法。与其为每个分区创建单独的对象存储区，不如创建一个通用的对象存储区，并在存储的数据中添加一个字段来标识其所属的分区。
例如，我们可以创建一个名为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模式设计：动态对象存储区的挑战与替代方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1512387.html
微信扫一扫 
支付宝扫一扫 
