瀏覽器數據庫 IndexedDB

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

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

• IndexedDB 就是瀏覽器提供的本地數據庫，它可以被網頁腳本創建和操作。IndexedDB 允許儲存大量數據，提供查找接口，還能建立索引。
• IndexedDB 不屬于關系型數據庫（不支持 SQL 查詢語句），更接近 NoSQL 數據庫。

關系型數據庫和非關系型數據庫

關系型數據庫：對一致性要求非常嚴格，例如要寫入100個數據，前99個成功了，結果第100個不合法，此時事務會回滾到最初狀態。這樣保證事務結束和開始時候的存儲數據處于一致狀態。非常適合銀行這種對數據一致性要求非常高的場景。但是，這種一致性保證是犧牲了一部分性能的。

非關系型數據庫：不保證一致性但性能更優；數據結構不固定，非常容易擴展。

對比：，“關系型數據庫”穩重持久，“非關系型數據庫”迅速靈動。在前端領域，Web SQL Database是“關系型數據庫”，indexedDB是“非關系型數據庫”。

IndexedDB 具有以下特點

鍵值對儲存。 IndexedDB 內部采用對象倉庫（object store）存放數據。所有類型的數據都可以直接存入，包括 JavaScript 對象。對象倉庫中，數據以"鍵值對"的形式保存，每一個數據記錄都有對應的主鍵，主鍵是獨一無二的，不能有重復，否則會拋出一個錯誤。

異步。 IndexedDB 操作時不會鎖死瀏覽器，用戶依然可以進行其他操作，這與 LocalStorage 形成對比，后者的操作是同步的。異步設計是為了防止大量數據的讀寫，拖慢網頁的表現。

支持事務。 IndexedDB 支持事務（transaction），這意味著一系列操作步驟之中，只要有一步失敗，整個事務就都取消，數據庫回滾到事務發生之前的狀態，不存在只改寫一部分數據的情況。?每次操作數據庫都必須創建一個事務，2個參數（表名，是否可讀寫） db.transaction(storeName, ‘readwrite’)

同源限制 IndexedDB 受到同源限制，每一個數據庫對應創建它的域名。網頁只能訪問自身域名下的數據庫，而不能訪問跨域的數據庫。

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

支持二進制儲存。 IndexedDB 不僅可以儲存字符串，還可以儲存二進制數據（ArrayBuffer 對象和 Blob 對象）。

數據庫中的事務-transaction

數據庫的事務（英文為’transaction’），我們可以理解為對數據庫的操作，而且專指一個序列上的操作。舉個例子，銀行轉賬，一個賬號錢少了然后另一個賬號錢多了，這兩個操作要么都執行，要么都不執行。像這種操作就可以看成一個事務。事務的提出主要是為了保證并發情況下保持數據一致性。

關系型數據庫中的事務具有下面4個基本特征

原子性(Atomicity)：事務中的所有操作作為一個整體提交或回滾。

一致性(Consistemcy)：事物完成時，數據必須是一致的，以保證數據的無損。

隔離性(Isolation)：對數據進行修改的多個事務是彼此隔離的。

持久性(Durability)：事務完成之后，它對于系統的影響是永久的，該修改即使出現系統故障也將一直保留。

IndexedDB 基本概念

IndexedDB API

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

數據庫

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

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

對象倉庫

每個數據庫包含若干個對象倉庫（object store）。它類似于關系型數據庫的表格。

數據記錄

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

{ id: 1, text: 'foo' }

上面的對象中，id屬性可以當作主鍵。數據體可以是任意數據類型，不限于對象。

索引

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

事務

數據記錄的讀寫和刪改，都要通過事務完成。事務對象提供error、abort和complete三個事件，用來監聽操作結果。

indexedDb 數據庫創建

1、判斷兼容性

var indexedDB =window.indexedDB ||window.webkitIndexedDB ||window.mozIndexedDB || window.msIndexedDB; if (!indexedDB) {console.log('你的瀏覽器不支持IndexedDB'); }

1、打開數據庫

使用 IndexedDB 的第一步是打開數據庫，使用indexedDB.open()方法

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

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

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

request.onsuccess = function (event) {console.log('打開數據庫成功');};request.onerror = function (event) {console.log('打開數據庫失敗');}

open方法并不會返回一個DB對象，而是返回了一個IDBOpenDBRequest對象，我們通常用到的的DB對象在result屬性中：

除了result之外，還有其他的一些屬性：

• onerror: 請求失敗的回調函數句柄
• onsuccess:請求成功的回調函數句柄
• onupgradeneeded:請求數據庫版本變化句柄，當數據版本和數據庫當前版本號不一致時就會調用，但是當傳入的數據庫版本低于數據庫的版本號時將會報錯，也就是調用onerror

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 } );

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

3、 新增索引

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

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

4、 新增數據

新增數據指的是向對象倉庫寫入數據記錄。這需要通過事務完成。

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事件，了解是否寫入成功。

5、 讀取數據

讀取數據也是通過事務完成。

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()方法用于讀取數據，參數是主鍵的值

6、 遍歷數據

遍歷數據表格的所有記錄，要使用指針對象 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事件。

7、 更新數據

更新數據要使用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的記錄。

8、 刪除數據

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

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

9、 使用索引

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

假定新建表格的時候，對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 {// ...} }

總結

以上是生活随笔為你收集整理的浏览器数据库 IndexedDB的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。