1.概述

現(xiàn)有的瀏覽器數(shù)據(jù)儲(chǔ)存方案，都不適合儲(chǔ)存大量數(shù)據(jù)：Cookie 的大小不超過(guò) 4KB，且每次請(qǐng)求都會(huì)發(fā)送回服務(wù)器；LocalStorage 在 2.5MB 到 10MB 之間（各家瀏覽器不同），而且不提供搜索功能，不能建立自定義的索引瓜浸。所以，需要一種新的解決方案寞秃，這就是 IndexedDB 誕生的背景斟叼。
IndexedDB 就是瀏覽器提供的本地?cái)?shù)據(jù)庫(kù)，它可以被網(wǎng)頁(yè)腳本創(chuàng)建和操作春寿。 允許儲(chǔ)存大量數(shù)據(jù)朗涩，提供查找接口，還能建立索引绑改。具有以下特點(diǎn)：

（1）鍵值對(duì)儲(chǔ)存

內(nèi)部采用對(duì)象倉(cāng)庫(kù)（object store）存放數(shù)據(jù)谢床。所有類型的數(shù)據(jù)都可以直接存入，包括 JavaScript 對(duì)象厘线。數(shù)據(jù)以“鍵值對(duì)”的形式保存识腿，不能有重復(fù)，否則會(huì)拋出一個(gè)錯(cuò)誤造壮。

（2）異步

異步操作渡讼，不會(huì)鎖死瀏覽器骂束，這與 LocalStorage 形成對(duì)比，后者的操作是同步的成箫。異步設(shè)計(jì)是為了防止大量數(shù)據(jù)的讀寫展箱，拖慢網(wǎng)頁(yè)的表現(xiàn)。

（3）支持事務(wù)

支持事務(wù)（transaction）蹬昌，有一步失敗混驰，整個(gè)事務(wù)就都取消，數(shù)據(jù)庫(kù)回滾到事務(wù)發(fā)生之前的狀態(tài)皂贩，不存在只改寫一部分?jǐn)?shù)據(jù)的情況栖榨。

（4）同源限制

受到同源限制，每一個(gè)數(shù)據(jù)庫(kù)對(duì)應(yīng)創(chuàng)建它的域名明刷。網(wǎng)頁(yè)只能訪問(wèn)自身域名下的數(shù)據(jù)庫(kù)婴栽，而不能訪問(wèn)跨域的數(shù)據(jù)庫(kù)。

（5）儲(chǔ)存空間大

一般來(lái)說(shuō)不少于 250MB遮精，甚至沒(méi)有上限居夹。

（6）支持二進(jìn)制儲(chǔ)存

不僅可以儲(chǔ)存字符串败潦，還可以儲(chǔ)存二進(jìn)制數(shù)據(jù)（ArrayBuffer 對(duì)象和 Blob 對(duì)象）本冲。

2.基本概念

IndexedDB 是一個(gè)比較復(fù)雜的 API，包括以下對(duì)象：
數(shù)據(jù)庫(kù)：IDBDatabase 對(duì)象
對(duì)象倉(cāng)庫(kù)：IDBObjectStore 對(duì)象
索引： IDBIndex 對(duì)象
事務(wù)： IDBTransaction 對(duì)象
操作請(qǐng)求：IDBRequest 對(duì)象
指針： IDBCursor 對(duì)象
主鍵集合：IDBKeyRange 對(duì)象

3.操作流程

3.1打開(kāi)數(shù)據(jù)庫(kù)

使用indexedDB.open()方法

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

這個(gè)方法接受兩個(gè)參數(shù)劫扒，第一個(gè)參數(shù)是字符串檬洞，表示數(shù)據(jù)庫(kù)的名字。如果指定的數(shù)據(jù)庫(kù)不存在沟饥，就會(huì)新建數(shù)據(jù)庫(kù)添怔。第二個(gè)參數(shù)是整數(shù)，表示數(shù)據(jù)庫(kù)的版本贤旷。如果省略广料，打開(kāi)已有數(shù)據(jù)庫(kù)時(shí)，默認(rèn)為當(dāng)前版本幼驶；新建數(shù)據(jù)庫(kù)時(shí)艾杏，默認(rèn)為1。
indexedDB.open()方法返回一個(gè) IDBRequest 對(duì)象盅藻。這個(gè)對(duì)象通過(guò)三種事件error购桑、success、upgradeneeded氏淑，處理打開(kāi)數(shù)據(jù)庫(kù)的操作結(jié)果勃蜘。(這三種事件后面會(huì)介紹一下)

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

新建數(shù)據(jù)庫(kù)與打開(kāi)數(shù)據(jù)庫(kù)是同一個(gè)操作。如果指定的數(shù)據(jù)庫(kù)不存在假残，就會(huì)新建缭贡。不同之處在于，后續(xù)的操作主要在upgradeneeded事件的監(jiān)聽(tīng)函數(shù)里面完成，因?yàn)檫@時(shí)版本從無(wú)到有阳惹，所以會(huì)觸發(fā)這個(gè)事件坑资。
通常，新建數(shù)據(jù)庫(kù)以后穆端，第一件事是新建對(duì)象倉(cāng)庫(kù)（即新建表）袱贮。

request.onupgradeneeded = function (event) {
  db = event.target.result;
  var objectStore;
  //判斷是否存在，不存在在創(chuàng)建
  if (!db.objectStoreNames.contains('person')) {
    objectStore = db.createObjectStore('person', { keyPath: 'id' });
  }
}

上面代碼中体啰，數(shù)據(jù)庫(kù)新建成功以后攒巍，新增一張叫做person的表格，主鍵是id荒勇。如果數(shù)據(jù)記錄里面沒(méi)有合適作為主鍵的屬性柒莉，那么可以讓 IndexedDB 自動(dòng)生成主鍵。

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

上面代碼中沽翔，指定主鍵為一個(gè)遞增的整數(shù)兢孝。
新建對(duì)象倉(cāng)庫(kù)以后，下一步可以新建索引仅偎。

request.onupgradeneeded = function(event) {
  db = event.target.result;
  var objectStore = db.createObjectStore('person', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
  objectStore.createIndex('age', 'age', { unique: true });
}

上面代碼中跨蟹，IDBObject.createIndex()的三個(gè)參數(shù)分別為索引名稱、索引所在的屬性橘沥、配置對(duì)象（說(shuō)明該屬性是否包含重復(fù)的值）窗轩。

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

function add() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .add({ id: 1, name: '張三', age: 24});
  request.onsuccess = function (event) {
    console.log('數(shù)據(jù)寫入成功');
  };
  request.onerror = function (event) {
    console.log('數(shù)據(jù)寫入失敗');
  }
}
add();

上面代碼中，寫入數(shù)據(jù)需要新建一個(gè)事務(wù)座咆。新建時(shí)必須指定表格名稱和操作模式（“只讀”或“讀寫”）痢艺。新建事務(wù)以后，通過(guò)IDBTransaction.objectStore(name)方法介陶，拿到 IDBObjectStore 對(duì)象堤舒，再通過(guò)表格對(duì)象的add()方法，向表格寫入一條記錄哺呜。
寫入操作是一個(gè)異步操作舌缤，通過(guò)監(jiān)聽(tīng)連接對(duì)象的success事件和error事件，了解是否寫入成功弦牡。

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

讀取數(shù)據(jù)也是通過(guò)事務(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('未獲得數(shù)據(jù)記錄');
      }
   };
}
read();

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

遍歷數(shù)據(jù)表格的所有記錄，要使用指針對(duì)象 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);
       cursor.continue();
    } else {
      console.log('沒(méi)有更多數(shù)據(jù)了卸留！');
    }
  };
}
readAll();

上面代碼中，新建指針對(duì)象的openCursor()方法是一個(gè)異步操作椭豫，所以要監(jiān)聽(tīng)success事件耻瑟。

3.6更新數(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();

3.7刪除數(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();

3.8使用索引

索引的意義在于喳整，可以讓你搜索任意字段谆构，也就是說(shuō)從任意字段拿到數(shù)據(jù)記錄。如果不建立索引框都，默認(rèn)只能搜索主鍵（即從主鍵取值）搬素。
假定新建表格的時(shí)候，對(duì)name字段建立了索引魏保。

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

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

let transaction = db.transaction(['person'], 'readonly');
let store = transaction.objectStore('person');
let index = store.index('name');
let request = index.get('李四');
request.onsuccess = function (e) {
  var result = e.target.result;
  if (result) {
    // ...
  } else {
    // ...
  }
}

4.IDBRequest 對(duì)象

瀏覽器原生提供indexedDB對(duì)象谓罗，作為開(kāi)發(fā)者的操作接口粱哼。

4.1indexedDB.open()

打開(kāi)數(shù)據(jù)庫(kù)是異步操作，通過(guò)各種事件通知客戶端檩咱。下面是有可能觸發(fā)的4種事件揭措。
success：打開(kāi)成功。
error：打開(kāi)失敗刻蚯。
upgradeneeded：第一次打開(kāi)該數(shù)據(jù)庫(kù)绊含，或者數(shù)據(jù)庫(kù)版本發(fā)生變化。
blocked：上一次的數(shù)據(jù)庫(kù)連接還未關(guān)閉芦倒。
第一次打開(kāi)數(shù)據(jù)庫(kù)時(shí)艺挪，會(huì)先觸發(fā)upgradeneeded事件不翩，然后觸發(fā)success事件兵扬。
根據(jù)不同的需要，對(duì)上面4種事件監(jiān)聽(tīng)函數(shù)口蝠。

let openRequest = indexedDB.open('test', 1);
let db;
openRequest.onupgradeneeded = function (e) {
  console.log('Upgrading...');
}
openRequest.onsuccess = function (e) {
  console.log('Success!');
  db = openRequest.result;
}
openRequest.onerror = function (e) {
  console.log('Error');
  console.log(e);
}

4.2indexedDB.deleteDatabase()

indexedDB.deleteDatabase()方法用于刪除一個(gè)數(shù)據(jù)庫(kù)器钟，參數(shù)為數(shù)據(jù)庫(kù)的名字。它會(huì)立刻返回一個(gè)IDBOpenDBRequest對(duì)象妙蔗，然后對(duì)數(shù)據(jù)庫(kù)執(zhí)行異步刪除傲霸。刪除操作的結(jié)果會(huì)通過(guò)事件通知，IDBOpenDBRequest對(duì)象可以監(jiān)聽(tīng)以下事件眉反。
success：刪除成功
error：刪除報(bào)錯(cuò)

let DBDeleteRequest = window.indexedDB.deleteDatabase('demo');
DBDeleteRequest.onerror = function (event) {
  console.log('Error');
};
DBDeleteRequest.onsuccess = function (event) {
  console.log('success');
};

調(diào)用deleteDatabase()方法以后昙啄，當(dāng)前數(shù)據(jù)庫(kù)的其他已經(jīng)打開(kāi)的連接都會(huì)接收到versionchange事件。
注意寸五，刪除不存在的數(shù)據(jù)庫(kù)并不會(huì)報(bào)錯(cuò)梳凛。

4.3indexedDB.cmp()

indexedDB.cmp()方法比較兩個(gè)值是否為 indexedDB 的相同的主鍵。它返回一個(gè)整數(shù)梳杏，表示比較的結(jié)果：0表示相同韧拒，1表示第一個(gè)主鍵大于第二個(gè)主鍵淹接，-1表示第一個(gè)主鍵小于第二個(gè)主鍵。

window.indexedDB.cmp(1, 2) // -1

注意叛溢，這個(gè)方法不能用來(lái)比較任意的 JavaScript 值塑悼。如果參數(shù)是布爾值或?qū)ο螅鼤?huì)報(bào)錯(cuò)楷掉。

window.indexedDB.cmp(1, true) // 報(bào)錯(cuò)
window.indexedDB.cmp({}, {}) // 報(bào)錯(cuò)

5.IDBRequest 對(duì)象

IDBRequest 對(duì)象表示打開(kāi)的數(shù)據(jù)庫(kù)連接厢蒜，indexedDB.open()方法和indexedDB.deleteDatabase()方法會(huì)返回這個(gè)對(duì)象。數(shù)據(jù)庫(kù)的操作都是通過(guò)這個(gè)對(duì)象完成的烹植。

這個(gè)對(duì)象的所有操作都是異步操作郭怪，要通過(guò)readyState屬性判斷是否完成，如果為pending就表示操作正在進(jìn)行刊橘，如果為done就表示操作完成鄙才，可能成功也可能失敗。

操作完成以后促绵，觸發(fā)success事件或error事件攒庵，這時(shí)可以通過(guò)result屬性和error屬性拿到操作結(jié)果。如果在pending階段败晴，就去讀取這兩個(gè)屬性浓冒，是會(huì)報(bào)錯(cuò)的。

IDBRequest 對(duì)象有以下屬性:
IDBRequest.readyState：等于pending表示操作正在進(jìn)行尖坤，等于done表示操作正在完成稳懒。
IDBRequest.result：返回請(qǐng)求的結(jié)果。如果請(qǐng)求失敗慢味、結(jié)果不可用场梆，讀取該屬性會(huì)報(bào)錯(cuò)。
IDBRequest.error：請(qǐng)求失敗時(shí)纯路，返回錯(cuò)誤對(duì)象或油。
IDBRequest.source：返回請(qǐng)求的來(lái)源（比如索引對(duì)象或 ObjectStore）。
IDBRequest.transaction：返回當(dāng)前請(qǐng)求正在進(jìn)行的事務(wù)驰唬，如果不包含事務(wù)顶岸，返回null。
IDBRequest.onsuccess：指定success事件的監(jiān)聽(tīng)函數(shù)叫编。
IDBRequest.onerror：指定error事件的監(jiān)聽(tīng)函數(shù)辖佣。
IDBOpenDBRequest 對(duì)象繼承了 IDBRequest 對(duì)象，提供了兩個(gè)額外的事件監(jiān)聽(tīng)屬性搓逾。
IDBOpenDBRequest.onblocked：指定blocked事件（upgradeneeded事件觸發(fā)時(shí)卷谈，數(shù)據(jù)庫(kù)仍然在使用）的監(jiān)聽(tīng)函數(shù)。
IDBOpenDBRequest.onupgradeneeded：upgradeneeded事件的監(jiān)聽(tīng)函數(shù)恃逻。

6.IDBDatabase 對(duì)象

打開(kāi)數(shù)據(jù)成功以后雏搂，可以從IDBOpenDBRequest對(duì)象的result屬性上面藕施，拿到一個(gè)IDBDatabase對(duì)象，它表示連接的數(shù)據(jù)庫(kù)凸郑。后面對(duì)數(shù)據(jù)庫(kù)的操作裳食，都通過(guò)這個(gè)對(duì)象完成。

let db;
let DBOpenRequest = window.indexedDB.open('demo', 1);

DBOpenRequest.onerror = function (event) {
  console.log('Error');
};

DBOpenRequest.onsuccess = function(event) {
  db = DBOpenRequest.result;
  // ...
};

6.1屬性

IDBDatabase 對(duì)象有以下屬性:
IDBDatabase.name：字符串芙沥，數(shù)據(jù)庫(kù)名稱诲祸。
IDBDatabase.version：整數(shù)，數(shù)據(jù)庫(kù)版本而昨。數(shù)據(jù)庫(kù)第一次創(chuàng)建時(shí)救氯，該屬性為空字符串。
IDBDatabase.objectStoreNames：DOMStringList 對(duì)象（字符串的集合）歌憨，包含當(dāng)前數(shù)據(jù)的所有 object store 的名字着憨。
IDBDatabase.onabort：指定 abort 事件（事務(wù)中止）的監(jiān)聽(tīng)函數(shù)。
IDBDatabase.onclose：指定 close 事件（數(shù)據(jù)庫(kù)意外關(guān)閉）的監(jiān)聽(tīng)函數(shù)务嫡。
IDBDatabase.onerror：指定 error 事件（訪問(wèn)數(shù)據(jù)庫(kù)失敿锥丁）的監(jiān)聽(tīng)函數(shù)。
IDBDatabase.onversionchange：數(shù)據(jù)庫(kù)版本變化時(shí)觸發(fā)（發(fā)生upgradeneeded事件心铃，或調(diào)用indexedDB.deleteDatabase()）准谚。
下面是objectStoreNames屬性的例子。該屬性返回一個(gè) DOMStringList 對(duì)象去扣，包含了當(dāng)前數(shù)據(jù)庫(kù)所有對(duì)象倉(cāng)庫(kù)的名稱（即表名）柱衔，可以使用 DOMStringList 對(duì)象的contains方法，檢查數(shù)據(jù)庫(kù)是否包含某個(gè)對(duì)象倉(cāng)庫(kù)愉棱。

if (!db.objectStoreNames.contains('firstOS')) {
  db.createObjectStore('firstOS');
}

上面代碼先判斷某個(gè)對(duì)象倉(cāng)庫(kù)是否存在唆铐，如果不存在就創(chuàng)建該對(duì)象倉(cāng)庫(kù)。

6.2方法

IDBDatabase 對(duì)象有以下方法:
IDBDatabase.close()：關(guān)閉數(shù)據(jù)庫(kù)連接羽氮，實(shí)際會(huì)等所有事務(wù)完成后再關(guān)閉或链。
IDBDatabase.createObjectStore()：創(chuàng)建存放數(shù)據(jù)的對(duì)象倉(cāng)庫(kù)，類似于傳統(tǒng)關(guān)系型數(shù)據(jù)庫(kù)的表格档押，返回一個(gè) IDBObjectStore 對(duì)象。該方法只能在versionchange事件監(jiān)聽(tīng)函數(shù)中調(diào)用祈纯。
IDBDatabase.deleteObjectStore()：刪除指定的對(duì)象倉(cāng)庫(kù)令宿。該方法只能在versionchange事件監(jiān)聽(tīng)函數(shù)中調(diào)用。
IDBDatabase.transaction()：返回一個(gè) IDBTransaction 事務(wù)對(duì)象腕窥。
下面是createObjectStore()方法的例子粒没。

let request = window.indexedDB.open('demo', 2);
request.onupgradeneeded = function (event) {
  let db = event.target.result;
  db.onerror = function(event) {
    console.log('error');
  };
  let objectStore = db.createObjectStore('items');
  // ...
};

上面代碼創(chuàng)建了一個(gè)名為items的對(duì)象倉(cāng)庫(kù)，如果該對(duì)象倉(cāng)庫(kù)已經(jīng)存在簇爆，就會(huì)拋出一個(gè)錯(cuò)誤癞松。為了避免出錯(cuò)爽撒，需要用到下文的objectStoreNames屬性，檢查已有哪些對(duì)象倉(cāng)庫(kù)响蓉。

createObjectStore()方法還可以接受第二個(gè)對(duì)象參數(shù)硕勿，用來(lái)設(shè)置對(duì)象倉(cāng)庫(kù)的屬性倍试。

db.createObjectStore('test', { keyPath: 'email' });
db.createObjectStore('test2', { autoIncrement: true });

上面代碼中鸟悴，keyPath屬性表示主鍵（由于主鍵的值不能重復(fù)双霍，所以上例存入之前麻削，必須保證數(shù)據(jù)的email屬性值都是不一樣的）来候，默認(rèn)值為null蛀蜜；autoIncrement屬性表示糠睡，是否使用自動(dòng)遞增的整數(shù)作為主鍵（第一個(gè)數(shù)據(jù)記錄為1扩灯，第二個(gè)數(shù)據(jù)記錄為2脏毯，以此類推）闹究，默認(rèn)為false。一般來(lái)說(shuō)食店，keyPath和autoIncrement屬性只要使用一個(gè)就夠了跋核，如果兩個(gè)同時(shí)使用，表示主鍵為遞增的整數(shù)叛买，且對(duì)象不得缺少keyPath指定的屬性砂代。

下面是deleteObjectStore()方法的例子。

let dbName = 'sampleDB';
let dbVersion = 2;
let request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = function(e) {
  let db = request.result;
  if (e.oldVersion < 1) {
    db.createObjectStore('store1');
  }

  if (e.oldVersion < 2) {
    db.deleteObjectStore('store1');
    db.createObjectStore('store2');
  }

  // ...
};

下面是transaction()方法的例子率挣，該方法用于創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)事務(wù)刻伊，返回一個(gè) IDBTransaction 對(duì)象。向數(shù)據(jù)庫(kù)添加數(shù)據(jù)之前椒功，必須先創(chuàng)建數(shù)據(jù)庫(kù)事務(wù)捶箱。

let transaction = db.transaction(['items'], 'readwrite');

transaction()方法接受兩個(gè)參數(shù)：第一個(gè)參數(shù)是一個(gè)數(shù)組，里面是所涉及的對(duì)象倉(cāng)庫(kù)动漾，通常是只有一個(gè)丁屎；第二個(gè)參數(shù)是一個(gè)表示操作類型的字符串。目前旱眯，操作類型只有兩種：readonly（只讀）和readwrite（讀寫）晨川。添加數(shù)據(jù)使用readwrite，讀取數(shù)據(jù)使用readonly删豺。第二個(gè)參數(shù)是可選的共虑，省略時(shí)默認(rèn)為readonly模式。

7.IDBObjectStore 對(duì)象

IDBObjectStore 對(duì)象對(duì)應(yīng)一個(gè)對(duì)象倉(cāng)庫(kù)（object store）呀页。IDBDatabase.createObjectStore()方法返回的就是一個(gè) IDBObjectStore 對(duì)象妈拌。

IDBDatabase 對(duì)象的transaction()返回一個(gè)事務(wù)對(duì)象，該對(duì)象的objectStore()方法返回 IDBObjectStore 對(duì)象蓬蝶，因此可以采用下面的鏈?zhǔn)綄懛ā?/p>

db.transaction(['test'], 'readonly')
  .objectStore('test')
  .get(X)
  .onsuccess = function (e) {}

7.1屬性

IDBObjectStore 對(duì)象有以下屬性:
IDBObjectStore.indexNames：返回一個(gè)類似數(shù)組的對(duì)象（DOMStringList）尘分，包含了當(dāng)前對(duì)象倉(cāng)庫(kù)的所有索引猜惋。
IDBObjectStore.keyPath：返回當(dāng)前對(duì)象倉(cāng)庫(kù)的主鍵。
IDBObjectStore.name：返回當(dāng)前對(duì)象倉(cāng)庫(kù)的名稱培愁。
IDBObjectStore.transaction：返回當(dāng)前對(duì)象倉(cāng)庫(kù)所屬的事務(wù)對(duì)象著摔。
IDBObjectStore.autoIncrement：布爾值，表示主鍵是否會(huì)自動(dòng)遞增竭钝。

7.2方法

IDBObjectStore 對(duì)象有以下方法梨撞。
(1) IDBObjectStore.add()
IDBObjectStore.add()用于向?qū)ο髠}(cāng)庫(kù)添加數(shù)據(jù)，返回一個(gè) IDBRequest 對(duì)象香罐。該方法只用于添加數(shù)據(jù)卧波，如果主鍵相同會(huì)報(bào)錯(cuò)，因此更新數(shù)據(jù)必須使用put()方法庇茫。

objectStore.add(value, key)

該方法接受兩個(gè)參數(shù)港粱，第一個(gè)參數(shù)是鍵值，第二個(gè)參數(shù)是主鍵旦签，該參數(shù)可選查坪，如果省略默認(rèn)為null。

創(chuàng)建事務(wù)以后宁炫，就可以獲取對(duì)象倉(cāng)庫(kù)偿曙，然后使用add()方法往里面添加數(shù)據(jù)了。

let db;
let DBOpenRequest = window.indexedDB.open('demo', 1);
DBOpenRequest.onsuccess = function (event) {
  db = DBOpenRequest.result;
  let transaction = db.transaction(['items'], 'readwrite');
  transaction.oncomplete = function (event) {
    console.log('transaction success');
  };
  transaction.onerror = function (event) {
    console.log('transaction error: ' + transaction.error);
  };
  let objectStore = transaction.objectStore('items');
  let objectStoreRequest = objectStore.add({ foo: 1 });
  objectStoreRequest.onsuccess = function (event) {
    console.log('add data success');
  };
};

（2）IDBObjectStore.put()
IDBObjectStore.put()方法用于更新某個(gè)主鍵對(duì)應(yīng)的數(shù)據(jù)記錄羔巢，如果對(duì)應(yīng)的鍵值不存在望忆，則插入一條新的記錄。該方法返回一個(gè) IDBRequest 對(duì)象竿秆。

objectStore.put(item, key)

該方法接受兩個(gè)參數(shù)启摄，第一個(gè)參數(shù)為新數(shù)據(jù)，第二個(gè)參數(shù)為主鍵幽钢，該參數(shù)可選歉备，且只在自動(dòng)遞增時(shí)才有必要提供，因?yàn)槟菚r(shí)主鍵不包含在數(shù)據(jù)值里面匪燕。
（3）IDBObjectStore.clear()
IDBObjectStore.clear()刪除當(dāng)前對(duì)象倉(cāng)庫(kù)的所有記錄蕾羊。不需要參數(shù)，該方法返回一個(gè) IDBRequest 對(duì)象谎懦。

objectStore.clear()

（4）IDBObjectStore.delete()

objectStore.delete(Key)

IDBObjectStore.delete()方法用于刪除指定主鍵的記錄肚豺。參數(shù)為主鍵的值，該方法返回一個(gè) IDBRequest 對(duì)象界拦。
（5）IDBObjectStore.count()
IDBObjectStore.count()方法用于計(jì)算記錄的數(shù)量。該方法返回一個(gè) IDBRequest 對(duì)象梗劫。
不帶參數(shù)時(shí)享甸，該方法返回當(dāng)前對(duì)象倉(cāng)庫(kù)的所有記錄數(shù)量截碴。如果主鍵或 IDBKeyRange 對(duì)象作為參數(shù)，則返回對(duì)應(yīng)的記錄數(shù)量蛉威。

IDBObjectStore.count(key)

（6）IDBObjectStore.getKey()
IDBObjectStore.getKey()用于獲取主鍵日丹。參數(shù)可以是主鍵值或 IDBKeyRange 對(duì)象。,該方法返回一個(gè) IDBRequest 對(duì)象蚯嫌。

objectStore.getKey(key)

（7）IDBObjectStore.get()
IDBObjectStore.get()用于獲取主鍵對(duì)應(yīng)的數(shù)據(jù)記錄哲虾。該方法返回一個(gè) IDBRequest 對(duì)象。

objectStore.get(key)

（8）IDBObjectStore.getAll()
DBObjectStore.getAll()用于獲取對(duì)象倉(cāng)庫(kù)的記錄择示。該方法返回一個(gè) IDBRequest 對(duì)象束凑。

// 獲取所有記錄
objectStore.getAll()
// 獲取所有符合指定主鍵或 IDBKeyRange 的記錄
objectStore.getAll(query)
// 指定獲取記錄的數(shù)量
objectStore.getAll(query, count)

（9）IDBObjectStore.getAllKeys()
IDBObjectStore.getAllKeys()用于獲取所有符合條件的主鍵。該方法返回一個(gè) IDBRequest 對(duì)象栅盲。

// 獲取所有記錄的主鍵
objectStore.getAllKeys()
// 獲取所有符合條件的主鍵
objectStore.getAllKeys(query)
// 指定獲取主鍵的數(shù)量
objectStore.getAllKeys(query, count)

（10）IDBObjectStore.index()
IDBObjectStore.index()方法返回指定名稱的索引對(duì)象 IDBIndex汪诉。

objectStore.index(name)

有了索引以后，就可以針對(duì)索引所在的屬性讀取數(shù)據(jù)谈秫。

let t = db.transaction(['people'], 'readonly');
let store = t.objectStore('people');
let index = store.index('name');
let request = index.get('foo');

上面代碼打開(kāi)對(duì)象倉(cāng)庫(kù)以后扒寄，先用index()方法指定獲取name屬性的索引，然后用get()方法讀取某個(gè)name屬性(foo)對(duì)應(yīng)的數(shù)據(jù)拟烫。如果name屬性不是對(duì)應(yīng)唯一值该编，這時(shí)get()方法有可能取回多個(gè)數(shù)據(jù)對(duì)象。另外硕淑，get()是異步方法课竣，讀取成功以后，只能在success事件的監(jiān)聽(tīng)函數(shù)中處理數(shù)據(jù)喜颁。

（11）IDBObjectStore.createIndex()

IDBObjectStore.createIndex()方法用于新建當(dāng)前數(shù)據(jù)庫(kù)的一個(gè)索引稠氮。該方法只能在VersionChange監(jiān)聽(tīng)函數(shù)里面調(diào)用。

objectStore.createIndex(indexName, keyPath, objectParameters)

該方法可以接受三個(gè)參數(shù)半开。
indexName：索引名
keyPath：主鍵
objectParameters：配置對(duì)象（可選）
第三個(gè)參數(shù)可以配置以下屬性隔披。

unique：如果設(shè)為true，將不允許重復(fù)的值
multiEntry：如果設(shè)為true寂拆，對(duì)于有多個(gè)值的主鍵數(shù)組奢米，每個(gè)值將在索引里面新建一個(gè)條目，否則主鍵數(shù)組對(duì)應(yīng)一個(gè)條目纠永。
假定對(duì)象倉(cāng)庫(kù)中的數(shù)據(jù)記錄都是如下的person類型鬓长。

var person = {
  name: name,
  email: email,
  created: new Date()
};

可以指定這個(gè)對(duì)象的某個(gè)屬性來(lái)建立索引。

var store = db.createObjectStore('people', { autoIncrement: true });
store.createIndex('name', 'name', { unique: false });
store.createIndex('email', 'email', { unique: true });

上面代碼告訴索引對(duì)象尝江，name屬性不是唯一值涉波，email屬性是唯一值。

（12）IDBObjectStore.deleteIndex()

IDBObjectStore.deleteIndex()方法用于刪除指定的索引。該方法只能在VersionChange監(jiān)聽(tīng)函數(shù)里面調(diào)用啤覆。

objectStore.deleteIndex(indexName)

（13）IDBObjectStore.openCursor()

IDBObjectStore.openCursor()用于獲取一個(gè)指針對(duì)象苍日。

IDBObjectStore.openCursor()

指針對(duì)象可以用來(lái)遍歷數(shù)據(jù)。該對(duì)象也是異步的窗声，有自己的success和error事件相恃，可以對(duì)它們指定監(jiān)聽(tīng)函數(shù)。

var t = db.transaction(['test'], 'readonly');
var store = t.objectStore('test');

var cursor = store.openCursor();

cursor.onsuccess = function (event) {
  var res = event.target.result;
  if (res) {
    console.log('Key', res.key);
    console.dir('Data', res.value);
    res.continue();
  }
}

監(jiān)聽(tīng)函數(shù)接受一個(gè)事件對(duì)象作為參數(shù)笨觅，該對(duì)象的target.result屬性指向當(dāng)前數(shù)據(jù)記錄拦耐。該記錄的key和value分別返回主鍵和鍵值（即實(shí)際存入的數(shù)據(jù)）。continue()方法將光標(biāo)移到下一個(gè)數(shù)據(jù)對(duì)象见剩，如果當(dāng)前數(shù)據(jù)對(duì)象已經(jīng)是最后一個(gè)數(shù)據(jù)了杀糯，則光標(biāo)指向null。

openCursor()方法的第一個(gè)參數(shù)是主鍵值炮温，或者一個(gè) IDBKeyRange 對(duì)象火脉。如果指定該參數(shù)，將只處理包含指定主鍵的記錄柒啤；如果省略倦挂，將處理所有的記錄。該方法還可以接受第二個(gè)參數(shù)担巩，表示遍歷方向方援，默認(rèn)值為next，其他可能的值為prev涛癌、nextunique和prevunique犯戏。后兩個(gè)值表示如果遇到重復(fù)值，會(huì)自動(dòng)跳過(guò)拳话。

（14）IDBObjectStore.openKeyCursor()

IDBObjectStore.openKeyCursor()用于獲取一個(gè)主鍵指針對(duì)象先匪。

IDBObjectStore.openKeyCursor()

8.IDBTransaction 對(duì)象

IDBTransaction 對(duì)象用來(lái)異步操作數(shù)據(jù)庫(kù)事務(wù)，所有的讀寫操作都要通過(guò)這個(gè)對(duì)象進(jìn)行弃衍。

IDBDatabase.transaction()方法返回的就是一個(gè) IDBTransaction 對(duì)象呀非。

let db;
let DBOpenRequest = window.indexedDB.open('demo', 1);
DBOpenRequest.onsuccess = function(event) {
  db = DBOpenRequest.result;
  let transaction = db.transaction(['demo'], 'readwrite');
  transaction.oncomplete = function (event) {
    console.log('transaction success');
  };
  transaction.onerror = function (event) {
    console.log('transaction error: ' + transaction.error);
  };
  var objectStore = transaction.objectStore('demo');
  var objectStoreRequest = objectStore.add({ foo: 1 });
  objectStoreRequest.onsuccess = function (event) {
    console.log('add data success');
  };
};

事務(wù)的執(zhí)行順序是按照創(chuàng)建的順序，而不是發(fā)出請(qǐng)求的順序镜盯。

let trans1 = db.transaction('foo', 'readwrite');
lettrans2 = db.transaction('foo', 'readwrite');
letobjectStore2 = trans2.objectStore('foo')
letobjectStore1 = trans1.objectStore('foo')
objectStore2.put('2', 'key');
objectStore1.put('1', 'key');

上面代碼中岸裙，key對(duì)應(yīng)的鍵值最終是2，而不是1速缆。因?yàn)槭聞?wù)trans1先于trans2創(chuàng)建降允，所以首先執(zhí)行。
注意艺糜，事務(wù)有可能失敗剧董，只有監(jiān)聽(tīng)到事務(wù)的complete事件幢尚，才能保證事務(wù)操作成功。
IDBTransaction 對(duì)象有以下屬性:
IDBTransaction.db：返回當(dāng)前事務(wù)所在的數(shù)據(jù)庫(kù)對(duì)象 IDBDatabase送滞。
IDBTransaction.error：返回當(dāng)前事務(wù)的錯(cuò)誤侠草。如果事務(wù)沒(méi)有結(jié)束辱挥，或者事務(wù)成功結(jié)束犁嗅，或者被手動(dòng)終止，該方法返回null晤碘。
IDBTransaction.mode：返回當(dāng)前事務(wù)的模式褂微，默認(rèn)是readonly（只讀），另一個(gè)值是readwrite园爷。
IDBTransaction.objectStoreNames：返回一個(gè)類似數(shù)組的對(duì)象 DOMStringList宠蚂，成員是當(dāng)前事務(wù)涉及的對(duì)象倉(cāng)庫(kù)的名字。
IDBTransaction.onabort：指定abort事件（事務(wù)中斷）的監(jiān)聽(tīng)函數(shù)童社。
IDBTransaction.oncomplete：指定complete事件（事務(wù)成功）的監(jiān)聽(tīng)函數(shù)求厕。
IDBTransaction.onerror：指定error事件（事務(wù)失敗）的監(jiān)聽(tīng)函數(shù)扰楼。
IDBTransaction 對(duì)象有以下方法:
IDBTransaction.abort()：終止當(dāng)前事務(wù)呀癣，回滾所有已經(jīng)進(jìn)行的變更。
IDBTransaction.objectStore(name)：返回指定名稱的對(duì)象倉(cāng)庫(kù) IDBObjectStore弦赖。

9.IDBIndex 對(duì)象

IDBIndex 對(duì)象代表數(shù)據(jù)庫(kù)的索引项栏，通過(guò)這個(gè)對(duì)象可以獲取數(shù)據(jù)庫(kù)里面的記錄。數(shù)據(jù)記錄的主鍵默認(rèn)就是帶有索引蹬竖，IDBIndex 對(duì)象主要用于通過(guò)除主鍵以外的其他鍵沼沈，建立索引獲取對(duì)象。
IDBIndex 是持久性的鍵值對(duì)存儲(chǔ)币厕。只要插入列另、更新或刪除數(shù)據(jù)記錄，引用的對(duì)象庫(kù)中的記錄旦装，索引就會(huì)自動(dòng)更新页衙。
IDBObjectStore.index()方法可以獲取 IDBIndex 對(duì)象。

let transaction = db.transaction(['contactsList'], 'readonly');
let objectStore = transaction.objectStore('contactsList');
let myIndex = objectStore.index('lName');

myIndex.openCursor().onsuccess = function (event) {
  let cursor = event.target.result;
  if (cursor) {
    let tableRow = document.createElement('tr');
    tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
                         + '<td>' + cursor.value.Name + '</td>'
                         + '<td>' + cursor.value.phone + '</td>'
                         + '<td>' + cursor.value.age + '</td>';
    tableEntry.appendChild(tableRow);
    cursor.continue();
  } else {
    console.log('Entries all displayed.');
  }
};

IDBIndex 對(duì)象有以下屬性:

IDBIndex.name：字符串同辣，索引的名稱拷姿。
IDBIndex.objectStore：索引所在的對(duì)象倉(cāng)庫(kù)。
IDBIndex.keyPath：索引的主鍵旱函。
IDBIndex.multiEntry：布爾值响巢，針對(duì)keyPath為數(shù)組的情況，如果設(shè)為true棒妨，創(chuàng)建數(shù)組時(shí)踪古，每個(gè)數(shù)組成員都會(huì)有一個(gè)條目含长，否則每個(gè)數(shù)組都只有一個(gè)條目。
IDBIndex.unique：布爾值伏穆，表示創(chuàng)建索引時(shí)是否允許相同的主鍵拘泞。
IDBIndex 對(duì)象有以下方法，它們都是異步的枕扫，立即返回的都是一個(gè) IDBRequest 對(duì)象陪腌。
IDBIndex.count()：用來(lái)獲取記錄的數(shù)量。它可以接受主鍵或 IDBKeyRange 對(duì)象作為參數(shù)烟瞧，這時(shí)只返回符合主鍵的記錄數(shù)量诗鸭，否則返回所有記錄的數(shù)量。
IDBIndex.get(key)：用來(lái)獲取符合指定主鍵的數(shù)據(jù)記錄参滴。
IDBIndex.getKey(key)：用來(lái)獲取指定的主鍵强岸。
IDBIndex.getAll()：用來(lái)獲取所有的數(shù)據(jù)記錄。它可以接受兩個(gè)參數(shù)砾赔，都是可選的蝌箍，第一個(gè)參數(shù)用來(lái)指定主鍵，第二個(gè)參數(shù)用來(lái)指定返回記錄的數(shù)量暴心。如果省略這兩個(gè)參數(shù)妓盲，則返回所有記錄。由于獲取成功時(shí)酷勺，瀏覽器必須生成所有對(duì)象本橙，所以對(duì)性能有影響。如果數(shù)據(jù)集比較大脆诉，建議使用 IDBCursor 對(duì)象甚亭。
IDBIndex.getAllKeys()：該方法與IDBIndex.getAll()方法相似，區(qū)別是獲取所有主鍵击胜。
IDBIndex.openCursor()：用來(lái)獲取一個(gè) IDBCursor 對(duì)象亏狰，用來(lái)遍歷索引里面的所有條目。
IDBIndex.openKeyCursor()：該方法與IDBIndex.openCursor()方法相似偶摔，區(qū)別是遍歷所有條目的主鍵暇唾。

10.IDBCursor 對(duì)象

IDBCursor 對(duì)象代表指針對(duì)象，用來(lái)遍歷數(shù)據(jù)倉(cāng)庫(kù)（IDBObjectStore）或索引（IDBIndex）的記錄辰斋。

IDBCursor 對(duì)象一般通過(guò)IDBObjectStore.openCursor()方法獲得策州。

let transaction = db.transaction(['rushAlbumList'], 'readonly');
let objectStore = transaction.objectStore('rushAlbumList');

objectStore.openCursor(null, 'next').onsuccess = function(event) {
  let t cursor = event.target.result;
  if (cursor) {
    let listItem = document.createElement('li');
      listItem.innerHTML = cursor.value.albumTitle + ', ' + cursor.value.year;
      list.appendChild(listItem);
      console.log(cursor.source);
      cursor.continue();
    } else {
      console.log('Entries all displayed.');
    }
  };
};

IDBCursor 對(duì)象的屬性:
IDBCursor.source：返回正在遍歷的對(duì)象倉(cāng)庫(kù)或索引。
IDBCursor.direction：字符串宫仗，表示指針遍歷的方向够挂。共有四個(gè)可能的值：next（從頭開(kāi)始向后遍歷）、nextunique（從頭開(kāi)始向后遍歷藕夫，重復(fù)的值只遍歷一次）孽糖、prev（從尾部開(kāi)始向前遍歷）枯冈、prevunique（從尾部開(kāi)始向前遍歷，重復(fù)的值只遍歷一次）办悟。該屬性通過(guò)IDBObjectStore.openCursor()方法的第二個(gè)參數(shù)指定尘奏，一旦指定就不能改變了。
IDBCursor.key：返回當(dāng)前記錄的主鍵病蛉。
IDBCursor.value：返回當(dāng)前記錄的數(shù)據(jù)值炫加。
IDBCursor.primaryKey：返回當(dāng)前記錄的主鍵。對(duì)于數(shù)據(jù)倉(cāng)庫(kù)（objectStore）來(lái)說(shuō)铡恕，這個(gè)屬性等同于 IDBCursor.key琢感；對(duì)于索引，IDBCursor.key 返回索引的位置值探熔，該屬性返回?cái)?shù)據(jù)記錄的主鍵。

IDBCursor 對(duì)象有如下方法:
IDBCursor.advance(n)：指針向前移動(dòng) n 個(gè)位置烘挫。
IDBCursor.continue()：指針向前移動(dòng)一個(gè)位置诀艰。它可以接受一個(gè)主鍵作為參數(shù)，這時(shí)會(huì)跳轉(zhuǎn)到這個(gè)主鍵饮六。
IDBCursor.continuePrimaryKey()：該方法需要兩個(gè)參數(shù)其垄，第一個(gè)是key，第二個(gè)是primaryKey卤橄，將指針移到符合這兩個(gè)參數(shù)的位置绿满。
IDBCursor.delete()：用來(lái)刪除當(dāng)前位置的記錄，返回一個(gè) IDBRequest 對(duì)象窟扑。該方法不會(huì)改變指針的位置喇颁。
IDBCursor.update()：用來(lái)更新當(dāng)前位置的記錄，返回一個(gè) IDBRequest 對(duì)象嚎货。它的參數(shù)是要寫入數(shù)據(jù)庫(kù)的新的值橘霎。