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