共計 5973 個字符，預計需要花費 15 分鐘才能閱讀完成。

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

一、概述

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

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

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

IndexedDB 具有以下特點。

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

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

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

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

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

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

二、基本概念

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

數據庫：IDBDatabase 對象

對象倉庫：IDBObjectStore 對象

索引：IDBIndex 對象

事務：IDBTransaction 對象

操作請求：IDBRequest 對象

指針：IDBCursor 對象

主鍵集合：IDBKeyRange 對象

下面是一些主要的概念。

數據庫

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

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

對象倉庫

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

數據記錄

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

{id: 1, text: foo}

上面的對象中，id 屬性可以當作主鍵。

數據體可以是任意數據類型，不限于對象。

索引

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

事務

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

三、操作流程

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

打開數據庫

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

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

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

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

error 事件

error 事件表示打開數據庫失敗。

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

success 事件

success 事件表示成功打開數據庫。

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

這時，通過 request 對象的 result 屬性拿到數據庫對象。

upgradeneeded 事件

如果指定的版本號，大于數據庫的實際版本號，就會發生數據庫升級事件 upgradeneeded。

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

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

新建數據庫

新建數據庫與打開數據庫是同一個操作。如果指定的數據庫不存在，就會新建。不同之處在于，后續的操作主要在 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()的三個參數分別為索引名稱、索引所在的屬性、配置對象（說明該屬性是否包含重復的值）。

新增數據

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

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

讀取數據

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

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

遍歷數據

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

更新數據

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

刪除數據

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

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

使用索引

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

假定新建表格的時候，對 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 是怎樣入門的，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注丸趣 TV 行業資訊頻道。