## IndexedDB **4、客戶端數據庫（IndexedDB）** IndexedDB（對象數據庫）可以說是瀏覽器端數據庫，可以被網頁腳本程序創建和操作。它允許儲存大量數據，提供查找接口，還能建立索引。 在IndexedDB API中，一個數據庫就是一個命名對象倉庫（object store）的集合，對象存儲區存儲的是對象。 IndexedDB特點： - 鍵值對存儲：在對象倉庫中，數據以“鍵值對”的形式保存，每一個數據都有對應的鍵名，鍵名是獨一無二的，不能有重復，否則會拋出一個錯誤。 - 同域限制：IndexedDB數據庫的作用域是限制在包含它們的文檔源中，每一個數據庫對應創建該數據庫的域名，兩個同源的Web頁面互相之間可以訪問對方的數據，但非同源的頁面就不行。 - 支持事務：IndexedDB支持事務，這就是說對數據庫的查詢和更新都是包含在一個事務（transaction）中，以此來確保這些操作要么是一起成功，要么是一起失敗，并且永遠不會讓數據庫出現更新到一半的情況。 - 異步：IndexedDB的操作不會阻塞瀏覽器的UI主線程。 - 儲存空間大：IE的儲存上限是250MB，Chrome和Opera是剩余空間的某個百分比，Firefox則沒有上限。 **（1）檢測瀏覽器是否支持IndexedDB API** ``` if('indexedDB' in window){ //支持 }else{ //不支持 } ``` **（2）訪問數據庫** 要異步訪問數據庫，就要調用 window 對象 indexedDB 屬性的 open() 方法 ``` var request = indexedDB.open(name[,version]) ``` indexedDB.open方法可傳輸人兩個參數：name是數據庫名稱，必填；version是數據庫版本，是一個大于0的正整數（0將報錯）。 open方法返回一個 IDBRequest 對象 (IDBOpenDBRequest)， 注意：如果數據庫存在，將打開數據庫，否則，則會新建該數據庫。如果省略第二個參數，則會自動創建版本為1的該數據庫。 當打開數據時，有可能觸發4種事件： success：打開成功。 error：打開失敗。 upgradeneeded：第一次打開該數據庫，或者數據庫版本發生變化。 blocked：上一次的數據庫連接還未關閉。 第一次打開數據庫時，會先觸發upgradeneeded事件，然后觸發success事件。 ``` request.onupgradeneeded = function(e){} request.onsuccess = function(e){ db = e.target.result; } ``` 回調函數接受一個事件對象event作為參數，它的target.result屬性就指向打開的IndexedDB數據庫。 **（3）IndexedDB實例對象的方法** **3.1 createObjectStore()方法** createObjectStore()方法用于創建存放數據的“對象倉庫”（object store）。 ``` db.createObjectStore(name[,options]); ``` 參數說明： 參數name是對象倉庫的名字；options是可選參數，用來設置對象倉庫的屬性，可配置兩個屬性：keyPath和autoIncrement，分別表示每條記錄的鍵名和是否使用自動遞增的整數作為鍵名，默認為false。 ``` db.createObjectStore('db1', {keyPath: 'user'}); db.createObjectStore('db2', {autoIncrement: true}); ``` 由于對象倉庫的名字具有唯一性（當創建已存在的數據庫時，會報錯），所以在創建對象倉庫時，我們有必要檢測對象倉庫是否已存在： db.objectStoreNames.contains(name) objectStoreNames屬性返回一個DOMStringList對象，里面包含了當前數據庫所有“對象倉庫”的名稱。可以使用DOMStringList對象的contains方法，檢查數據庫是否包含某個“對象倉庫”。 **3.2 transaction方法** 創建了數據庫，當然要使用它，不過數據庫的更新、讀取和刪除是建立在事務的基礎上的，所以我們首先要創建一個事務： ``` var t = db.transaction(array,type) ``` transcation()方法接受兩個參數：參數array是一個數組，包含了所要使用的對象倉庫，通常是一個；參數type是一個表示操作類型的字符串，目前只有兩種類型：readonly（只讀）和readwrite（讀寫）。 ``` t = db.transaction(['db1','readwrite'); ``` transaction()方法返回一個事務對象，該對象的objectStore()方法用于獲取指定的對象倉庫： ``` var store = t.objectStore('db1'); ``` 事務對象有三個監聽事件： abort：事務中斷。 complete：事務完成。 error：事務出錯。 假如事務完成時： ``` t.oncomplete =function(e){} ``` **3.2.1 數據操作** 下面的方法都是在事件對象上。 **（1）add()方法** add()方法用來添加數據 ``` var add = store.add(data,key) ``` 參數說明：參數data是所要添加的數據；參數key是這條數據對應的鍵名（key）。 add()方法是異步的，有success和error事件： ``` add.onsuccess = funciton(e){} add.onerror = function(e){} ``` **（2）get()方法** get()方法用來讀取數據，它的參數是鍵名 ``` store.get(key) ``` get方法也是異步的，也有success和error事件。 **（3）put()方法** put()方法用來更新數據，與add()方法類似： ``` var update = store.put(data,key) ``` **（4）delete()方法** delete()方法用來刪除數據，它的參數是鍵名： ``` var delete = store.delete(key) ``` delete方法也是異步的，也有success和error事件。 **（5）openCursor()方法** openCursor()方法用來遍歷數據： ``` var cursor = store.openCursor() ``` openCursor方法也是異步的，也有success和error事件。 ``` cursor.onsuccess = function(e){ var res = e.target.result; console.log('key',res.key); console.log('data',res.value); res.continue() } ``` e.target.result屬性指向當前數據對象。當前數據對象的key和value分別返回鍵名和鍵值（即實際存入的數據）。continue方法將光標移到下一個數據對象，如果當前數據對象已經是最后一個數據了，則光標指向null。 openCursor方法還可以接受第二個參數，表示遍歷方向，默認值為next，其他可能的值為prev、nextunique和prevunique。后兩個值表示如果遇到重復值，會自動跳過。 **3.3 createIndex()方法** createIndex()方法用來創建索引： ``` createIndex(index,name,options) ``` createIndex方法接受三個參數，第一個是索引名稱，第二個是建立索引的屬性名，第三個是參數對象，用來設置索引特性。unique表示索引所在的屬性是否有唯一值. **3.3.1 index方法** index()方法用于從對象倉庫返回指定的索引。 ``` var index = store.index(index); var data = index.get(name) ``` 注意：get方法有可能取回多個數據對象，因為name屬性沒有唯一值。