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

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

因為咱們的大佬W3C不喜歡Web Sql(Sqlite)啊233，大佬都已經放棄了Web Sql，力推IndexedDB
Web Sql API的主要實現者是Chrome、Safari、Opera、Android、IOS、BB。IE和FF都不支持Web Sql API。
IndexedDB由于受到W3C的推崇。瀏覽器廠商的實現情況要好一些。
注：反正IndexedDB跟Web Sql都是半斤八兩

支持事務、游標、索引等數據庫操作

存儲空間大

永久存儲，刪除緩存不干擾IndexedDB

異步性

各大瀏覽器對IndexedDB的支持情況：

IE10+(親測IE10跪=.=)

Firefox 10+、Chrome 23+、Opera 15+

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

Android X5內核支持

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

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

創建數據庫

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

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

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

onupgradeneeded事件會在數據庫版本不同時觸發（event.oldVersion 可以獲取當前數據庫版本），可以用來升級數據庫(添加刪除數據表),此事件也會在所請求的數據庫不存在的時候觸發，會自動創建一個空數據庫。

存儲數據

如果調用put()添加的數據與已存在的數據有相同的key，瀏覽器會將新數據替換已存在的數據。

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

    } 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);//告知錯誤
    };
}

JTrim()函數

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

遍歷全部數據

利用IndexedDB的API來遍歷數據的時候，需要用到游標，熟悉數據庫的各位應該清楚游標的用法

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) {
        //創建游標
        var cursor = event.target.result;
        //利用游標對數據進行遍歷
        if(cursor) {
            var list = cursor.value;
            var str += list.time;
            cursor.continue();//繼續循環
        } else {//游標循環到底之后，打印出str
            alert(str);//在這里我們就能得出list.time的值了  
        }
    };

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

查詢單條數據

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()方法找到這條數據
    request.onerror = function(event) {
        alert("error:：" + request.error);
    };
    request.onsuccess = function(event) {
    var b = request.result;
    alert(b.description);//最終得到這條數據的description部分
    };
}

刪除數據

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);//刪除數據的核心就是利用delete方法
            request.onerror = function (event) {
                alert("error：" + request.error);
            };
 
            request.onsuccess = function (event) {
                alert("delete note success!");
            };
        }
    }
}

刪除整個數據庫

IndexDB只能在控制臺里面刪除數據，并不能刪除數據表及數據庫，所以刪除只能代碼執行

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

Demo地址(出現bug請移步pc)

pc端偶爾會因為代碼倉庫的原因出現莫名bug，方便的話可以clone源碼
地址在這里：git@git.oschina.net:huangxizhou/indexDB.git

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