HTML5中的IndexedDatabase

laowan發表於2015-05-11

   Indexed Database一種在瀏覽器中通過JavaScript操作的功能的資料庫,為同一個源執行的程式共享空間,在同一個源擁有的空間中可以建立多個資料庫,而在1個資料庫中又可以建立多個物件儲存。  物件儲存類似於mongDB中的資料集合。

  連線資料庫:

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

var db = null;

//連線資料庫
var request = indexedDB.open(`testdb`);
//連線資料庫成功
request.onsuccess = function(event) {
     //使用全域性變數引用資料庫
     db =event.target.result;
};
//連線資料庫失敗
request.onerror = function(event) {
     alert(`連線資料庫失敗`);
};

     建立物件儲存:

    通過呼叫createObjectStore方法建立,該方法只能在資料庫的版本更改事務中執行,setVersion方法後會自動開啟該事務。

  

//更改DB版本
var request = db.setVersion(`1.0`);

request.onsuccess= function(event) {
    //建立物件儲存
    var store = db.createObjectStore(`books`,{
           keyPath: `_id`,
           autoIncrement:true
     });
}

     資料的新增、刪除、引用

//獲得事務物件
var IDBTransaction = window.IDBTransaction || window.webkitIdbTransaction;

//新增資料函式
function addData(data){
     var transaction = db.transaction([`books`],IDBTransaction.READ_WRITE);
    //新增資料,也可使用put
    var request = transaction.objectStore(`books`).add(data);
    request.onsuccess = function(event) {
        //若成功,返回鍵
        var key = event.target.result;
        console.log(`success! key-> `,key);
    };
}

//資料引用
function getData(key) {
    //事務的開始
    var transaction = db.transaction([`books`]);
    //資料的引用
    var request = transaction.objectStore(`books`).get(key);
    request.onsuccess = function(event) {
         var data= event.target.result;
         console.log(`success data->`,data);
   };
}
//資料的刪除
function delData(key){
   //事務的開始
   var transaction = db.transaction([`books`],IDBtransaction.READ_WRITE);
   var request=transaction.objectStore(`books`).delete(key);
   
   request.onsuccess=function(event) { 
     console.log(`delete success`);
   };
}

   索引的建立:只能在資料庫版本更改事務中進行索引的建立

var request =db.setVersion(`1.1`);

request.onsuccess=function(event) {
    var transaction = event.target.result;
    var store=transaction.objectStore(`books`);
    //建立索引
     var index=store.createIndex(`index_name`,`column_name`);
};

使用索引檢索資料

var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;

//事務和物件儲存
var transation=db.transaction([`books`],IDBTransaction.READ_WRITE);
var store=transaction.objectStore(`books`);

//建立指定範圍物件10~100
var range=IDBKeyRange.bound(`10`,`100`);

//通過索引檢索資料
var request=store.index(`index_name`).openCursor(range);

request.onsuccess=function(event) {
     //獲取IDBCursor物件
    var cursor=event.target.result;
    //若資料存在
    if(cursor){
        var data =cursor.value;
        //更新資料
       data.name=`hh`;
       cursor.update(data);
       //cursor.delete刪除該資料
       
       //檢索下一條
       cursor.continue();
    }
};

事務的回滾

var request =index.openCursor(keyRange);
request.onsuccess=function(event) {
     var cursor=event.target.result;
     if(cursor) {
           //若有readonly標誌
          if(cursor.value.readonly){
                var transaction =event.target.transaction;
                //回滾
                transaction.abort();
          }else {
                cursor.delete();
                cursor.continue();
           }
     }
};

 


相關文章