const indexDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB class IndexDBCache { // 构造函数 constructor() { this._db = null //数据库 this._transaction = null //事务 this._request = null this._dbName = 'hxz' //数据库名 this._cacheTableName = 'tableOption' //表名 this._keyPath = 'tableIdName' this._dbversion = 1 //数据库版本 } // 初始化数据库 initDB() { return new Promise((resolve, reject) => { this._request = indexDB.open(this._dbName, this._dbversion) // 打开数据库 // 数据库初始化成功 this._request.onsuccess = (event) => { this._db = this._request.result resolve(event) } // 数据库初始化失败 this._request.onerror = (event) => { reject(event) } // 数据库初次创建或更新时会触发 this._request.onupgradeneeded = (event) => { let db = this._request.result if (!db.objectStoreNames.contains(this._cacheTableName)) { db.createObjectStore(this._cacheTableName, { keyPath: this._keyPath, // 设置主键 }) } resolve(event) } }) } /** * @description : 新增数据 * @param {Object} params { tableName, optionData } //两个参数 * @return {*} */ addData(params) { params.optionData = JSON.stringify(params.optionData, this.serialize) return new Promise((resolve, reject) => { let transaction = this._db.transaction(this._cacheTableName, 'readwrite') let store = transaction.objectStore(this._cacheTableName) let response = store.add(params) // 操作成功 response.onsuccess = (event) => { resolve(event) } // 操作失败 response.onerror = (event) => { reject(event) } }) } // 通过主键读取数据 getDataByKey(key) { return new Promise((resolve, reject) => { let transaction = this._db.transaction(this._cacheTableName) let objectStore = transaction.objectStore(this._cacheTableName) // 通过主键读取数据 let request = objectStore.get(key) // 操作成功 request.onsuccess = () => { if (request.result) { request.result.optionData = JSON.parse(request.result.optionData, this.deserialize) resolve(request.result) } else { reject("获取失败") } } // 操作失败 request.onerror = (event) => { reject(event) } }) } /** * @description : 更新数据 * @param {Object} params * @return {*} */ upDate(params) { params.optionData = JSON.stringify(params.optionData, this.serialize) return new Promise((resolve, reject) => { let transaction = this._db.transaction(this._cacheTableName, 'readwrite') let store = transaction.objectStore(this._cacheTableName) let response = store.put(params) // 操作成功 response.onsuccess = (event) => { resolve(event) } // 操作失败 response.onerror = (event) => { reject(event) } }) } // 获取所有数据 getAllDate() { return new Promise((resolve, reject) => { let transaction = this._db.transaction(this._cacheTableName, 'readwrite') let store = transaction.objectStore(this._cacheTableName) let response = store.getAll() // 操作成功 response.onsuccess = (event) => { console.log(event, 'adsklasjdkalsjdklasjdklasjkdls') resolve(event) } // 操作失败 response.onerror = (event) => { reject(event) } }) } // 使用string调用 JSON.stringify(obj, serialize) serialize(key, value) { if (typeof value === 'function') { return value.toString(); } return value; } // 使用parse调用 JSON.parse(obj, deserialize) deserialize(key, value) { if (value && typeof value === "string" && value.substr(0, 8) == "function") { var startBody = value.indexOf('{') + 1; var endBody = value.lastIndexOf('}'); var startArgs = value.indexOf('(') + 1; var endArgs = value.indexOf(')'); return new Function(value.substring(startArgs, endArgs), value.substring(startBody, endBody)); } return value; } // 删除indexDB deleteDB(id) { let transaction = this._db.transaction(this._cacheTableName, 'readwrite') let store = transaction.objectStore(this._cacheTableName) let request = store.delete(id) request.onsuccess = function() { console.log('数据删除成功') } request.onerror = function() { console.log('数据删除失败') } } } export default IndexDBCache