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：

如果想要 clear 表，方法如下：

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

参考链接

参考链接2

猜你喜欢