浏览器数据库IndexedDB初体验

最近在项目中尝试使用了一下IndexedDB，这篇仅仅是记录一下IndexedDB简单使用，详情可以查看 阮大神的文章。

业务场景：用户与其他人的聊天数据，我们用的是环信，没有使用环信历史消息API，而是采用indexDB把数据缓存到本地。

Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同）。 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB。而且IndexedDB是异步的，不会阻塞页面渲染。故采用IndexedDB。

使用代码如下（代码是在vue中的写法）：

//进入页面时 mounted中
    let _this = this;
    //用时间戳作为版本号 这样每次进入都可以触发onupgradeneeded
    let version = +new Date()
    //打开 messages 数据库 没有会去创建
    var request = window.indexedDB.open('messages', version)
    request.onsuccess = function(event) {
      let db = request.result
      _this.db = db
      //每次打开成功后获取对应人员的聊天数据
      _this.readData(staffUuid)
      console.log('数据库打开成功:', db)
    }
    request.onupgradeneeded = function(event) {
      console.log('upgrade')
      let db = event.target.result
      var objectStore
      //没有对象仓库时 创建对象仓库
      if (!db.objectStoreNames.contains('messages')) {
        //以id作为主键
        objectStore = db.createObjectStore('messages', { keyPath: 'id' })
      }
      _this.db = db
    }

//添加数据
    addData(data) {
      var transaction = this.db.transaction(['messages'], 'readwrite')
      transaction.oncomplete = function(event) {
        console.log('transaction success')
      }
      transaction.onerror = function(event) {
        console.log('transaction error: ' + transaction.error)
      }
      var objectStore = transaction.objectStore('messages')
      objectStore.put(data)
    },
    //读取数据
    readData(key) {
      let _this = this
      var transaction = this.db.transaction(['messages'])
      var objectStore = transaction.objectStore('messages')
      var request = objectStore.get(key)
      request.onerror = function(event) {
        console.log('事务失败')
      }
      request.onsuccess = function(event) {
        if (request.result) {
          const { value } = request.result
          _this.messages = JSON.parse(value)
          console.log(value, '消息数据获取成功')
        } else {
          _this.messages = []
          console.log('未获得数据记录')
        }
      }
    }

//发送消息成功时或者离开聊天页面调用添加数据
//以对方的id作为数据id
let data = {
   id: this.to_id,
   value: JSON.stringify(this.messages)
}
this.addData(data)