IndexedDB--HTML5本地存儲

什麼是IndexedDB

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

爲何要用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的特色

1. 支持事務、遊標、索引等數據庫操做

2. 存儲空間大

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

4. 異步性

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

• IE10+(親測IE10跪=.=)

• Firefox 10+、Chrome 23+、Opera 15+

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

• Android X5內核支持

注：移動端各類坑，在沒什麼把握以前千萬別像我同樣做死去弄移動端

IndexedDB經常使用功能代碼演示

因爲我是作了一個小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演示

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

pc端偶爾會由於代碼倉庫的緣由出現莫名bug，方便的話能夠clone源碼
地址在這裏：git@git.oschina.net:huangxizhou/indexDB.git

最後祝你們新年快樂！！！