# IndexedDB
3 min read
Table of Contents
IndexedDB 是个客户端存储键值存储的数据库。
概念
- 仓库 Store：IndexedDB 没有表，只有仓库。
- 索引 Index: 索引方便快速筛选。
- 游标 Cursor: 用于查询满足条件的数据。
- 事务 Transaction：对数据库进行操作失败的话会回滚，保证数据的一致性。
打开
开数据库，若没有则会自动创建。
const request = window.indexedDB.open('MyDatabase', 3)request.onsuccess = (event) => { // 保存 IDBDatabase 接口 const db = event.target.result}request.onerror = (event) => {}request.onupgradeneeded = (event) => {}构建
createObjectStore 第一个参数代表创建仓库名称，第二个为对象。
// 省略打开request.onupgradeneeded = (event) => { const db = event.target.result // 仓库 const objectStore = db.createObjectStore('customers', { keyPath: 'ssn' }) // 索引 objectStore.createIndex('name', 'name', { unique: false })}插入/删除/查询/更新数据
插入操作基于事务，执行插入操作之前需要创建事务
// 创建事务const transaction = db.transaction(['customers'], 'readwrite')
transaction.oncomplete = (event) => {}transaction.onerror = (event) => {}
const objectStore = transaction.objectStore('customers')
const request = objectStore.add({ ssn: '4-4', name: 'Bill' })
const request = objectStore.get('4-4')
const request = objectStore.delete('4-4')
const request = objectStore.put({ ssn: '4-4', name: 'John' })游标
使用游标可以遍历所有值，必须需要先进行判断游标的值是否为空。
const objectStore = db.transaction('customers').objectStore('customers')const objectStore = db.transaction(['customers']).objectStore('customers')
objectStore.openCursor().onsuccess = (event) => { const cursor = event.target.result // 判断必须要有 if (cursor) { console.log(`Name for SSN ${cursor.key} is ${cursor.value.name}`) cursor.continue() } else { console.log('No more entries!') }}索引
使用索引可以获得第一个符合条件的值
const index = objectStore.index('name')index.get('Jane').onsuccess = (event) => {}配合游标查询所有符合条件的值
const index = objectStore.index('name')index.openCursor().onsuccess = (event) => { const cursor = event.target.result if (cursor) { // ... cursor.continue() }}一个完整的示例：sandbox