indexedDB 使用

前言

講到前端存儲，可能會想到 cookie、localStorage、sessionStorage、web SQL database(已經涼了)、indexedDB，本文主要討論的就是indexedDB。

IndexedDB 就是瀏覽器提供的本地數據庫，它能夠被網頁腳本建立和操做。IndexedDB 容許儲存大量數據，提供查找接口，還能創建索引。這些都是 LocalStorage 所不具有的。

經過使用 indexedDB 來寫了一個demo，能夠經過訪問 個人codepen 查看源碼

對比

對比	cookie	localStorage	sessionStorage	indexedDB
存儲大小	4kb	5M	5M	很多於 250MB，甚至沒有上限
與服務器端通訊	每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題	僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊
生命週期	通常由服務器生成，可設置失效時間。若是在瀏覽器端生成Cookie，默認是關閉瀏覽器後失效	除非被清除，不然永久保存	僅在當前會話下有效，關閉頁面或瀏覽器後被清除	除非被清除，不然永久保存
使用場景	判斷用戶是否登陸	存儲一些內容穩定的資源。好比圖片內容豐富的電商網站會用它來存儲 Base64 格式的圖片字符串	存儲一些當前會話的信息，好比微博的 sessionStorage就主要是存儲你本次會話的瀏覽足跡	和 localStorage 用途相似: 1. 存儲量會更大 2. localStorage使用簡單字符串鍵值對在本地存儲數據，而indexedDB能夠存儲任意類型的值(適合鍵值對較多的數據，若是使用 localStorage 存儲每次都要寫入，寫出須要字符串化和對象化) 複製代碼

indexedDB 和 localStorage 兼容性對比

查看工具
👇localStorage

👇indexedDB

若是你想指定本身的瀏覽器是什麼內核，什麼版本的能夠經過瀏覽器版本檢測器查看

使用步驟

打開數據庫

var request = window.indexedDB.open(databaseName, version);
複製代碼

第一個參數是字符串，表示數據庫的名字。若是指定的數據庫不存在，就會新建數據庫。第二個參數是整數，表示數據庫的版本。若是省略，打開已有數據庫時，默認爲當前版本；新建數據庫時，默認爲1。

indexedDB.open()方法返回一個 IDBRequest 對象,這個對象經過三種事件error、success、upgradeneeded，處理打開數據庫的操做結果。

success 事件表示成功打開數據庫，經過 request.result 拿到數據庫對象的結果

upgradeneeded 事件 若是指定的版本號，大於數據庫的實際版本號，就會發生數據庫升級事件upgradeneeded，首次新建數據庫也會觸發這個事件

打開數據庫重點 :

1. 拿到數據庫對象的結果，若是已經存在

新建數據庫

新建對象倉庫（即新建表）,指定表名，指定id做爲主鍵

request.onupgradeneeded = function(event) {
  db = event.target.result;
  var objectStore = db.createObjectStore('person', { keyPath: 'id' ,autoIncrement:true});
}
複製代碼

db.objectStoreNames.contains('person') 能夠判斷表是否已經存在，若是不存在去建立一張新表

新建索引：objectStore.createIndex('address','address') 索引名稱，索引所在的屬性

建立數據庫的重點：

1. 新建對象倉庫,至關於表的概念
2. 經過對象倉庫來新建索引

增數據 objectStore.add

新建一個事務。新建時必須指定表格名稱和操做模式（「只讀」或「讀寫」）。事務的概念很是重要，增刪改查的功能都是基於事務來執行的

let transaction = db.transaction('project','readwrite')
let objectStore = transaction.objectStore('project')
let request = objectStore.add(params)
request.onsuccess = function(event){
    let result = event.target.result
}
複製代碼

經過事務 transaction.objectStore('project')方法拿到指定對象倉庫(表對象)，再經過表對象的 add 方法向表格寫入一條數據。

重點：

1. 新建一個事務的概念，任何增刪改查的操做以前都須要新建事務
2. 拿到對象倉庫(表對象)，而後經過表對象的 add 方法添加數據。
3. 寫入數據是異步的過程，表對象操做後會返回一個request對象,能夠request對象上的 success,error 事件來監聽操做是否成功

刪 objectStore.delete

都要 新建事務，因此能夠將公共的邏輯抽離出來

const getObjectStore = (db,databaseName)=> {
  return new Promise(resolve=>{
    const objectStore = db.transaction([databaseName], "readwrite").objectStore(databaseName)
    resolve(objectStore)
  })
}
複製代碼

// 經過id刪除對應數據
    let objectStore = getObjectStore(db,'project');
    const objectStoreRequest = objectStore.delete(id);
    // 刪除成功後
    objectStoreRequest.onsuccess = function() {
        resolve('已刪除')
    };
複製代碼

查 objectStore.get

let objectStore = getObejectStore(db,'project')
let request = objectStore.get(id)
request.onsuccess = function(event){
    // 獲取到當前數據
    const record = request.result
}
複製代碼

改 objectStore.put

let objectStore = getObejectStore(db,'project')
let request = objectStore.get(id)
request.onsuccess = function(event){
    // 獲取到當前數據
    const record = request.result
    // 更新數據庫中存儲數據
    // 須要保持原來數據的指針，因此不採用直接賦值的方式
    objectStore.put(Object.assign(record,{newKey1:value1})
}
複製代碼

結尾

上面只介紹了最基礎的增刪改查的功能，其實 indexedDB是一個比較複雜的 API，涉及很多概念。想了解更多內容，能夠查看我下面推薦連接，也能夠看個人 codepen源碼實例

參考： IndexedDB API