前端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() // 继续下一个 } }