截至到現(xiàn)在IndexedDB，不同的廠商提供的調(diào)用方式可能會有所差異。本文針對firefox os，對IndexedDB的常用的使用進(jìn)行說明。本文的示例在firefox os和firfox瀏覽器進(jìn)行過測試。其他瀏覽器的使用請根據(jù)相關(guān)API文檔進(jìn)行修改。

IndexedDB是存儲和快速檢索結(jié)構(gòu)型數(shù)據(jù)的客戶端API，數(shù)據(jù)采用key/value的形式，value可以是結(jié)構(gòu)型的數(shù)據(jù)對象，如json對象。

一、打開一個數(shù)據(jù)庫

//Open IndexedDB  
function openDB() {  
　　var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;  
　　var request = indexedDB.open("B2GDBTest", 1);  
　　request.onsuccess = function(event) {  
　　　　console.log("database open success:" + request.result);  
　　　　db = request.result;  
　　};  
　　request.onupgradeneeded = function(event) {  
　　　createObjectStore(event.target.result);  
　　};  
　　request.onerror = function(event) {  
　　　console.log("database open error:" + request.errorCode);  
　　};  
}  

首先需要獲取一個IDBFactory對象，目前不同的瀏覽器獲取的方法有所不同，可以使用下面的寫法來兼容不同的瀏覽器（本文的DEMO只針對firefox os或者firefox瀏覽器）

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; 

使用IDBFactory

IDBOpenDBRequest open (in DOMString name, long long version); 

打開數(shù)據(jù)庫的時候需要指定數(shù)據(jù)庫的名字和版本，并按照如下的順序執(zhí)行打開操作

1.如果數(shù)據(jù)庫已經(jīng)存在，會等到versionchange事物結(jié)束后繼續(xù)執(zhí)行，如果打開了一個待刪除的數(shù)據(jù)庫，會等待刪除操作完畢后繼續(xù)執(zhí)行。（注意：這兩個事件并不是本次open數(shù)據(jù)庫產(chǎn)生的，而是其他的操作中產(chǎn)生的未完成的versionchange和刪除操作）

2.如果打開的數(shù)據(jù)庫的版本小于已經(jīng)存在的數(shù)據(jù)庫版本，或終止執(zhí)行，并返回一個類型為VersionError的DOMError

3.如果打開的數(shù)據(jù)庫版本大于已經(jīng)存在的數(shù)據(jù)庫版本，會執(zhí)行versionchange事物，并執(zhí)行onupgradeneeded回調(diào)函數(shù)

4.如果打開的數(shù)據(jù)庫不存在，會創(chuàng)建一個版本為1沒有任何ObjectStore新的數(shù)據(jù)庫

5.連接打開的數(shù)據(jù)庫

二、創(chuàng)建一個ObjectStore

ObjectStore相當(dāng)與關(guān)系型數(shù)據(jù)庫里的表，你只能在versionchange事物中創(chuàng)建或者刪除ObjectStore，而現(xiàn)在，你只能在上面提到的onupgradeneeded回調(diào)中創(chuàng)建或刪除ObjectStore。創(chuàng)建ObjectStore的操作可以參考如下代碼

//Create Object Store  
function createObjectStore(db) {  
  if (!db) {  
    alert("Database is not open!");  
    return;  
  }  
  if (db.version == 1) {  
 
    if (db.objectStoreNames.contains('customers')) {  
      db.deleteObjectStore("customers")  
    }  
    // Create Object Store  
    // This method was not called from a VERSION_CHANGE transaction callback.  
    var objectStore = db.createObjectStore("customers", {  
      // primary key  
      keyPath : "ssn",  
      // auto increment  
      autoIncrement : true 
    });  
 
    objectStore.createIndex("name", "name", {  
      unique : false 
    });  
 
    objectStore.createIndex("email", "email", {  
      unique : false 
    });  
    console.log("create object store success!");  
  }  
} 

三、數(shù)據(jù)庫的CRUD操作

IndexedDB操作CRUD還是比較容易的，下面分別給出樣例代碼

1.新增

function saveObject() {  
  if (!db) {  
    alert("Database is not open!");  
    return;  
  }  
  var name = document.getElementById("name").value;  
  var email = document.getElementById("email").value;  
  if ("" == name) {  
    alert("name is null!");  
    return;  
  }  
  //Open a transaction with a scope of data stores and a read-write mode.  
  var trans = db.transaction(['customers'], IDBTransaction.READ_WRITE);  
 
  var store = trans.objectStore('customers');  
  var customer = {};  
  customer["name"] = name;  
  customer["email"] = email;  
  var req = store.add(customer);  
  req.onsuccess = function(event) {  
    console.log("save object success!(name:" + name + ",email:" + email + ")");  
  };  
  req.onerror = function(enent) {  
    console.log("save object error:" + req.errorCode);  
  };  
} 

2.修改

//Update Object  
function updateObject() {  
  if (!db) {  
    alert("Database is not open!");  
    return;  
  }  
  var trans = db.transaction(['customers'], IDBTransaction.READ_WRITE);  
 
  var store = trans.objectStore('customers');  
  var customer = {};  
  customer["ssn"] = parseInt(document.getElementById("key").value);  
  customer["name"] = document.getElementById("u_name").value;  
  customer["email"] = document.getElementById("u_email").value;  
  result = store.put(customer);  
  result.onerror = function(event) {  
    console.log("update object error:"+result.errorCode);  
  };  
  result.onsuccess = function(event) {  
    console.log("update object success:ssn:"+customer["ssn"]+",name:"+customer["name"]+",email:"+customer["email"] );  
  };  
} 

3.刪除

//Delete Object()  
function deleteObject(index,obj) {  
  var trans = db.transaction(['customers'], IDBTransaction.READ_WRITE);  
  var store = trans.objectStore('customers');  
  result = store.delete(index);  
  result.onerror = function(event) {  
    console.log("delete Objcet error:"+result.errorCode);  
  }  
  result.onsuccess = function(event) {  
    console.log("delete Object success!");  
    obj.disabled = true;  
  }  
}  

4.查找

//List Objects  
function listObjects() {  
  if (!db) {  
    alert("Database is not open!");  
    return;  
  }  
  var trans = db.transaction(['customers'], IDBTransaction.READ_ONLY);  
  var store = trans.objectStore('customers');  
  var curreq = store.openCursor(IDBKeyRange.bound(1, 4), IDBCursor.PREV);  
  // The "onsuccess" event fires when the cursor is created and  
  // every time the cursor iterates over data.  
  // The following block of code runs multiple times,  
  // until the cursor runs out of data to iterate over.  
  // At that point, the result's request becomes null.  
  var view = document.getElementById("objcetsView");  
  view.innerHTML = "";  
  curreq.onsuccess = function(e) {  
    var cursor = curreq.result;  
    // If the cursor is pointing at something, ask for the data.  
    if (cursor) {  
      var getreq = store.get(cursor.key);  
      // After the data has been retrieved, show it.  
      getreq.onsuccess = function(e) {  
        console.log('key:', cursor.key, 'value:', getreq.result);  
        var value = getreq.result;  
        var objLi=document.createElement("li");  
        objLi.innerHTML = "key:"+cursor.key+",name:"+ value["name"]+",email:"+value["email"]+"<input type='button' value='delete' onclick='deleteObject("+cursor.key+",this)'/>";  
        var updateString = "<input type='button' value='update' onclick='getUpdateObject("+cursor.key + ",\""+value["name"]+"\",\""+value["email"]+"\");'/>";  
        objLi.innerHTML += updateString;  
        view.appendChild(objLi);  
 
        // OK, now move the cursor to the next item.  
        cursor.continue();  
      };  
    }  
  };  
} 

源碼下載：http://chyblog-chyblog.stor.sinaapp.com/wp-content/uploads/2012/09/dbtest.zip