重学 JS | 一文看懂浏览器数据库 IndexedDB 详细操作

let req,db;let version = 2/*  * 【第一：创建数据库或升级数据库】 * 发送打开'demo'数据库的请求，若不存在先创建，再打开，返回一个IDBOpenDBRequest请求实例 * req解答： * 原型链： req.__proto__ = IDBOpenDBRequest；IDBOpenDBRequest.__proto__ = IDBRequest * IndexedDB中的大多数其他异步函数执行都是相同的操作-返回带有onerror或onsuccess的IDBRequest对象 *  * version解答: * 数据库的版本,确定数据库模式-数据库中存储的对象及其结构. */ req = indexedDB.open('demo',version)req.onerror = function(e){	console.log('发生错误',e.target.errorCode)}// 成功req.onsuccess = function(e){  // 返回的是IDBDatabase数据库实例	db = e.target.result  /*    * 处理错误事件：   * 错误事件是冒泡的。错误事件以生成错误的请求为目标，然后事件冒泡到事务中，最后到数据库对象。   * 如果要避免向每个请求添加错误处理程序，则可以在数据库对象上添加单个错误处理程序。   */   db.onerror = function(event) {  	console.error("Database error: " + event.target.errorCode);	}}
/* * 【第二：监听数据库升级】 * 创建或更新数据库的版本将触发此事件 * 是唯一可以更改数据库结构的地方。在其中可以创建和删除对象存储以及构建和删除索引。 */ req.onupgradeneeded = function(e){	db = e.target.result   	/*   * 【第三：创建表】   * 为此数据库创建一个objectStore createObjectStore(存储名，参数对象)   * 可以理解为：创建一张user的表，主键是id，若无合适主键，可配置自增主键{autoIncrement: true    */  var objectStore   if(!db.objectStoreNames.contains('user')){    // 不存在user表，则创建user表，主键为id  	objectStore =db.createObjectStore("user", { keyPath: "id" });  }    /*   * 【第四：创建索引】   * (索引名称，索引所在的属性，索引配置对象)   */  objectStore.createIndex("id", "id", { unique: true });    /*   * 【第五：写入数据】   *  通过IDBTransaction.objectStore(name)方法，拿到 IDBObjectStore 对象，   *  再通过表格对象的add()方法，向表格写入一条记录   *  写入过程是异步的，通过监听success/error获取写入结果   */  var addUserReq = db.transaction(['user'],'readwrite')    .objectStore('user').add({id:1,name:'张三',age:18})  addUserReq.onsuccess = function(){console.log('user表写入数据成功')}  addUserReq.onerror = function(){console.log('user表写入数据失败')}    /*   *	【第六：读取数据】		   * 	读取数据也是通过事务完成   */  var readTransaction  = db.transaction(['user'])  var readUserObjStore = readTransaction.objectStore('user');   // 读取主键为1的数据  var readReq = readUserObjStore.get(1)  readReq.onerror = function(){console.log('读取数据失败')}  readReq.onsuccess = function(event){  	if (request.result) {        console.log('Name: ' + request.result.name);        console.log('Age: ' + request.result.age);      } else {        console.log('未获得数据记录');      }  }    /*   *	【第七：更新数据】   */   var putUserReq = db.transaction(['user'],'readwrite')    .objectStore('user').put({id:1,name:'张三',age:20})  putUserReq.onsuccess = function(){console.log('user表更新数据成功')}  putUserReq.onerror = function(){console.log('user表更新数据失败')}}
	/* 	 * 	【第八：删除数据】 	 */   var deleteUserReq = db.transaction(['user'],'readwrite')    .objectStore('user').delete(1)  deleteUserReq.onsuccess = function(){console.log('user表删除数据成功')}
	/*   *  【第九：遍历表格数据】   *  使用针对对象IDBCursor   */	 var cursorStore = db.transaction('user').objectStore('user')   cursorStore.openCursor().onsuccess = function(event){   		var cursor = event.target.result      if(cursor){      	console.log('id:'+cursor.key)        console.log('name:'+cursor.value.name)        console.log('age:'+cursor.value.age)        cursor.continue()      }else{console.log('无更多数据')}   }   /*    * 【第十：自定义索引】    */	 objectStore.createIndex('name', 'name', { unique: false });	 var transaction = db.transaction(['user'], 'readonly');	 var store = transaction.objectStore('user');	 var index = store.index('name');	 var request = index.get('张三');	 request.onsuccess = function (e) {  	  var result = e.target.result;      console.log('result',result)	   }

import isString from 'lodash/isString'
/** * @param dbName 数据库名称 * @param version 数据库版本 不传默认为1 * @param primary 数据库表主键 * @param indexList Array 数据库表的字段以及字段的配置,每项为Object，结构为{ name, keyPath, options } */class WebDB {  constructor({dbName, version, primary, indexList}) {    this.db = null    this.objectStore = null    this.request = null    this.primary = primary    this.indexList = indexList    this.version = version    this.intVersion = parseInt(version.replace(/\./g, ''))    this.dbName = dbName    try {      this.open(dbName, this.intVersion)    } catch (e) {      throw e    }  }
  open (dbName, version) {    const indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;    if (!indexedDB) {      console.error('你的浏览器不支持IndexedDB')    }    this.request = indexedDB.open(dbName, version)    this.request.onsuccess = this.openSuccess.bind(this)    this.request.onerror = this.openError.bind(this)    this.request.onupgradeneeded = this.onupgradeneeded.bind(this)  }
  onupgradeneeded (event) {    console.log('onupgradeneeded success!')    this.db = event.target.result    const names = this.db.objectStoreNames    if (names.length) {      for (let i = 0; i< names.length; i++) {        if (this.compareVersion(this.version, names[i]) !== 0) {          this.db.deleteObjectStore(names[i])        }      }    }    if (!names.contains(this.version)) {      this.objectStore = this.db.createObjectStore(this.version, { keyPath: this.primary })      this.indexList.forEach(index => {        const { name, keyPath, options } = index        this.objectStore.createIndex(name, keyPath, options)      })    }  }
  openSuccess (event) {    console.log('openSuccess success!')    this.db = event.target.result  }
  openError (event) {    console.error('数据库打开报错', event)    // 重新链接数据库    if (event.type === 'error' && event.target.error.name === 'VersionError') {      indexedDB.deleteDatabase(this.dbName);      this.open(this.dbName, this.intVersion)    }  }
  compareVersion (v1, v2) {    if (!v1 || !v2 || !isString(v1) || !isString(v2)) {      throw '版本参数错误'    }    const v1Arr = v1.split('.')    const v2Arr = v2.split('.')    if (v1 === v2) {      return 0    }    if (v1Arr.length === v2Arr.length) {      for (let i = 0; i< v1Arr.length; i++) {        if (+v1Arr[i] > +v2Arr[i]) {          return 1        } else if (+v1Arr[i] === +v2Arr[i]) {          continue        } else {          return -1        }      }    }    throw '版本参数错误'  }
  /**   * 添加记录   * @param record 结构与indexList 定下的index字段相呼应   * @return Promise   */  add (record) {    if (!record.key) throw '需要添加的key为必传字段!'    return new Promise((resolve, reject) => {      let request      try {        request = this.db.transaction([this.version], 'readwrite').objectStore(this.version).add(record)        request.onsuccess = function (event) {          resolve(event)        }
        request.onerror = function (event) {          console.error(`${record.key},数据写入失败`)          reject(event)        }      } catch (e) {        reject(e)      }    })  }
  /**   * 读取记录   * @param key 主键的值   * @return Promise   */  get (key) {    return new Promise((resolve, reject) => {      setTimeout(() => {        let request        try {          request = this.db.transaction([this.version]).objectStore(this.version).get(key)          request.onerror = function (event) {            console.error(`${key}, 数据读取失败!`)            reject(event)          }
          request.onsuccess = function (event) {            if (request.result) {              resolve(request.result)            } else {              reject(event)            }          }        } catch (e) {          reject(e)        }      }, 200)    })  }
  /**   * 更新记录   * @param record 结构与indexList 定下的index字段相呼应   * @return Promise   */  update (record) {    return new Promise((resolve, reject) => {      // const request = this.db.transaction([this.version], 'readwrite').objectStore(this.version).put(record)      let request      try {        request = this.db.transaction([this.version], 'readwrite').objectStore(this.version).put(record)        request.onsuccess = function (event) {          resolve(event)        };
        request.onerror = function (event) {          console.error(`${record.key},数据更新失败`)          reject(event)        }      } catch (e) {        reject(e)      }    })  }
  /**   * 删除记录   * @param key 主键的值   * @return Promise   */  remove (key) {    return new Promise((resolve, reject) => {      const request = this.db.transaction([this.version], 'readwrite').objectStore(this.version).delete(key);
      request.onsuccess = function (event) {        resolve(event)      }      request.onerror = function (event) {        console.error(`${key}, 数据删除失败`)        reject(event)      }    })  }}
export default WebDB