阅读 167

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


关注下面的标签,发现更多相似文章
评论