indexedDB简易封装

大家好，欢迎来到IT知识分享网。

初学的时候写的demo,实际工作使用LOCALFORAGE库即可。

/*
indexedDB:
  讲道理是用在离线状态下储存大量的结构化数据
  操作风格就跟axios一样，是请求
  相比于cookie，这个的优势在于持久化，安全，不会占用带宽，而一般只是少量数据存储的话还是用cookie比较方便的

封装优化待做：
 1：配置参数过多，应该拆分函数返回，例如openDB().add(),openDB().get()这样
 2：储存的数据应当默认为数组类型，自动去多次储存，避免多次手动调用（原因：IndexedDB每次只能存储一条）

已考虑问题：
 1、版本问题：版本更新应该清空数据库-然后重建-当然不需要考虑也是可行的
  若不考虑版本号，那么onupgradeneeded只会在创建数据库时触发，此后不再触发
 2、代码层次不考虑修改数据库结构-不用考虑
 */
export default {
  tar: 123,
  // 初始化数据仓库
  initDB (init) {
    console.log(this)
    /* 数据库名-版本号-表-自定义索引[数组]-主键[默认id]     版本号一般是资讯那种版本，发生版本号更新时，应该清除数据库
      indexOptions = [
        { name: 'name', unique: false},
        { name: 'age', unique: true}
      ]
      不允许 name值重复(重复会报错)  unique 表示唯一性,重复的属性不会被存入
    */
    const { DB, version, form, indexOptions, keyPath = 'id' } = init
    // 检查兼容性
    const indexedDB = window.indexedDB ||
                  window.webkitIndexedDB ||
                  window.mozIndexedDB ||
                  window.msIndexedDB
    if (!indexedDB) {
      alert('你的浏览器不支持IndexedDB')
      return
    }
    // 打开一个数据库
    // 若要修改数据库结构，必须触发onupgradeneeded去修改
    const request = indexedDB.open(DB, version)
    // open一个不存在的数据库会触发
    // open一个超前版本会触发
    request.onupgradeneeded = function (event) { // event包含了新旧版本号，console查看
      let db = event.target.result
      let objectStore
      if (!db.objectStoreNames.contains(form)) { // 检查是否存在-表
        objectStore = db.createObjectStore(form, { keyPath: keyPath }) // 设置默认的主键为id,[数据必须拥有该属性]
      }
      if (indexOptions || indexOptions.length > 0) {
        indexOptions.map((item) => {
          objectStore.createIndex(item.name, item.name, { unique: item.unique })
        })
      }
    }
    // 发生版本更新时，由于自定义的索引会重复添加，报错，触发onerror
    request.onerror = (e) => {
      indexedDB.deleteDatabase(DB) // 删除数据库
      alert('版本更新，重置数据库，即将刷新页面') // 关闭警告框后进行页面刷新
      location.reload()
    }
    return {
      // 添加
      // 注意：如果传入的数据中，含有已存在的主键，则该次添加数据失败
      add (data) {
        // 考虑传入数据数组的情况
        if (data instanceof Array) {
          request.onsuccess = (event) => {
            const db = event.target.result
            for (let i = 0; i < data.length; i++) {
              db.transaction(form, 'readwrite').objectStore(form).add(data[i])
            }
          }
        } else { // 传入单个数据
          request.onsuccess = (event) => {
            const db = event.target.result
            db.transaction(form, 'readwrite').objectStore(form).add(data)
          }
        }
      },
      // 更新
      // 更新功能完全可以替代add
      put (data) {
        // 考虑传入数据数组的情况
        if (data instanceof Array) {
          request.onsuccess = (event) => {
            const db = event.target.result
            for (let i = 0; i < data.length; i++) {
              db.transaction(form, 'readwrite').objectStore(form).put(data[i])
            }
          }
        } else { // 传入单个数据
          request.onsuccess = (event) => {
            const db = event.target.result
            db.transaction(form, 'readwrite').objectStore(form).put(data)
          }
        }
      },
      // 删除
      del (index) {
        // 考虑传入数据数组的情况
        if (index instanceof Array) {
          request.onsuccess = (event) => {
            const db = event.target.result
            for (let i = 0; i < index.length; i++) {
              console.log(i)
              db.transaction(form, 'readwrite').objectStore(form).delete(index[i])
            }
          }
        } else { // 传入单个数据
          request.onsuccess = (event) => {
            const db = event.target.result
            db.transaction(form, 'readwrite').objectStore(form).delete(index)
          }
        }
      },
      // 根据主键获取数据
      get (index, callBack) {
        request.onsuccess = (event) => {
          const db = event.target.result
          db.transaction(form, 'readwrite').objectStore(form).get(index).onsuccess = (res) => {
            console.log(res)
            if (callBack) {
              callBack(res)
            }
          }
        }
      },
      // 根据自定义索引获取
      // 始终返回一条数据，即使索引对应的值有多个
      index (name, index, callBack) {
        request.onsuccess = (event) => {
          const db = event.target.result
          db.transaction(form, 'readwrite').objectStore(form).index(name).get(index).onsuccess = (res) => {
            console.log(res)
            if (callBack) {
              callBack(res)
            }
          }
        }
      },
      // 遍历
      each (index) {
        request.onsuccess = (event) => {
          const db = event.target.result
          db.transaction(form, 'readwrite').objectStore(form).openCursor().onsuccess = (event) => { // openCursor创建游标-指向第一项
            var cursor = event.target.result
            if (cursor && !(index && cursor.primaryKey >= index)) { // 必须判断时候存在，否则会多运行一次
              cursor.continue(3) // 游标继续往下 搜索，重复触发 onsuccess方法，如果到最后返回nul,指定参数则跳到对饮的index
              console.log(cursor) // direction、key、primaryKey、source、value
              // cursor.delete() // 删除当前游标下的数据-游标位置不变
              // cursor.update(obj) // 使用obj更新数据
              if (cursor.key === 2) {
                console.log(cursor)
              }
            }
          }
        }
      }
    }
  },
}