一、概論

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

二、IndexedDB 特點

• 鍵值對存儲：IndexedDB 內部采用對象倉庫 （ object store ）存放數據。 所有類型的數據都可以直接存入，包括 JavaScaript 對象。對象倉庫中，數據以‘鍵值對’的形式保存，每一個數據記錄都有對應的主鍵，主鍵是獨一無二的，不能重復，否則會拋出一個錯誤，
• 異步：IndexedDB 操作時不會鎖死瀏覽器，用戶依然可以進行其他操作，這與 LocalStorage 形成對比，后者的操作時同步的。異步設計是為了防止大量的數據的讀寫，拖慢了網頁的表現。
• 支持事務：IndexedDB 支持事務（?transaction?）,這意味著一系列操作步驟之中，只要有一步失敗，整個事務就都會取消，數據庫回滾到事務發生之前的狀態，不存在只改寫一部分數據的情況。
• 同源限制：IndexedDB 受到同源限制，每一個數據庫對應創建它的域名。網頁只能訪問自身域名下的數據庫，而不能訪問跨域的數據庫。
• 存儲空間大：IndexedDB 的存儲空間比 LocalStorage 大得多，一般來說不少于 250MB , 甚至沒有上限。
• 支持二進制存儲。IndexedDB 不僅可以存儲字符串，還可以存儲二進制數據（ArrayBuffer 對象和 Blob 對象）。

三、打開數據庫

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

// databaseName 數據庫名, version數據庫版本 let request = window.indexeddDB.open(databaseName, version);

????????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 事件 （如果指定的版本號大于數據庫的實際版本號，就會發生數據庫升級事件）

var db;request.onupgradeneeded = function (event) {db = event.target.result; }// 這時通過事件對象的target.result屬性，拿到數據庫實例。

四、刪除數據庫

????indexedDB.deleteDatabase()方法用于刪除一個數據庫，參數為數據庫的名字。它會立刻返回一個?IDBOpenDBRequest?對象，然后對數據庫執行異步刪除。刪除操作的結果會通過事件通知，IDBOpenDBRequest對象可以監聽以下事件。

let DBDeleteRequest = window.indexedDB.deleteDatabase('demo');DBDeleteRequest.onerror = function (event) {console.log('Error'); };DBDeleteRequest.onsuccess = function (event) {console.log('success'); };// 調用deleteDatabase()方法以后，當前數據庫的其他已經打開的連接都會接收到versionchange事件。// 注意，刪除不存在的數據庫并不會報錯。

五、新建數據庫

????????新建數據庫與打開數據庫是同一個操作。如果指定的數據庫不存在，就會新建。不同之處在于，后續的操作主要在?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 {// ...} }

十二、對比圖?

總結

以上是生活随笔為你收集整理的Chrome 下IndexedDB 本地存储的全部內容，希望文章能夠幫你解決所遇到的問題。

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