第十五部分:附录
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 反馈与贡献
如果你发现错误或希望补充内容,欢迎通过以下方式反馈。
—
本教程完。