IndexedDB可存储结构化数据并支持索引查询，通过open创建数据库和对象仓库，使用事务进行增删改查，结合索引与游标实现复杂查询，并在离线时缓存操作待网络恢复后同步。
IndexedDB 是浏览器提供的一个强大的本地数据库系统，适合在离线状态下存储大量结构化数据，并支持索引和复杂查询。它不像 localStorage 那样只能存字符串，而是能处理对象、数组，甚至文件和二进制数据。
创建数据库与对象仓库
使用 IndexedDB 第一步是打开或创建一个数据库连接。如果数据库不存在，会自动创建；如果版本号更新，会触发升级操作。
示例代码：
let db;
const request = indexedDB.open('MyAppDB', 1);
request.onupgradeneeded = function(event) {
db = event.target.result;
if (!db.objectStoreNames.contains('users')) {
const store = db.createObjectStore('users', { keyPath: 'id' });
store.createIndex('email', 'email', { unique: true });
store.createIndex('age', 'age', { unique: false });
}
};
request.onsuccess = function(event) {
db = event.target.result;
};
request.onerror = function(event) {
console.error('DB open error:', event.target.error);
};
这里我们创建了一个名为 users 的对象仓库（object store），以 id 为主键，并为 email 和 age 字段建立了索引，便于后续高效查询。
添加与读取数据
通过事务机制可以安全地进行增删改查操作。写入数据使用 add 或 put 方法。
function addUser(user) {
const tx = db.transaction('users', 'readwrite');
const store = tx.objectStore('users');
store.add(user);
tx.oncomplete = () => console.log('User added');
}
addUser({ id: 1, name: 'Alice', email: 'alice@example.com', age: 28 });
function getUser(id) {
const tx = db.transaction('users', 'readonly');
const store = tx.objectStore('users');
const request = store.get(id);
request.onsuccess = () => console.log(request.result);
}
执行复杂查询
利用索引和游标（cursor）可以实现条件筛选、范围查询等复杂操作。
- 通过索引查找：比如查找所有年龄大于 25 的用户
function getUsersByAge(minAge) {
const tx = db.transaction('users', 'readonly');
const store = tx.objectStore('users');
const index = store.index('age');
const range = IDBKeyRange.lowerBound(minAge);
const results = [];
index.openCursor(range).onsuccess = function(event) {
const cursor = event.target.result;
if (cursor) {
results.push(cursor.value);
cursor.continue();
} else {
console.log('Filtered users:', results);
}
};
}
- 组合查询：可通过多个索引分别查询后在 JS 中合并结果，或使用游标配合条件判断实现多字段过滤
- 模糊搜索：对文本字段可结合全文检索库（如 FlexSearch）将关键词索引存在 IndexedDB 中提升性能
离线场景下的数据同步
在 PWA 或移动 Web 应用中，用户可能长时间离线。此时应将操作记录暂存到 IndexedDB，待网络恢复后同步至服务器。
- 定义一个 pendingActions 表，记录未完成的增删改操作
- 监听 online/offline 事件，自动触发同步逻辑
- 使用 Service Worker 拦截请求，在无网络时返回本地缓存数据
基本上就这些。IndexedDB 虽然 API 略显繁琐，但配合封装工具（如 Dexie.js）会大幅简化开发。关键是设计好对象仓库结构和索引策略，才能高效支撑复杂查询和离线需求。
