瀏覽器數(shù)據(jù)庫IndexedDB是怎樣入門的

本篇文章為大家展示了瀏覽器數(shù)據(jù)庫IndexedDB是怎樣入門的，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

一、概述

隨著瀏覽器的功能不斷增強，越來越多的網(wǎng)站開始考慮，將大量數(shù)據(jù)儲存在客戶端，這樣可以減少從服務(wù)器獲取數(shù)據(jù)，直接從本地獲取數(shù)據(jù)。

現(xiàn)有的瀏覽器數(shù)據(jù)儲存方案，都不適合儲存大量數(shù)據(jù)：Cookie 的大小不超過4KB，且每次請求都會發(fā)送回服務(wù)器；LocalStorage 在 2.5MB 到 10MB 之間（各家瀏覽器不同），而且不提供搜索功能，不能建立自定義的索引。所以，需要一種新的解決方案，這就是 IndexedDB 誕生的背景。

通俗地說，IndexedDB 就是瀏覽器提供的本地數(shù)據(jù)庫，它可以被網(wǎng)頁腳本創(chuàng)建和操作。IndexedDB 允許儲存大量數(shù)據(jù)，提供查找接口，還能建立索引。這些都是 LocalStorage 所不具備的。就數(shù)據(jù)庫類型而言，IndexedDB 不屬于關(guān)系型數(shù)據(jù)庫（不支持 SQL 查詢語句），更接近 NoSQL 數(shù)據(jù)庫。

IndexedDB 具有以下特點。

1. 鍵值對儲存。 IndexedDB 內(nèi)部采用對象倉庫（object store）存放數(shù)據(jù)。所有類型的數(shù)據(jù)都可以直接存入，包括 JavaScript 對象。對象倉庫中，數(shù)據(jù)以"鍵值對"的形式保存，每一個數(shù)據(jù)記錄都有對應(yīng)的主鍵，主鍵是***的，不能有重復(fù)，否則會拋出一個錯誤。

2. 異步。 IndexedDB 操作時不會鎖死瀏覽器，用戶依然可以進行其他操作，這與 LocalStorage 形成對比，后者的操作是同步的。異步設(shè)計是為了防止大量數(shù)據(jù)的讀寫，拖慢網(wǎng)頁的表現(xiàn)。

3. 支持事務(wù)。 IndexedDB 支持事務(wù)（transaction），這意味著一系列操作步驟之中，只要有一步失敗，整個事務(wù)就都取消，數(shù)據(jù)庫回滾到事務(wù)發(fā)生之前的狀態(tài)，不存在只改寫一部分數(shù)據(jù)的情況。

4. 同源限制 IndexedDB 受到同源限制，每一個數(shù)據(jù)庫對應(yīng)創(chuàng)建它的域名。網(wǎng)頁只能訪問自身域名下的數(shù)據(jù)庫，而不能訪問跨域的數(shù)據(jù)庫。

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

6. 支持二進制儲存。 IndexedDB 不僅可以儲存字符串，還可以儲存二進制數(shù)據(jù)（ArrayBuffer 對象和 Blob 對象）。

二、基本概念

IndexedDB 是一個比較復(fù)雜的 API，涉及不少概念。它把不同的實體，抽象成一個個對象接口。學(xué)習(xí)這個 API，就是學(xué)習(xí)它的各種對象接口。

• 數(shù)據(jù)庫：IDBDatabase 對象

• 對象倉庫：IDBObjectStore 對象

• 索引： IDBIndex 對象

• 事務(wù)： IDBTransaction 對象

• 操作請求：IDBRequest 對象

• 指針： IDBCursor 對象

• 主鍵集合：IDBKeyRange 對象

下面是一些主要的概念。

數(shù)據(jù)庫

數(shù)據(jù)庫是一系列相關(guān)數(shù)據(jù)的容器。每個域名（嚴格的說，是協(xié)議 + 域名 + 端口）都可以新建任意多個數(shù)據(jù)庫。

IndexedDB 數(shù)據(jù)庫有版本的概念。同一個時刻，只能有一個版本的數(shù)據(jù)庫存在。如果要修改數(shù)據(jù)庫結(jié)構(gòu)（新增或刪除表、索引或者主鍵），只能通過升級數(shù)據(jù)庫版本完成。

對象倉庫

每個數(shù)據(jù)庫包含若干個對象倉庫（object store）。它類似于關(guān)系型數(shù)據(jù)庫的表格。

數(shù)據(jù)記錄

對象倉庫保存的是數(shù)據(jù)記錄。每條記錄類似于關(guān)系型數(shù)據(jù)庫的行，但是只有主鍵和數(shù)據(jù)體兩部分。主鍵用來建立默認的索引，必須是不同的，否則會報錯。主鍵可以是數(shù)據(jù)記錄里面的一個屬性，也可以指定為一個遞增的整數(shù)編號。

{ id: 1, text: 'foo' }

上面的對象中，id屬性可以當(dāng)作主鍵。

數(shù)據(jù)體可以是任意數(shù)據(jù)類型，不限于對象。

索引

為了加速數(shù)據(jù)的檢索，可以在對象倉庫里面，為不同的屬性建立索引。

事務(wù)

數(shù)據(jù)記錄的讀寫和刪改，都要通過事務(wù)完成。事務(wù)對象提供error、abort和complete三個事件，用來監(jiān)聽操作結(jié)果。

三、操作流程

IndexedDB 數(shù)據(jù)庫的各種操作，一般是按照下面的流程進行的。這個部分只給出簡單的代碼示例，用于快速上手，詳細的各個對象的 API 請看這里。

打開數(shù)據(jù)庫

使用 IndexedDB 的***步是打開數(shù)據(jù)庫，使用indexedDB.open()方法。

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

這個方法接受兩個參數(shù)，***個參數(shù)是字符串，表示數(shù)據(jù)庫的名字。如果指定的數(shù)據(jù)庫不存在，就會新建數(shù)據(jù)庫。第二個參數(shù)是整數(shù)，表示數(shù)據(jù)庫的版本。如果省略，打開已有數(shù)據(jù)庫時，默認為當(dāng)前版本；新建數(shù)據(jù)庫時，默認為1。

indexedDB.open()方法返回一個 IDBRequest 對象。這個對象通過三種事件error、success、upgradeneeded，處理打開數(shù)據(jù)庫的操作結(jié)果。

error 事件

error事件表示打開數(shù)據(jù)庫失敗。

request.onerror = function (event) {    console.log('數(shù)據(jù)庫打開報錯');  };

success 事件

success事件表示成功打開數(shù)據(jù)庫。

var db;  request.onsuccess = function (event) {    db = request.result;    console.log('數(shù)據(jù)庫打開成功');  };

這時，通過request對象的result屬性拿到數(shù)據(jù)庫對象。

upgradeneeded 事件

如果指定的版本號，大于數(shù)據(jù)庫的實際版本號，就會發(fā)生數(shù)據(jù)庫升級事件upgradeneeded。

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

這時通過事件對象的target.result屬性，拿到數(shù)據(jù)庫實例。

新建數(shù)據(jù)庫

新建數(shù)據(jù)庫與打開數(shù)據(jù)庫是同一個操作。如果指定的數(shù)據(jù)庫不存在，就會新建。不同之處在于，后續(xù)的操作主要在upgradeneeded事件的監(jiān)聽函數(shù)里面完成，因為這時版本從無到有，所以會觸發(fā)這個事件。

通常，新建數(shù)據(jù)庫以后，***件事是新建對象倉庫（即新建表）。

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

上面代碼中，數(shù)據(jù)庫新建成功以后，新增一張叫做person的表格，主鍵是id。

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

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

主鍵（key）是默認建立索引的屬性。比如，數(shù)據(jù)記錄是{ id: 1, name: '張三' }，那么id屬性可以作為主鍵。主鍵也可以指定為下一層對象的屬性，比如{ foo: { bar: 'baz' } }的foo.bar也可以指定為主鍵。

如果數(shù)據(jù)記錄里面沒有合適作為主鍵的屬性，那么可以讓 IndexedDB 自動生成主鍵。

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

上面代碼中，指定主鍵為一個遞增的整數(shù)。

新建對象倉庫以后，下一步可以新建索引。

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()的三個參數(shù)分別為索引名稱、索引所在的屬性、配置對象（說明該屬性是否包含重復(fù)的值）。

新增數(shù)據(jù)

新增數(shù)據(jù)指的是向?qū)ο髠}庫寫入數(shù)據(jù)記錄。這需要通過事務(wù)完成。

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('數(shù)據(jù)寫入成功');    };     request.onerror = function (event) {      console.log('數(shù)據(jù)寫入失敗');    }  }    add();

上面代碼中，寫入數(shù)據(jù)需要新建一個事務(wù)。新建時必須指定表格名稱和操作模式（"只讀"或"讀寫"）。新建事務(wù)以后，通過IDBTransaction.objectStore(name)方法，拿到 IDBObjectStore 對象，再通過表格對象的add()方法，向表格寫入一條記錄。

寫入操作是一個異步操作，通過監(jiān)聽連接對象的success事件和error事件，了解是否寫入成功。

讀取數(shù)據(jù)

讀取數(shù)據(jù)也是通過事務(wù)完成。

function read() {     var transaction = db.transaction(['person']);     var objectStore = transaction.objectStore('person');     var request = objectStore.get(1);      request.onerror = function(event) {       console.log('事務(wù)失敗');     };      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('未獲得數(shù)據(jù)記錄');        }     };  }    read();

上面代碼中，objectStore.get()方法用于讀取數(shù)據(jù)，參數(shù)是主鍵的值。

遍歷數(shù)據(jù)

遍歷數(shù)據(jù)表格的所有記錄，要使用指針對象 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('沒有更多數(shù)據(jù)了！');      }    }; }   readAll();

上面代碼中，新建指針對象的openCursor()方法是一個異步操作，所以要監(jiān)聽success事件。

更新數(shù)據(jù)

更新數(shù)據(jù)要使用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('數(shù)據(jù)更新成功');    };     request.onerror = function (event) {      console.log('數(shù)據(jù)更新失敗');    }  }   update();

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

刪除數(shù)據(jù)

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

function remove() {    var request = db.transaction(['person'], 'readwrite')      .objectStore('person')      .delete(1);     request.onsuccess = function (event) {      console.log('數(shù)據(jù)刪除成功');    };  }   remove();

使用索引

索引的意義在于，可以讓你搜索任意字段，也就是說從任意字段拿到數(shù)據(jù)記錄。如果不建立索引，默認只能搜索主鍵（即從主鍵取值）。

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

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

現(xiàn)在，就可以從name找到對應(yīng)的數(shù)據(jù)記錄了。

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

上述內(nèi)容就是瀏覽器數(shù)據(jù)庫IndexedDB是怎樣入門的，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。