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

1. 首次创建数据库时。
2. 当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('