談談html5存儲之IndexdDB

IndexdDB簡介

html5中indexdDB是一種能在瀏覽器持久的存儲結構化數據的數據庫；且具有豐富的查詢能力。

新建一個IndexdDB數據庫

IDBOpenDBRequest定義有幾個重要的屬性：

• onerror：新建或打開數據庫失敗的回調
• onsuccess：新建或打開數據庫成功的回調
• onupgradeneeded：新建或打開數據庫版本發生變化時觸發的回調

以上的幾個API均是異步執行，所以我們在它們的回調函數中處理我們需要的數據。

 

function createIndexDB(dbName,version) {//根據數據庫名稱和數據庫版本號來打開或者新建一個數據庫
    var version = version || 1;
    var request = window.indexedDB.open(dbName,version);
    request.onerror = function(e) { //新建或打開數據失敗的回調函數
        console.log(e);
    };

    request.onsuccess = function(e) { //新建或打開數據庫成功的回調
        mydb.db = e.target.result; // 把result賦值給對象屬性
    };

    //初始化object store  也可以//刪除object store
    request.onupgradeneeded = function(e){
        var db = e.target.result;
        if(!db.objectStoreNames.contains('Employees')) { //是否包含員工這個對象
            //db.createObjectStore('Employees',{keyPath:'id'}); // keyPath 指定對象的哪個屬性作為主鍵
            //db.createObjectStore('Employees',{autoIncrement:true}); //keyGenerate   主鍵自增長 ，任意值，
            var store = db.createObjectStore('Employees',{keyPath:'id'}); // 同時返回一個store
            store.createIndex('nameIndex','name',{unique:true}); //創建name的索引
            store.createIndex('ageIndex','age',{unique:true});//創建age的索引
        }
        /*//刪除object store
        if(db.objectStoreNames.contains('Employees')) {  //先查詢是否存在
            db.deleteObjectStore('Employees');
        }*/

        console.log("db version change to" + version);
    };

}

 新建數據庫成功：

初始化一些數據：

var mydb = {
    name:'firstDB',
    version:1, //只能是整數，3.31--->會轉成3
    db:null
};
// employee數據
var Employee= [{
        id:'lx001',
        name:'lucas',
        age:20
    },
    {
        id:'lx002',
        name:'lucy',
        age:18
    },
    {
        id:'lx003',
        name:'mike',
        age:22
    },
    {
        id:'lx004',
        name:'susan',
        age:21
    }
];

添加數據Create：

 

//添加數據
function addData(db,storename){
    var transaction = db.transaction(storename,"readwrite");//首先獲取事務
    var store = transaction.objectStore(storename);//根據事務獲取對應的storename獲取我們新建數據庫的store
    for(var i = 0; i < employee.length; i++) {//遍歷我們的數據
        store.add(employee[i]);//add到store中
    }
}

 

調用addData函數添加數據：addData(mydb.db, 'Employee')

成功添加數據；

indexdDB中事務

數據庫都會有事務操作，indexdDB中根據數據庫名字即read/write來獲取事務，如添加數據庫第一句代碼。事務中要指定需要的object store；同時事務中具有3中模式：

• read：只讀，不可修改數據庫可以並發執行；
• readwrite：讀寫，可以修改數據庫；
• verionchange：數據庫版本變更

indexdDB中的主鍵，索引，游標

主鍵：在新建數據庫的時候指定數據的某個字段作為主鍵且該字段具有唯一性；如本文中就指定了id作為了主鍵（keyPath）。同時也可以使用自動增長數字作為鍵值(keyGenerator)；同時也可以不指定。

索引：索引頁是數據庫中高效查詢的一種方法；同時indexdDB也提供了創建索引的功能；如上新建數據庫的時候我們就順便創建了兩個索引（nameIndex/ageIndex）。創建索引需要3個參數：索引名稱，創建索引的字段，索引屬性是否唯一；

游標：有了索引沒有游標索引豈不是很寂寞，indexdDB同時也提供了創建游標的方法；我們可以使用游標來遍歷object store了；

下面是創建游標：

 

//使用游標來獲取值，結合索引
function getDataByFetch(db, storename,indexType, indexName) {
    var transaction = db.transaction(storename);
    var store = transaction.objectStore(storename);
    var index = store.index(indexType); //
    var request = index.openCursor(IDBKeyRange.only(indexName)); //打開游標，得到一個請求；store打開的是哪個類型的索引，only中就是哪個索引的值
    request.onsuccess = function(e) {
        var cursor = e.target.result;
        if(cursor) {
            console.log(cursor.key)
            var e = cursor.value;
            console.log(e);
            cursor.continue(); //游標下一位，沒有會返回undefined
        }
    }
}

 

游標創建完成；

平常數據庫中常常使用的CRUD，indexdDB也提供了相應的方法；上面已經介紹了添加數據

查詢數據 Retrieve：

//根據id獲取數據
function getDataByKey(db,storename,id){
    var transaction = db.transaction(storename,'readwrite');//先獲取事務
    var store = transaction.objectStore(storename);//獲取object store
    var req = store.get(id); // 根據指定的keyPath的值查詢 即id值
    req.onsuccess = function(e) {
        var employee = e.target.result;
        console.log(employee.name);
    }
}
//利用索引來獲取值
function getDataByIndex(db,storename,indexType, indexName) {
    var transaction = db.transaction(storename);//根據storename獲取事務
    var store = transaction.objectStore(storename); //storename為參數用事務獲取store
    var index = store.index(indexType);//使用index方法獲取IDBIndex對象
    index.get(indexName).onsuccess = function(e) {
        var e = e.target.result;
        console.log(e);
    }
}

//同時也可以使用游標來獲取值，結合索引
function getDataByFetch(db, storename,indexType, indexName) {
    var transaction = db.transaction(storename);
    var store = transaction.objectStore(storename);
    var index = store.index(indexType); //
    var request = index.openCursor(IDBKeyRange.only(indexName)); //打開游標，得到一個請求；store打開的是哪個類型的索引，only中就是哪個索引的值
    request.onsuccess = function(e) {
        var cursor = e.target.result;
        if(cursor) {
            console.log(cursor.key)
            var e = cursor.value;
            console.log(e);
            cursor.continue(); //游標下一位，沒有會返回undefined
        }
    }
}

 

 

查詢結果：

更新數據 update：

// 更新數據
function updateData(db, storename, id){
    var transaction = db.transaction(storename, 'readwrite'); //獲取事務
    var store = transaction.objectStore(storename);// 得到指定的object store
    var req = store.get(id);//根據id查找指定的對象
    req.onsuccess = function(e) {
        var employee = e.target.result;//得到對象
        employee.age = 19;//修改值
        store.put(employee);//將修改之后的值放回指定的object store中
    };
}

刪除數據 delete：

// 根據id刪除指定數據
function deleteData(db, storename, id){
    var transaction = db.transaction(storename, 'readwrite');//獲取事務
    var store = transaction.objectStore(storename); // 得到對應的object store
    store.delete(id);// 根據id刪除對應store中的數據
}

清空object store

//清空object　store
function clearStore(db, storename) {
    var transaction = db.transaction(storename,'readwrite'); // 首先獲取事務
    var store = transaction.objectStore(storename); //其次得到指定的object store
    store.clear(); // store調用clear方法
}

怎么樣， 是不是覺得indexdDB很強大呢？以上都是自己的一些個人學習收獲，如有不對的地方歡迎大家批評指正。謝謝！