====== 第十五部分:附录 ======
===== 15.1 API 参考 =====
===== 15.1.1 IDBFactory =====
// 打开数据库
IDBFactory.open(name, version)
// 删除数据库
IDBFactory.deleteDatabase(name)
// 比较两个键
IDBFactory.cmp(first, second)
===== 15.1.2 IDBDatabase =====
// 属性
db.name // 数据库名称
db.version // 数据库版本
db.objectStoreNames // 对象存储列表
// 方法
db.createObjectStore(name, options)
db.deleteObjectStore(name)
db.transaction(storeNames, mode)
db.close()
===== 15.1.3 IDBTransaction =====
// 属性
transaction.db // 关联的数据库
transaction.mode // 事务模式
transaction.objectStoreNames // 涉及的对象存储
// 方法
transaction.objectStore(name)
transaction.abort()
===== 15.1.4 IDBObjectStore =====
// 属性
store.name
store.keyPath
store.autoIncrement
store.indexNames
// 方法
store.add(value, key)
store.put(value, key)
store.delete(key)
store.get(key)
store.getAll(query, count)
store.getKey(key)
store.clear()
store.count(query)
store.openCursor(query, direction)
store.openKeyCursor(query, direction)
store.createIndex(name, keyPath, options)
store.deleteIndex(name)
store.index(name)
===== 15.2 浏览器兼容性 =====
^ 浏览器 ^ IndexedDB ^ IDBKeyRange ^ getAll ^ IndexedDB 2.0 ^
| Chrome 23+ | 是 | 是 | 是 | 是 |
| Firefox 16+ | 是 | 是 | 是 | 是 |
| Safari 10+ | 是 | 是 | 是 | 是 |
| Edge 12+ | 是 | 是 | 是 | 是 |
| IE 10+ | 部分 | 是 | 否 | 否 |
===== 15.3 推荐资源 =====
**文档**:
* MDN IndexedDB 文档
* W3C IndexedDB 规范
**库**:
* idb:轻量级 Promise 封装
* Dexie.js:功能丰富的 ORM 风格封装
* localForage:类似 LocalStorage 的 API
===== 15.4 术语表 =====
^ 术语 ^ 说明 ^
| 对象存储空间 | Object Store,存储数据的容器 |
| 索引 | Index,加速查询的数据结构 |
| 事务 | Transaction,原子性操作单元 |
| 游标 | Cursor,遍历数据的指针 |
| 主键 | Key,唯一标识记录的键 |
| 键路径 | KeyPath,指定主键属性路径 |
===== 15.5 完整示例代码 =====
// 完整的 IndexedDB 封装类
class IndexedDBManager {
constructor(dbName, version) {
this.dbName = dbName;
this.version = version;
this.db = null;
}
async open(schema) {
return new Promise((resolve, reject) => {
const request = indexedDB.open(this.dbName, this.version);
request.onupgradeneeded = (event) => {
const db = event.target.result;
schema(db, event.target.transaction);
};
request.onsuccess = (event) => {
this.db = event.target.result;
resolve(this.db);
};
request.onerror = (event) => reject(event.target.error);
});
}
async add(storeName, data) {
const tx = this.db.transaction([storeName], 'readwrite');
const store = tx.objectStore(storeName);
return new Promise((resolve, reject) => {
const request = store.add(data);
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}
async get(storeName, key) {
const tx = this.db.transaction([storeName], 'readonly');
const store = tx.objectStore(storeName);
return new Promise((resolve, reject) => {
const request = store.get(key);
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}
async put(storeName, data) {
const tx = this.db.transaction([storeName], 'readwrite');
const store = tx.objectStore(storeName);
return new Promise((resolve, reject) => {
const request = store.put(data);
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}
async delete(storeName, key) {
const tx = this.db.transaction([storeName], 'readwrite');
const store = tx.objectStore(storeName);
return new Promise((resolve, reject) => {
const request = store.delete(key);
request.onsuccess = () => resolve();
request.onerror = () => reject(request.error);
});
}
async getAll(storeName, query, count) {
const tx = this.db.transaction([storeName], 'readonly');
const store = tx.objectStore(storeName);
return new Promise((resolve, reject) => {
const request = store.getAll(query, count);
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}
async clear(storeName) {
const tx = this.db.transaction([storeName], 'readwrite');
const store = tx.objectStore(storeName);
return new Promise((resolve, reject) => {
const request = store.clear();
request.onsuccess = () => resolve();
request.onerror = () => reject(request.error);
});
}
close() {
if (this.db) {
this.db.close();
this.db = null;
}
}
}
// 使用示例
const dbManager = new IndexedDBManager('MyApp', 1);
await dbManager.open((db, tx) => {
if (!db.objectStoreNames.contains('users')) {
const store = db.createObjectStore('users', { keyPath: 'id' });
store.createIndex('emailIndex', 'email', { unique: true });
}
});
// CRUD 操作
const userId = await dbManager.add('users', {
id: 1,
name: '张三',
email: 'zhangsan@example.com'
});
const user = await dbManager.get('users', 1);
await dbManager.put('users', { ...user, age: 25 });
await dbManager.delete('users', 1);
dbManager.close();
===== 15.6 结语 =====
本教程从基础概念到高级应用,从理论到实战,全面介绍了 IndexedDB 的使用方法。希望读者通过本教程能够:
* 理解 IndexedDB 的设计思想和核心概念
* 熟练进行数据库设计和索引优化
* 处理复杂的事务和并发场景
* 构建高性能的离线 Web 应用
IndexedDB 是 Web 平台强大的客户端存储方案,随着 PWA 和离线应用的发展,它的重要性将越来越高。持续学习和实践,才能充分发挥其潜力。
===== 15.7 版本历史 =====
^ 版本 ^ 日期 ^ 更新内容 ^
| 1.0 | 2025-04 | 初始版本,覆盖全部 15 个章节 |
===== 15.8 反馈与贡献 =====
如果你发现错误或希望补充内容,欢迎通过以下方式反馈。
---
本教程完。