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