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 方法里添加，报错 

说明这时事务已经失效了，需要重新建立一个事务，才能进行添加！ 如果没有 then 方法，可以直接用 store 添加 ---------------------------------------

参考链接

参考链接2