瀏覽器資料庫 IndexedDB 入門教程

阮一峰發表於2018-07-04
瀏覽器資料庫Index

一、概述

隨著瀏覽器的功能不斷增強，越來越多的網站開始考慮，將大量資料儲存在客戶端，這樣可以減少從伺服器獲取資料，直接從本地獲取資料。

現有的瀏覽器資料儲存方案，都不適合儲存大量資料：Cookie 的大小不超過4KB，且每次請求都會傳送回伺服器；LocalStorage 在 2.5MB 到 10MB 之間（各家瀏覽器不同），而且不提供搜尋功能，不能建立自定義的索引。所以，需要一種新的解決方案，這就是 IndexedDB 誕生的背景。

通俗地說，IndexedDB 就是瀏覽器提供的本地資料庫，它可以被網頁尾本建立和操作。IndexedDB 允許儲存大量資料，提供查詢介面，還能建立索引。這些都是 LocalStorage 所不具備的。就資料庫型別而言，IndexedDB 不屬於關係型資料庫（不支援 SQL 查詢語句），更接近 NoSQL 資料庫。

IndexedDB 具有以下特點。

（1）鍵值對儲存。 IndexedDB 內部採用物件倉庫（object store）存放資料。所有型別的資料都可以直接存入，包括 JavaScript 物件。物件倉庫中，資料以"鍵值對"的形式儲存，每一個資料記錄都有對應的主鍵，主鍵是獨一無二的，不能有重複，否則會丟擲一個錯誤。

（2）非同步。 IndexedDB 操作時不會鎖死瀏覽器，使用者依然可以進行其他操作，這與 LocalStorage 形成對比，後者的操作是同步的。非同步設計是為了防止大量資料的讀寫，拖慢網頁的表現。

（3）支援事務。 IndexedDB 支援事務（transaction），這意味著一系列操作步驟之中，只要有一步失敗，整個事務就都取消，資料庫回滾到事務發生之前的狀態，不存在只改寫一部分資料的情況。

（4）同源限制 IndexedDB 受到同源限制，每一個資料庫對應建立它的域名。網頁只能訪問自身域名下的資料庫，而不能訪問跨域的資料庫。

（5）儲存空間大 IndexedDB 的儲存空間比 LocalStorage 大得多，一般來說不少於 250MB，甚至沒有上限。

（6）支援二進位制儲存。 IndexedDB 不僅可以儲存字串，還可以儲存二進位制資料（ArrayBuffer 物件和 Blob 物件）。

二、基本概念

IndexedDB 是一個比較複雜的 API，涉及不少概念。它把不同的實體，抽象成一個個物件介面。學習這個 API，就是學習它的各種物件介面。

  • 資料庫：IDBDatabase 物件
  • 物件倉庫：IDBObjectStore 物件
  • 索引： IDBIndex 物件
  • 事務： IDBTransaction 物件
  • 操作請求：IDBRequest 物件
  • 指標： IDBCursor 物件
  • 主鍵集合：IDBKeyRange 物件

下面是一些主要的概念。

（1）資料庫

資料庫是一系列相關資料的容器。每個域名（嚴格的說，是協議 + 域名 + 埠）都可以新建任意多個資料庫。

IndexedDB 資料庫有版本的概念。同一個時刻，只能有一個版本的資料庫存在。如果要修改資料庫結構（新增或刪除表、索引或者主鍵），只能透過升級資料庫版本完成。

（2）物件倉庫

每個資料庫包含若干個物件倉庫（object store）。它類似於關係型資料庫的表格。

（3）資料記錄

物件倉庫儲存的是資料記錄。每條記錄類似於關係型資料庫的行，但是隻有主鍵和資料體兩部分。主鍵用來建立預設的索引，必須是不同的，否則會報錯。主鍵可以是資料記錄裡面的一個屬性，也可以指定為一個遞增的整數編號。


{ id: 1, text: 'foo' }

上面的物件中，id屬性可以當作主鍵。

資料體可以是任意資料型別，不限於物件。

（4）索引

為了加速資料的檢索，可以在物件倉庫裡面，為不同的屬性建立索引。

（5）事務

資料記錄的讀寫和刪改，都要透過事務完成。事務物件提供error、abort和complete三個事件，用來監聽操作結果。

三、操作流程

IndexedDB 資料庫的各種操作，一般是按照下面的流程進行的。這個部分只給出簡單的程式碼示例，用於快速上手，詳細的各個物件的 API 請看這裡。

3.1 開啟資料庫

使用 IndexedDB 的第一步是開啟資料庫，使用indexedDB.open()方法。


var request = window.indexedDB.open(databaseName, version);

這個方法接受兩個引數，第一個引數是字串，表示資料庫的名字。如果指定的資料庫不存在，就會新建資料庫。第二個引數是整數，表示資料庫的版本。如果省略，開啟已有資料庫時，預設為當前版本；新建資料庫時，預設為1。

indexedDB.open()方法返回一個 IDBRequest 物件。這個物件透過三種事件error、success、upgradeneeded，處理開啟資料庫的操作結果。

（1）error 事件

error事件表示開啟資料庫失敗。


request.onerror = function (event) {
  console.log('資料庫開啟報錯');
};

（2）success 事件

success事件表示成功開啟資料庫。


var db;

request.onsuccess = function (event) {
  db = request.result;
  console.log('資料庫開啟成功');
};

這時，透過request物件的result屬性拿到資料庫物件。

（3）upgradeneeded 事件

如果指定的版本號，大於資料庫的實際版本號，就會發生資料庫升級事件upgradeneeded。


var db;

request.onupgradeneeded = function (event) {
  db = event.target.result;
}

這時透過事件物件的target.result屬性，拿到資料庫例項。

3.2 新建資料庫

新建資料庫與開啟資料庫是同一個操作。如果指定的資料庫不存在，就會新建。不同之處在於，後續的操作主要在upgradeneeded事件的監聽函式里面完成，因為這時版本從無到有，所以會觸發這個事件。

通常，新建資料庫以後，第一件事是新建物件倉庫（即新建表）。


request.onupgradeneeded = function(event) {
  db = event.target.result;
  var objectStore = db.createObjectStore('person', { keyPath: 'id' });
}

上面程式碼中，資料庫新建成功以後，新增一張叫做person的表格，主鍵是id。

更好的寫法是先判斷一下，這張表格是否存在，如果不存在再新建。


request.onupgradeneeded = function (event) {
  db = event.target.result;
  var objectStore;
  if (!db.objectStoreNames.contains('person')) {
    objectStore = db.createObjectStore('person', { keyPath: 'id' });
  }
}

主鍵（key）是預設建立索引的屬性。比如，資料記錄是{ id: 1, name: '張三' }，那麼id屬性可以作為主鍵。主鍵也可以指定為下一層物件的屬性，比如{ foo: { bar: 'baz' } }的foo.bar也可以指定為主鍵。

如果資料記錄裡面沒有合適作為主鍵的屬性，那麼可以讓 IndexedDB 自動生成主鍵。


var objectStore = db.createObjectStore(
  'person',
  { autoIncrement: true }
);

上面程式碼中，指定主鍵為一個遞增的整數。

新建物件倉庫以後，下一步可以新建索引。


request.onupgradeneeded = function(event) {
  db = event.target.result;
  var objectStore = db.createObjectStore('person', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
  objectStore.createIndex('email', 'email', { unique: true });
}

上面程式碼中，IDBObject.createIndex()的三個引數分別為索引名稱、索引所在的屬性、配置物件（說明該屬性是否包含重複的值）。

3.3 新增資料

新增資料指的是向物件倉庫寫入資料記錄。這需要透過事務完成。


function add() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .add({ id: 1, name: '張三', age: 24, email: '[email protected]' });

  request.onsuccess = function (event) {
    console.log('資料寫入成功');
  };

  request.onerror = function (event) {
    console.log('資料寫入失敗');
  }
}

add();

上面程式碼中，寫入資料需要新建一個事務。新建時必須指定表格名稱和操作模式（"只讀"或"讀寫"）。新建事務以後，透過IDBTransaction.objectStore(name)方法，拿到 IDBObjectStore 物件，再透過表格物件的add()方法，向表格寫入一條記錄。

寫入操作是一個非同步操作，透過監聽連線物件的success事件和error事件，瞭解是否寫入成功。

3.4 讀取資料

讀取資料也是透過事務完成。


function read() {
   var transaction = db.transaction(['person']);
   var objectStore = transaction.objectStore('person');
   var request = objectStore.get(1);

   request.onerror = function(event) {
     console.log('事務失敗');
   };

   request.onsuccess = function( event) {
      if (request.result) {
        console.log('Name: ' + request.result.name);
        console.log('Age: ' + request.result.age);
        console.log('Email: ' + request.result.email);
      } else {
        console.log('未獲得資料記錄');
      }
   };
}

read();

上面程式碼中，objectStore.get()方法用於讀取資料，引數是主鍵的值。

3.5 遍歷資料

遍歷資料表格的所有記錄，要使用指標物件 IDBCursor。


function readAll() {
  var objectStore = db.transaction('person').objectStore('person');

   objectStore.openCursor().onsuccess = function (event) {
     var cursor = event.target.result;

     if (cursor) {
       console.log('Id: ' + cursor.key);
       console.log('Name: ' + cursor.value.name);
       console.log('Age: ' + cursor.value.age);
       console.log('Email: ' + cursor.value.email);
       cursor.continue();
    } else {
      console.log('沒有更多資料了！');
    }
  };
}

readAll();

上面程式碼中，新建指標物件的openCursor()方法是一個非同步操作，所以要監聽success事件。

3.6 更新資料

更新資料要使用IDBObject.put()方法。


function update() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .put({ id: 1, name: '李四', age: 35, email: '[email protected]' });

  request.onsuccess = function (event) {
    console.log('資料更新成功');
  };

  request.onerror = function (event) {
    console.log('資料更新失敗');
  }
}

update();

上面程式碼中，put()方法自動更新了主鍵為1的記錄。

3.7 刪除資料

IDBObjectStore.delete()方法用於刪除記錄。


function remove() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .delete(1);

  request.onsuccess = function (event) {
    console.log('資料刪除成功');
  };
}

remove();

3.8 使用索引

索引的意義在於，可以讓你搜尋任意欄位，也就是說從任意欄位拿到資料記錄。如果不建立索引，預設只能搜尋主鍵（即從主鍵取值）。

假定新建表格的時候，對name欄位建立了索引。


objectStore.createIndex('name', 'name', { unique: false });

現在，就可以從name找到對應的資料記錄了。


var transaction = db.transaction(['person'], 'readonly');
var store = transaction.objectStore('person');
var index = store.index('name');
var request = index.get('李四');

request.onsuccess = function (e) {
  var result = e.target.result;
  if (result) {
    // ...
  } else {
    // ...
  }
}

（完）

相關文章