前端indexDB数据库的使用

一、indexDB中的对象

数据库：IDBDatabase 对象

对象仓库：IDBObjectStore 对象

索引： IDBIndex 对象

事务： IDBTransaction 对象

操作请求：IDBRequest 对象

指针： IDBCursor 对象

主键集合：IDBKeyRange 对象

二、操作数据库

1. 打开数据库

如果存在就打开，不存在就创建一个indexDB数据库

window.indexedDB.open(databaseName, version)  // 数据库名称，版本号

2. 创建表(创建对象仓库)

要在onupgradeneeded中创建表和索引，onupgradeneeded函数只有在数据库创建和数据库版本升级才会触发

const req = window.indexDB.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设置的字段必须要存在

3. 创建索引

索引可以用来搜索，主键是默认的索引

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 对于有多个值的主键数组，每个值将在索引里面新建一个条目，否则主键数组对应一个条目

4. 使用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 }) // 创建索引
                })
            }
        }
    })
}

5. 添加数据

需要通过事务对象IDBTransaction 来获取到对象仓库(表)，然后通过对象仓库的add()方法向表中添加数据

// 1. 打开数据库
const db = window.indexDB.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.indexDB.open('utm_db_product', 1)
                           .transaction(['product'], 'readwrite')
                           .objectStore('product')
                           .add({pro_id: 123456, pro_name: '大白菜'})

6. 使用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)
    }
  })
}

7. 修改数据

使用对象仓库的put方法，修改表中数据

objectStore.put({id: 1, pro_id: 123456, pro_name: '胡萝卜'}) // param1 数据 param2 主键，可选

该方法自动更新了主键id为1的数据

8. 使用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)
        }
    })
}

9. 删除数据

使用对象仓库的delete方法，删除表中数据

objectStore.delete(1) // param 主键的值

该方法会删除主键为1的数据

10. 获取数据

使用对象仓库的get方法，获取对应主键的数据

objectStore.get(1) // param 主键的值

该方法会获取主键为1的数据

11. 使用指针对象遍历所有数据

使用指针对象IDBCursor遍历数据

objectStore.openCursor().onsuccess = function () {
   const cursor = e.target.result
   if (cursor) {
       console.log(cursor.key) // 当前遍历数据的主键
       console.log(cursor.value) // 当前遍历的数据
       cursor.continue() // 继续下一个
   }
}