indexedDB 初体验

背景：vue 项目打开 A 页面时 须要将 A 页面的表格数据 存到缓存中 为了使 B 页面 获取到 A           页面的表格数据

         一开始存放到 sessionstorage 里，可是因为空间有限 缓存存满了

         因此改用 indexedDB

         关于 indexedDB 具体的介绍就不说了 能够自行百度

         接下来介绍一下我所用到的几个基本方法～

实现以下：

1.首先要 open indexedDB ，而后记住 每一个操做都是异步的 须要写在 onsuccess 方法里：

saveindexedDB (data, _case, _control) {
      let customerData = data
      let dbName = "deg"
      var request = indexedDB.open(dbName)
      request.onerror =  (e) => {}
      request.onupgradeneeded = (e) => {
        this.db = e.target.result
        var objectStore = this.db.createObjectStore("customers", {keyPath:'name', autoIncrement:true}) //  这里将 json 的 name 做为查询数据的 key
      }
      request.onsuccess = (e) => {
        console.log("success!");
        this.db = e.target.result
        this.updateDBvalue(data,_case, _control)
      }
      request.onerror = (e) => {
        console.log("error!");
      }
    },
复制代码

2.在这里我须要把表格数据存放到 customers 表里

由于每次打开 A 页面都会从新获取一下这个列表

因此

先判断一下数据库是否有这个表，有则修改，无则添加

updateDBvalue (data, _case, _control) {
      var tx = this.db.transaction('customers', 'readwrite');
      var store = tx.objectStore('customers');
      var req = store.get('deg' + _case + _control);
      req.onsuccess = (e) => {
          var degData = e.target.result;
          if (!degData) {
            store.add(data);
          } else {
            degData.value = data.value;
            store.put(degData);
          }
      }
    },
复制代码

3.那么 在 B 页面怎么 获取 到数据库里的列表 并进行下一步操做呢？

getdegList () {
      let _case = sessionStorage.getItem('_case')
      let _control = sessionStorage.getItem('_control')
      let dbName = "deg"
      var request = indexedDB.open(dbName)
      request.onerror =  (e) => {}
      request.onupgradeneeded = (e) => {
        this.db = e.target.result
        var objectStore = this.db.createObjectStore("customers", {keyPath:'name', autoIncrement:true})
      }
      request.onsuccess = (e) => {
        console.log("success!");
        this.db = e.target.result
        this.setDeg(_case, _control)
      }
      request.onerror = (e) => {
        console.log("error!");
      }
    },
    setDeg (_case, _control) {
      var tx = this.db.transaction('customers', 'readwrite')
      var store = tx.objectStore('customers')
      var req = store.get('deg' + _case + _control)  // 获取的就是 列表json 的 name key
      req.onsuccess = (e) => {
        this.deg = e.target.result.value
      }
    },
复制代码

ok～那么咱们能够看到浏览器端 indexedDB 数据存放的状况啦！

ps：

1.若是想要 clear customers 表，方法以下：

clear () {
      var tx = this.db.transaction("customers","readwrite")
      var store = tx.objectStore("customers")
      store.clear()
    },
复制代码

2.若是想要删除 customers 表里的其中一条数据，咱们能够根据 key 来进行删除

var tx = this.db.transaction('customers', 'readwrite')
var req = tx.objectStore('customers').delete('degAB')
复制代码

---------------------------------------

在这里重点说一下事务 transaction

在向 customers 表里添加数据时，我采用的是 先判断 db 里有没有这条数据 例如 degAB，无则添加，有则不添加。

在第一次从后台获取数据后在 then 方法里添加，报错 

Failed to execute 'add' on 'IDBObjectStore': The transaction has finished.复制代码

说明这时事务已经失效了，须要从新创建一个事务，才能进行添加！

若是没有 then 方法，能够直接用 store 添加

---------------------------------------

参考连接

参考连接2