摘要：相比更加高效，包括索引事務(wù)處理和查詢功能。在本地存儲(chǔ)中，存儲(chǔ)的數(shù)據(jù)是最多的，不像的，存儲(chǔ)空間是無上限且永久的。由于受到的推崇。存儲(chǔ)數(shù)據(jù)如果調(diào)用添加的數(shù)據(jù)與已存在的數(shù)據(jù)有相同的，瀏覽器會(huì)將新數(shù)據(jù)替換已存在的數(shù)據(jù)。

indexedDB是一種輕量級(jí)NOSQL數(shù)據(jù)庫，是由瀏覽器自帶。相比Web Sql更加高效，包括索引、事務(wù)處理和查詢功能。在HTML5本地存儲(chǔ)中，IndexedDB存儲(chǔ)的數(shù)據(jù)是最多的，不像webStorage的4M，IndexedDB存儲(chǔ)空間是無上限且永久的。

因?yàn)樵蹅兊拇罄蠾3C不喜歡Web Sql(Sqlite)啊233，大佬都已經(jīng)放棄了Web Sql，力推IndexedDB
Web Sql API的主要實(shí)現(xiàn)者是Chrome、Safari、Opera、Android、IOS、BB。IE和FF都不支持Web Sql API。
IndexedDB由于受到W3C的推崇。瀏覽器廠商的實(shí)現(xiàn)情況要好一些。
注：反正IndexedDB跟Web Sql都是半斤八兩

支持事務(wù)、游標(biāo)、索引等數(shù)據(jù)庫操作

存儲(chǔ)空間大

永久存儲(chǔ)，刪除緩存不干擾IndexedDB

異步性

各大瀏覽器對(duì)IndexedDB的支持情況：

IE10+(親測(cè)IE10跪=.=)

Firefox 10+、Chrome 23+、Opera 15+

iPhone ios8-ios10 safari支持(X5內(nèi)核不支持)

Android X5內(nèi)核支持

注：移動(dòng)端各種坑，在沒什么把握之前千萬別像我一樣作死去弄移動(dòng)端

由于我是做了一個(gè)小Demo，所以暫且用這個(gè)Demo的代碼，偽代碼大家看看就好，后面會(huì)附上完整源碼地址233

創(chuàng)建數(shù)據(jù)庫

function createdatabase() {
    var resource = window.indexedDB.open("managerDB",1);//創(chuàng)建一個(gè)名為managerDB的數(shù)據(jù)庫，數(shù)量為1
    resource.onsuccess = function(event) {
        database = resource.result;//讓數(shù)據(jù)庫能在任何地方訪問
    };

    resource.onerror = function(event) {//數(shù)據(jù)庫創(chuàng)建失敗事件
        alert("can"t create database,error:" + resource.error);
    };

    resource.onupgradeneeded = function(event) {//第一次創(chuàng)建數(shù)據(jù)庫新建一張名為managerList的數(shù)據(jù)表
        var db = resource.result;
        var objectStore = db.createObjectStore("managerList",{keyPath:"time"});//key為time
    };
}

onupgradeneeded事件會(huì)在數(shù)據(jù)庫版本不同時(shí)觸發(fā)（event.oldVersion 可以獲取當(dāng)前數(shù)據(jù)庫版本），可以用來升級(jí)數(shù)據(jù)庫(添加刪除數(shù)據(jù)表),此事件也會(huì)在所請(qǐng)求的數(shù)據(jù)庫不存在的時(shí)候觸發(fā)，會(huì)自動(dòng)創(chuàng)建一個(gè)空數(shù)據(jù)庫。

存儲(chǔ)數(shù)據(jù)

如果調(diào)用put()添加的數(shù)據(jù)與已存在的數(shù)據(jù)有相同的key，瀏覽器會(huì)將新數(shù)據(jù)替換已存在的數(shù)據(jù)。

function save() {
    var contact = new Object();//新建一個(gè)對(duì)象
    var Name = document.getElementById("name").value;
    var Time = getSelect();
    var Description = document.getElementById("description").value;
    if(JTrim(Name) != "" && JTrim(Description) != "") {//JTrim()函數(shù)是用于判斷輸入是否為空值
        contact.name = Name;
        contact.time = Time;
        contact.description = Description;
        var transaction = database.transaction(["managerList"],"readwrite");//讀寫
        var resource = transaction.objectStore("managerList").put(contact);//利用put()將數(shù)據(jù)存入

    } else {
        alert("you should write something...");
        return;
    }

    resource.onsuccess = function(event) {//成功
        alert("create note success!");
    };

    resource.onerror = function(event) {//失敗
       alert("can"t create database,error:" + resource.error);//告知錯(cuò)誤
    };
}

JTrim()函數(shù)

function JTrim(s) {
    return s.replace(/(^s*)|(s*$)/g, "");
}

遍歷全部數(shù)據(jù)

利用IndexedDB的API來遍歷數(shù)據(jù)的時(shí)候，需要用到游標(biāo)，熟悉數(shù)據(jù)庫的各位應(yīng)該清楚游標(biāo)的用法

function loadAll() {
    var transaction = database.transaction(["managerList"],"readonly");
    var resource = transaction.objectStore("managerList").openCursor();
    var str = "";
    var result = document.getElementById("container-2");
    resource.onsuccess = function(event) {
        //創(chuàng)建游標(biāo)
        var cursor = event.target.result;
        //利用游標(biāo)對(duì)數(shù)據(jù)進(jìn)行遍歷
        if(cursor) {
            var list = cursor.value;
            var str += list.time;
            cursor.continue();//繼續(xù)循環(huán)
        } else {//游標(biāo)循環(huán)到底之后，打印出str
            alert(str);//在這里我們就能得出list.time的值了  
        }
    };

    resource.onerror = function(event) {//出現(xiàn)錯(cuò)誤給出提示
        alert("can"t create database,error:" + resource.error);
    };
}

查詢單條數(shù)據(jù)

function search(element) {
    var description = element.getAttribute("value");
    var transaction = database.transaction(["managerList"], "readonly");//只讀
    var objectStore = transaction.objectStore("managerList");
    var request = objectStore.get(description);//利用get()方法找到這條數(shù)據(jù)
    request.onerror = function(event) {
        alert("error:：" + request.error);
    };
    request.onsuccess = function(event) {
    var b = request.result;
    alert(b.description);//最終得到這條數(shù)據(jù)的description部分
    };
}

刪除數(shù)據(jù)

function del() {
    var resource = document.getElementById("container-2");
    var b = resource.getElementsByTagName("input");
    var div = document.getElementById("container-2");
    var result = 0;
    for(var i = 0;i < b.length;i ++) {
        if(b[i].checked == true) {
            var time = b[i].value;
            var transaction = database.transaction(["managerList"], "readwrite");//讀寫
            var objectStore = transaction.objectStore("managerList");
            var request = objectStore.delete(time);//刪除數(shù)據(jù)的核心就是利用delete方法
            request.onerror = function (event) {
                alert("error：" + request.error);
            };
 
            request.onsuccess = function (event) {
                alert("delete note success!");
            };
        }
    }
}

刪除整個(gè)數(shù)據(jù)庫

IndexDB只能在控制臺(tái)里面刪除數(shù)據(jù)，并不能刪除數(shù)據(jù)表及數(shù)據(jù)庫，所以刪除只能代碼執(zhí)行

window.indexedDB.deleteDatabase("數(shù)據(jù)庫名稱");

Demo地址(出現(xiàn)bug請(qǐng)移步pc)

pc端偶爾會(huì)因?yàn)榇a倉庫的原因出現(xiàn)莫名bug，方便的話可以clone源碼
地址在這里：[email protected]:huangxizhou/indexDB.git

最后祝大家新年快樂?。?！