前端数据库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)
  }