背景：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 新增
---------------------------------------