IndexDB 入門

引自: http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

一. 概述

　　現有的瀏覽器數據儲存方案，都不適合儲存大量數據：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: 'zhangsan@example.com' });

  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: 'lisi@example.com' });

  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 {
    // ...
  }
}