indexdb.js封裝使用

1,封裝

// indexedDB.js，瀏覽器本地數據庫操作
import API from '@/api/api_database'
let indexdb = {
  // indexedDB兼容
  indexedDB: window.indexedDB || window.webkitindexedDB || window.msIndexedDB || mozIndexedDB,
  db: '',
  // initDB
  initDB () {
    let request = indexedDB.open('myDB')
    // err
    request.onerror = event => {
      console.log('數據庫打開/創建報錯', event)
    }
    // 如果指定的版本號，大於數據庫的實際版本號，就會發生數據庫升級事件upgradeneeded。
    // 升級后自動觸發success
    request.onupgradeneeded = event => {
      let db = event.target.result// 數據庫對象
      this.db = db
      // 建表 名為errorDatas,主鍵為task_id
      console.log(19, this)
      const store = this.db.createObjectStore('errorDatas', {
        // keyPath: 'id'
        keyPath: 'task_id'
      })
      // 新建索引名稱、索引所在的屬性、配置對象（說明該屬性是否允許有重復的值）
      store.createIndex('task_id', 'task_id', {
        unique: true
      })
      store.createIndex('file', 'file', {
        unique: false
      })
      console.log('數據庫升級')
    }
    // success
    request.onsuccess = event => {
      this.db = event.target.result
      console.log(36, this)
      console.log('數據庫打開/創建成功', event)
      this.getList()
    }
  },
  add (errorData, taskIds) {
    console.log(JSON.stringify(errorData))
    // 建立讀寫事務,向對象倉庫寫入數據記錄
    console.log(43, this)
    let request = this.db.transaction(['errorDatas'], 'readwrite').objectStore('errorDatas').add({
      id: new Date().getTime(),
      file: errorData,
      task_id: taskIds
    })
    request.onsuccess = event => {
      this.errorDatas = {}
      // 獲取數據列表
      this.getList()
    }
    request.onerror = event => {
    }
  },
  read (id, resarchId, scoketData) {
    var transaction = this.db.transaction(['errorDatas'])
    let objectStore = transaction.objectStore('errorDatas')
    console.log(333, objectStore)
    // let request = objectStore.getAll(objectStore.id)
    let request = objectStore.get(id)
    console.log(338, request)
    request.onerror = function (event) {
      console.log('獲取列表失敗')
    }
    let _this = this
    request.onsuccess = function (event) {
      if (request.result) {
        console.log('file: ', request.result)
        let fileList = request.result.file
        console.log('348', fileList)
        console.log(resarchId)
        let arrs = []
        for (let i = 0; i < fileList.length; i++) {
          var formData = new FormData()
          console.log('352', fileList[i])
          formData.append('file', fileList[i].file.raw)
          formData.append('research_group_id', resarchId)
          arrs.push(formData)
        }
        console.log('356', id)
        for (var i = 0; i < arrs.length; i++) {
          console.log('喲喲切克鬧' + i)
          API.sendUploadData(id, arrs[i]).then((res) => {
            if (res.code === 10000) {
              if (scoketData.scoket) {
                let scoketDatas = scoketData.scoket
                let success = JSON.parse(scoketDatas).data.transfer_success
                let totals = JSON.parse(scoketDatas).data.total
                if (success === totals) {
                  _this.clickDel(id)
                }
              }
            } else if (res.code === 10001) {
            }
          })
        }
      } else {
        console.log('未獲得數據記錄')
      }
    }
  },
  getList () {
    var transaction = this.db.transaction(['errorDatas'])
    let objectStore = transaction.objectStore('errorDatas')
    let list = []
    // 遍歷數據庫
    objectStore.openCursor().onsuccess = event => {
      let cursor = event.target.result
      if (cursor) {
        list.push(cursor.value)
        cursor.continue()
      } else {
        this.list = list
      }
    }
  },
  update () {
    let request = this.db.transaction(['errorDatas'], 'readwrite').objectStore('person').put({
      file: '李四'
    })
    request.onsuccess = event => {
      console.log('數據更新成功')
    }
    request.onerror = event => {
      console.log('數據更新失敗')
    }
  },
  clickDel (id) {
    var request = this.db.transaction(['errorDatas'], 'readwrite')
      .objectStore('errorDatas')
      .delete(id)
    request.onsuccess = event => {
      this.getList()
    }
    request.onerror = event => {
    }
  }
}
export default {
  indexdb
}

2,mian.js引入

import indexdb from './api/indexDB'
Vue.prototype.$indexDB = indexdb

3,在需要使用的地方調用方法

　　this.$indexDB.indexdb.initDB() // 創建數據庫　　

　　 this.$indexDB.indexdb.read(row.id, resarchId, this.scoketData)