[TOC] ## 概述 相比于`LocalStorage ` 可創建索引,可查詢 1. **鍵值對儲存**。IndexedDB 內部采用對象倉庫（object store）存放數據。所有類型的數據都可以直接存入，包括 JavaScript 對象。對象倉庫中，數據以“鍵值對”的形式保存，每一個數據記錄都有對應的主鍵，主鍵是獨一無二的，不能有重復，否則會拋出一個錯誤。 2. **異步**。IndexedDB 操作時不會鎖死瀏覽器，用戶依然可以進行其他操作，這與 LocalStorage 形成對比，后者的操作是同步的。異步設計是為了防止大量數據的讀寫，拖慢網頁的表現。 3. ** 支持事務**。IndexedDB 支持事務（transaction），這意味著一系列操作步驟之中，只要有一步失敗，整個事務就都取消，數據庫回滾到事務發生之前的狀態，不存在只改寫一部分數據的情況。 4. **同源限制** IndexedDB 受到同源限制，每一個數據庫對應創建它的域名。網頁只能訪問自身域名下的數據庫，而不能訪問跨域的數據庫。 5. **儲存空間大** IndexedDB 的儲存空間比 LocalStorage 大得多，一般來說不少于 250MB，甚至沒有上限。 6. **支持二進制儲存**。IndexedDB 不僅可以儲存字符串，還可以儲存二進制數據（ArrayBuffer 對象和 Blob 對象）。 ## 基本概念 ### 打開數據庫 `var request = window.indexedDB.open(databaseName, version); ` 第一個參數是字符串，表示數據庫的名字。如果指定的數據庫不存在，就會新建數據庫。 第二個參數是整數，表示數據庫的版本。如果省略，打開已有數據庫時，默認為當前版本；新建數據庫時，默認為`1`。 返回一個 IDBRequest 對象。這個對象通過三種事件`error`、`success`、`upgradeneeded`，處理打開數據庫的操作結果 ``` var db; var indexdb = window.indexedDB.open('demo'); indexdb.onerror=function () { console.log('數據庫打開報錯'); } indexdb.onsuccess = function (event) { db = indexdb.result; console.log('數據庫打開成功'); } //指定的版本號，大于數據庫的實際版本號，就會發生數據庫升級事件upgradeneeded indexdb.onupgradeneeded = function (event) { db = event.target.result; } ``` ### 新建數據庫 判斷下表是否存在,不存在在新建 ``` request.onupgradeneeded = function (event) { db = event.target.result; var objectStore; if (!db.objectStoreNames.contains('person')) { objectStore = db.createObjectStore('person', { keyPath: 'id' }); } } ``` 自動生成主鍵 ``` 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 }); } ``` ### 新增數據 ``` 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(); ``` ### 讀取數據 ``` 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(); ```