前端數據庫IndexDB的基本使用

為了避免前后端交互，有一些信息可以存儲到前端，之前主管他們說使用隨便一個文件讀寫就行，采用了xml讀寫程序，但是手機端不好實現，最后采用了indexDB很好的解決這個問題。

首先創建一個數據庫（*對象有的話indexDB機制是不會創建的

window.indexedDB.open('數據庫名稱'， '數據庫版本') 如果不設置的話就是默認為

var request = GLOBAL.db.transaction(['robotInfo'], 'readwrite').objectStore('robotInfo').delete(currentRowName)
      request.onsuccess = function(event) {
        if (this.currentRowName === GLOBAL.selectDefaultOneRetrn.robot_name) {
          var objectStore = GLOBAL.db.transaction(['defaultInfo'], 'readwrite').objectStore('defaultInfo')
          objectStore.delete('robotConfig')
        }
      }

　　

1

 

createObjectStore 新建一張表 keyPath 為主鍵 unique是否為NUll

 

 

 

// 初始化數據庫
    myDB() {
      const dbName = 'RobotDb'
      // indexedDB.deleteDatabase(dbName)
      this.request = window.indexedDB.open(dbName, 2)
      this.request.onerror = function(event) {
        console.log('數據庫打開報錯')
      }
      this.request.onsuccess = function(event) {
        GLOBAL.db = event.target.result
        console.log(GLOBAL.db)
        console.log('數據庫打開成功')
        store.commit('setOpenDbSuccessFlag', true)
      }
      this.request.onupgradeneeded = function(event) {
        console.log('onupgradeneeded')
        GLOBAL.db = event.target.result
        var objectStore = GLOBAL.db.createObjectStore('robotInfo', { keyPath: 'name' })
        objectStore.createIndex('IP1', 'IP1', { unique: false })
        objectStore.createIndex('port1', 'port1', { unique: false })
        objectStore.createIndex('IP2', 'IP2', { unique: false })
        objectStore.createIndex('port2', 'port2', { unique: false })
        objectStore.createIndex('IP3', 'IP3', { unique: false })
        objectStore.createIndex('port3', 'port3', { unique: false })
        objectStore.createIndex('IP4', 'IP4', { unique: false })
        objectStore.createIndex('port4', 'port4', { unique: false })
        objectStore.createIndex('videoKey', 'videoKey', { unique: false })
        objectStore.createIndex('serialNumber', 'serialNumber', { unique: false })
        objectStore.createIndex('talkID', 'talkID', { unique: false })
        objectStore.transaction.oncomplete = function(event) {
          // var customerObjectStore = db.transaction('customers', 'readwrite').objectStore('customers')
        }
        var defaultStore = GLOBAL.db.createObjectStore('defaultInfo', { keyPath: 'defaultConfigName' })
        defaultStore.createIndex('robot_name', 'robot_name', { unique: false })
        defaultStore.createIndex('IP1', 'IP1', { unique: false })
        defaultStore.createIndex('port1', 'port1', { unique: false })
        defaultStore.createIndex('IP2', 'IP2', { unique: false })
        defaultStore.createIndex('port2', 'port2', { unique: false })
        defaultStore.createIndex('IP3', 'IP3', { unique: false })
        defaultStore.createIndex('port3', 'port3', { unique: false })
        defaultStore.createIndex('IP4', 'IP4', { unique: false })
        defaultStore.createIndex('port4', 'port4', { unique: false })
        defaultStore.createIndex('videoKey', 'videoKey', { unique: false })
        defaultStore.createIndex('serialNumber', 'serialNumber', { unique: false })
        defaultStore.createIndex('talkID', 'talkID', { unique: false })
        defaultStore.transaction.oncomplete = function(event) {
        }
      }
    },

　　往數據庫表中添加一條數據

var objectStore = GLOBAL.db.transaction(['robotInfo'], 'readwrite').objectStore('robotInfo')
objectStore.add({ name: name, IP1: IP1,
        port1: port1, IP2: IP2, port2: port2,
        IP3: IP3, port3: port3, IP4: IP4, port4: port4,
        videoKey: videoKey,
        serialNumber: serialNumber, talkID: talkID })

　　修改數據

var objectStore = GLOBAL.db.transaction(['robotInfo'], 'readwrite').objectStore('robotInfo')
objectStore.put({ name: name, IP1: IP1, port1: port1,
        IP2: IP2, port2: port2,
        IP3: IP3, port3: port3,
        IP4: IP4, port4: port4,
        videoKey: videoKey,
        serialNumber: serialNumber, talkID: talkID })
        this.title = '修改設備'

　　刪除數據

var request = GLOBAL.db.transaction(['robotInfo'], 'readwrite').objectStore('robotInfo').delete(currentRowName)
      request.onsuccess = function(event) {
        if (this.currentRowName === GLOBAL.selectDefaultOneRetrn.robot_name) {
          var objectStore = GLOBAL.db.transaction(['defaultInfo'], 'readwrite').objectStore('defaultInfo')
          objectStore.delete('robotConfig')
        }
      }

　　查詢所有數據

var objectStore = GLOBAL.db.transaction(['robotInfo'], 'readwrite').objectStore('robotInfo')
objectStore.openCursor().onsuccess = function(event) {}

　　查詢單條數據

var objectStore = GLOBAL.db.transaction(['robotInfo'], 'readwrite').objectStore('robotInfo')
  var request = objectStore.get(name)
  request.onsuccess = function(event) {
    GLOBAL.selectOneRetrn = request.result
    store.commit('setSelectOneSuccessFlag', true)
  }