一、indexDB中的对象
数据库：IDBDatabase 对象
对象仓库：IDBObjectStore 对象
索引： IDBIndex 对象
事务： IDBTransaction 对象
操作请求：IDBRequest 对象
指针： IDBCursor 对象
主键集合：IDBKeyRange 对象
二、操作数据库
- 打开数据库
如果存在就打开，不存在就创建一个indexDB数据库
window.indexedDB.open(databaseName, version) // 数据库名称，版本号
- 创建表(创建对象仓库)
要在onupgradeneeded中创建表和索引，onupgradeneeded函数只有在数据库创建和数据库版本升级才会触发
const req = window.indexedDB.open('utm_db_product', 1) // 打开/创建数据库
req.onsuccess = function (event) { // 监听数据库创建成功事件
let db = event.target.result // 数据库对象
console.log('数据库打开成功')
}
req.onerror = function (error) {
console.log('数据库打开报错')
}
req.onupgradeneeded = function (event) {
// 数据库创建或升级的时候会触发
db = event.target.result
let storeName = 'product' // 表名
if (!db.objectStoreNames.contains(storeName)) { // 判断表是否存在
let objectStore = db.createObjectStore(storeName, { keyPath: 'pro_id',autoIncrement: true })
}
}
db.createObjectStore可以创建一张表，param1 表名，param2 配置对象，keyPath为主键，autoIncrement是自动生成一个自增主键，一般keyPath和autoIncrement只需要一个，两个都存在的话，自动生成一个自增主键，并且keyPath设置的字段必须要存在
- 创建索引
索引可以用来搜索，主键是默认的索引
req.onupgradeneeded = function (event) {
// 数据库创建或升级的时候会触发
db = event.target.result
let storeName = 'product' // 表名
if (!db.objectStoreNames.contains(storeName)) { // 判断表是否存在
let objectStore = db.createObjectStore(storeName, { keyPath: 'pro_id',autoIncrement: true })
objectStore.createIndex('name', 'name', { unique: false }) // 创建索引 可以让你搜索任意字段
}
}
给对象仓库(数据库表)创建索引，需要使用对象仓库的createIndex()函数,param1 索引名称，param2 索引所在属性，param3 配置对象 配置该属性是否是唯一的
param3 配置对象可配置属性
unique 唯一
multiEntry 对于有多个值的主键数组，每个值将在索引里面新建一个条目，否则主键数组对应一个条目
- 使用promise封装 open方法
/**
* 打开/创建数据库
* @param {object} dbName 数据库的名字
* @param {string} storeName 仓库名称
* @param {string} version 数据库的版本
* @param {Array} index 索引数组
* @return {object} 该函数会返回一个数据库实例
*/
const openDB = function (dbName, version, storeName, keyPath, index) {
return new Promise((resolve, reject) => {
// 兼容浏览器
let indexedDB =
window.indexedDB ||
window.mozIndexedDB ||
window.webkitIndexedDB ||
window.msIndexedDB
let db = null
const req = indexedDB.open(dbName, version)
// 操作成功
req.success = function () {
db = event.target.result // 数据库对象
resolve({code: 0, success: true, data: db, msg: '数据库打开成功!'})
}
// 操作失败
request.onerror = function (event) {
resolve({code: -1, success: false, data: null, msg: '数据库打开失败!'})
}
// 创建表和索引
request.onupgradeneeded = function (event) {
// 数据库创建或升级的时候会触发
db = event.target.result // 数据库对象
let objectStore
if (!db.objectStoreNames.contains(storeName)) {
objectStore = db.createObjectStore(storeName, { keyPath: keyPath || 'id',autoIncrement: true }) // 创建表
index.forEach(item => {
objectStore.createIndex(item, item, { unique: false }) // 创建索引
})
}
}
})
}
- 添加数据
需要通过事务对象IDBTransaction 来获取到对象仓库(表)，然后通过对象仓库的add()方法向表中添加数据
// 1. 打开数据库
const db = window.indexedDB.open('utm_db_product', 1)
// 2. 创建事务对象
const t = db.transaction(['product'], 'readwrite') // params1 表名， param2 读写模式
// 3. 拿到对象仓库
const objectStore = t.objectStore('product') // params 表名
// 4. 添加数据
const req = objectStore.add({pro_id: 123456, pro_name: '大白菜'}) // params 添加的数据
// 5. 操作成功
req.success = function (e) {}
// 6. 操作失败
req.success = function (e) {}
// 注：1234 可使用点操作符连写
const req = window.indexedDB.open('utm_db_product', 1)
.transaction(['product'], 'readwrite')
.objectStore('product')
.add({pro_id: 123456, pro_name: '大白菜'})
- 使用promise封装 add方法
/**
* 新增数据
* @param {object} db 数据库实例
* @param {string} storeName 仓库名称
* @param {string} data 数据
**/
const addData = function (db, storeName, data) {
return new Promise((resolve, reject) => {
let req = db
.transaction([storeName], 'readwrite')
.objectStore(storeName) // 仓库对象
.add(data)
// 操作成功
req.onsuccess = function (event) {
console.log('数据写入成功')
resolve({code: 0, success: true, data: null, msg: '数据写入成功!'})
}
// 操作失败
req.onerror = function (event) {
console.log('数据写入失败')
let data = {code: -1, success: false, data: null, msg: '数据写入失败!'}
resolve(data)
}
})
}
- 修改数据
使用对象仓库的put方法，修改表中数据
objectStore.put({id: 1, pro_id: 123456, pro_name: '胡萝卜'}) // param1 数据 param2 主键，可选
该方法自动更新了主键id为1的数据
- 使用promise封装 put方法
/**
* 更新数据
* @param {object} db 数据库实例
* @param {string} storeName 仓库名称
* @param {object} data 数据
*/
const updateData = function (db, storeName, data) {
return new Promise((resolve, reject) => {
const req = db
.transaction([storeName], 'readwrite')
.objectStore(storeName)
.put(data)
// 操作成功
req.onsuccess = function (event) {
console.log('数据更新成功')
resolve({code: 0, success: true, data: null, msg: '数据更新成功!'})
}
// 操作失败
req.onerror = function (event) {
console.log('数据更新失败')
let data = {code: -1, success: false, data: null, msg: '数据更新失败!'}
resolve(data)
}
})
}
- 删除数据
使用对象仓库的delete方法，删除表中数据
objectStore.delete(1) // param 主键的值
该方法会删除主键为1的数据
- 获取数据
使用对象仓库的get方法，获取对应主键的数据
objectStore.get(1) // param 主键的值
该方法会获取主键为1的数据
- 使用指针对象遍历所有数据
使用指针对象IDBCursor遍历数据
objectStore.openCursor().onsuccess = function () {
const cursor = e.target.result
if (cursor) {
console.log(cursor.key) // 当前遍历数据的主键
console.log(cursor.value) // 当前遍历的数据
cursor.continue() // 继续下一个
}
}
本文转自辰漪博客
