indexedDB 初體驗

豬豬是天才發表於2018-07-27
Index

背景：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 資料存放的情況啦！

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


相關文章