瀏覽器裏的本地數據庫：IndexedDB

本文首發於政採雲前端團隊博客： 瀏覽器裏的本地數據庫：IndexedDB

IndexedDB 是什麼

在現代瀏覽器的本地存儲方案中，indexedDB 是一項重要的能力組成， 它是能夠在瀏覽器端使用的本地數據庫，能夠存儲大量數據，提供接口來查詢，還能夠創建索引，這些都是其餘存儲方案 Cookie 或者 LocalStorage 沒法提供的能力。單從數據庫類型來看，IndexedDB 是一個非關係型數據庫（不支持經過 SQL 語句操做）。

IndexedDB 的主要概念

IndexedDB 是一個比較複雜的 API 組合，學習它的過程就至關於學習它的各個對象 API 接口，包括如下這些( IDB 指當前操做的數據庫實例 )：

• 數據庫：IDBDatabase 對象
• 倉庫對象： IDBObjectStore 對象
• 索引：IDBIndex 對象
• 事務：IDBTransaction 對象
• 操做請求：IDBRequest 對象
• 指針：IDBCursor 對象
• 主鍵：IDBKeyRange 對象

在這些 API 中包含一些主要概念:

• 數據庫：數據庫是全部相關數據的基本容器。在同源策略（ 協議 + 域名 + 端口 ）的前提下，每一個域名下能夠新建任意多的數據庫。IndexedDB 中有版本概念，這就規定了同一時刻下只有一個版本的數據庫存在。
• 對象倉庫：對象倉庫 ObjectStore 在 IndexedDB 中對應的是 MYSQL 中的表 Table。
• 數據：對象倉庫中記錄的是若干條數據，數據只有主鍵和數據體兩個部分，主鍵不能重複，能夠爲自增的整數編號或者數據中指定的一個屬性。數據體能夠是任意數據類型，不限於對象。
• 索引：爲不一樣的屬性創建索引能夠加快數據的檢索。
• 事務：數據的 CURD (增刪查改) 都要經過事務來完成。

經過簡單的對比圖來理解 IndexedDB 的概念：

快速起步 IndexedDB

在介紹了 IndexedDB 的主要概念以後，能夠經過一個簡單實用的 CURD 例子來學習在平常開發中咱們是怎麼使用 IndexedDB 的，各個 API 細節往後能夠慢慢深刻學習。

1. 必不可少的瀏覽器支持檢查:

   if(!('indexedDB' in window)){
     console.log('當前瀏覽器支持 IndexedDB');
     return;
   } else {
     console.log('您的瀏覽器不支持 IndexedDB')
     // todo 建議升級或者更換其餘瀏覽器
   }

2. 鏈接數據庫

   // 數據庫實例
   let db;
   // 數據庫打開操做，第一個參數是數據庫名稱, 第二個參數是數據庫版本
   let DBRequestLink = window.indexedDB.open('dataBaseName', 1)
   DBRequestLink.onsuccess = function(event) {
     // 獲取數據庫實例
     db = DBRequestLink.result;
     // 其餘操做
   };
   // 這個監聽回調觸發於數據庫首次新建、open數據庫時傳遞新版本(只能比以前傳遞的版本高)
   DBRequestLink.onupgradeneeded = function(event) {};

3. 建立數據庫的主鍵和字段

   DBOpenRequest.onupgradeneeded = function(event) {
     let db = event.target.result;
   
     // 建立一個數據庫存儲對象，並指定主鍵
     let objectStore = db.createObjectStore('person', { 
       keyPath: 'id',
       autoIncrement: true
     });
   
     // 定義存儲對象的數據項 
     // 第一個參數是建立的索引名稱，能夠爲空
     // 第二個參數是索引使用的關鍵名稱，能夠爲空
     // 第三個參數是可選配置參數，能夠不傳，經常使用參數之一就是 unique ，表示該字段是否惟一，不能重複
   
     objectStore.createIndex('id', 'id', {
       unique: true    
     });
     objectStore.createIndex('name', 'name');
     objectStore.createIndex('age', 'age');
     objectStore.createIndex('sex', 'sex');
   };

   在上述操做中，咱們先定義了上文中提到的 IDBObjectStore 對象，並指定主鍵爲 id ，隨後又經過 createIndex 來建立字段。值得注意的是雖然建立了四個字段，但在 IndexedDb 中數據仍是分爲主鍵 id 和數據主體兩個部分，並不會像 MYSQL 中在 Table 中呈現四列。

4. 向數據庫中添加數據

   // 這裏的 db 就是第二步中的 db 對象， 
   // transaction api 的第一個參數是數據庫名稱，第二個參數是操做類型
   let newItem = {
     id: 1,
     name: '徐嘻嘻',
     age: 3,
     sex: 'female'
   };
   let transaction = db.transaction('dataBaseName', "readwrite");
   // 找到對應的存儲對象
   let objectStore = transaction.objectStore('person');
   // 添加到數據對象中, 傳入javascript對象
   objectStore.add(newItem);

   新建操做是在新建了一個 事務（ IDBTransaction 對象）的前提下完成的，傳入的數據不須要作任何轉換，能夠無縫傳入 Javascript 對象。

5. 修改數據庫中的數據

   // 這裏的 db 就是第二步中的 db 對象， 
   // 新建事務
   let transaction = db.transaction('dataBaseName', "readwrite");
   // 新數據主體
   let newRecord = {
     id: 1,
     name: '徐嘎嘎',
     age: 5,
     sex: 'male'
   };
   // 打開已經存儲的數據對象
   let objectStore = transaction.objectStore('person');
   // 獲取存儲的對應鍵的存儲對象, 傳入主鍵 id，值爲 1  
   let objectStoreRequest = objectStore.get(1);
   // 獲取成功後替換當前數據
   objectStoreRequest.onsuccess = function(event) {
     // 數據
     var record = objectStoreRequest.result;
     // 遍歷替換
     for (let key in newRecord) {
       if (typeof record[key] != 'undefined' || key !== 'id') {
         record[key] = newRecord[key];
       }
     }
     // 更新數據庫存儲數據             
     objectStore.put(record);
   };

   基本思路是建立一個事務，先找到想要修改的數據主體，而後在更新該數據主體內容。
   事務建立邏輯相同，並在建立以後調用事務的 get 和 put 操做。

6. 刪除數據庫中的數據

   // 這裏的 db 就是第二步中的 db 對象， 
   // 新建事務
   let transaction = db.transaction('dataBaseName', "readwrite");
   // 打開已經存儲的數據對象
   let objectStore = transaction.objectStore('person');
   // 獲取存儲的對應鍵的存儲對象, 傳入主鍵 id，值爲 1  
   let objectStoreRequest = objectStore.delete(1);

   調用 delete 接口，傳入指定的 id 便可。

能夠提效的類庫

​ 從上面的例子中能夠看出，每一次操做須要至少三行代碼才能完成，並且須要一直維護 DB 的對象引用，避免它被回收，這樣子開發代碼膨脹得太厲害，因此咱們在業務中引入其餘類庫來減小代碼量

• LocalForage

  • 能夠指定數據存儲方案，默認依次爲 IndexedDB、WebSQL、LocalStorage，意味着當前 IndexedDB 失效能夠有兜底措施。
  • API 簡化爲 CRUD ( getItem、removeItem、setItem、clear )
  • 庫大小爲 475b

• Pouchdb

  • API 簡化爲 put、get、remove，基於 promise 來檢查回收錯誤
  • 有較好的錯誤日誌機制， 如失敗，衝突等等，方便調試
  • 庫大小爲 255b

這兩個類庫比較符合咱們的開發要求，咱們當前使用的是 LocalForage。

結束語

在業務開發中，咱們都會碰到或多或少的本地存儲需求，本文介紹了其中一種存儲方案 IndexedDB 的簡單實踐。就咱們的應用場景來看，IndexedDB 的適用面仍是很廣的。考慮到 IE10 也能夠支持，把它實踐在實際項目中應該是沒有問題的。

文章內容較長，若是表達有誤在所不免，歡迎交流指出。

招賢納士

招人，前端，隸屬政採雲前端大團隊（ZooTeam），50 餘個小夥伴正等你加入一塊兒浪～ 若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變既定的節奏，將會是「5年工做時間3年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手參與一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給 ZooTeam@cai-inc.com