前端瀏覽器數據庫indexedDB入門教程

概要

最近在刷紅寶書的時候發現indexedDB部分的講解有點混亂，且書上的用法和目前網上教程的用法差距還是蠻大的，讀起來可能不是很好懂，他別是setVersion（）方法，我寫了半天也用不了，上網查詢之後request = indexedDB.open("admin",17);打開數據庫的同時就可以創建版本號了。

indexedDB

IndexedDB是HTML5規範裏新出現的瀏覽器裏內置的數據庫。對於在瀏覽器裏存儲數據，你可以使用cookies或local storage，但它們都是比較簡單的技術，而IndexedDB提供了類似數據庫風格的數據存儲和使用方式。存儲在IndexedDB裏的數據是永久保存，不像cookies那樣只是臨時的。IndexedDB裏提供了查詢數據的功能，在online和offline模式下都能使用。你可以用IndexedDB存儲大型數據。
IndexedDB裏數據以對象的形式存儲，每個對象都有一個key值索引。IndexedDB裏的操作都是事務性的。一種對象存儲在一個objectStore裏，objectStore就相當於關係數據庫裏的表。IndexedDB可以有很多objectStore，objectStore裏可以有很多對象。

使用教程

第一步檢查你的瀏覽器是否支持該數據庫
let indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || null;
if(indexedDB){
console.log(“yes”)
}else{
console.log(“yes”)
}
檢查

然後打開數據庫，設置版本號，並在全局或者局部環境下設置些需要的變量備用
request表示請求，db表示database數據庫，objectStore將會是一個存儲空間變量

 let request ,db,objectStore; 
request = indexedDB.open("admin",17);

請求連接indexedDB後會有三個方法onerror、onsuccess、onupgradeneeded，分別會在打開失敗、打開成功以及版本更新時調用，以此我們可以用來測試數據庫是否連接成功。（注意版本更新過後如果版本號沒有增加是不用再調用onupgradeneeded的）

request.onerror = function (event) {
    alert("錯誤");
};
request.onsuccess = (event)=>{
    alert("成功");
    db = event.target.result;//獲取結果
};

request.onupgradeneeded = function(event){
    db = event.target.result;
    alert("版本更新");
};

到這裏之後就可以開始使用indexedDB了。版本更新之後，我們可以創建一個新的存儲空間，這裏名爲users，設置主鍵keyPath：“username”，Auto-increment 會在新記錄插入表中時生成一個唯一的數字。
再調用objectStore.createIndex('firstName', 'firstName', {unique: false});來增加索引，store.createIndex 方法接收三個參數，第一個爲索引名，第二個爲數據對象的屬性，第三個參數爲可選參數，值爲一個js對象。該對象中的 unique 屬性爲 true，代表索引值不可以相同，即兩條數據的 firstName 不可以相同，爲 false 則可以相同。

            request.onupgradeneeded = function(event){
                db = event.target.result;alert(db.version);
                alert("版本更新");
                if(!db.objectStoreNames.contains("users")) {
                    objectStore = db.createObjectStore("users", {keyPath: "username",autoIncrement: false});
                    console.log("我需要創建一個新的存儲對象");
                    objectStore.createIndex('firstName', 'firstName', {unique: false});
                    objectStore.createIndex('lastName', 'lastName', {unique: false});
                }
            };

檢查一下（順便在開發者工具裏檢查下自己的objectStore是否出現了）


之後就可以愉快的開始使用indexedDB，使用之前我們得先創建一個事務，indexedDB的數據增刪改查都需要通過事務來做。

var transaction = db.transaction("users", 'readwrite');
//創建事務，定義爲讀寫方式，”user“部分可以改成一個數組添加多個   
objectStore = transaction.objectStore("users");//訪問特定的存儲空間

之後用add()方法就可以給存儲空間添加一個對象，完整代碼如下

        let indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || null;
        request = indexedDB.open("admin",1);
        //設置版本號
        request.onerror = function (event) {
            alert("錯誤");
        };
        request.onsuccess = (event)=>{
            alert("成功");
            db = event.target.result;//獲取結果
            var user = {
                username:"007",
                firstName:"janmes",
                lastName:"bond",
                password:"foo"
            };
            var transaction = db.transaction("users", 'readwrite');
            objectStore = transaction.objectStore("users");
            objectStore.add(user);
        };

        request.onupgradeneeded = function(event){
            db = event.target.result;alert(db.version);
            alert("版本更新");
            if(!db.objectStoreNames.contains("users")) {
                objectStore = db.createObjectStore("users", {keyPath: "username",autoIncrement: false});
                console.log("我需要創建一個新的存儲對象");
                objectStore.createIndex('firstName', 'firstName', {unique: false});
                objectStore.createIndex('lastName', 'lastName', {unique: false});
            }
        };

檢查下數據庫的內容

這樣就成功了！另外還有 get()、put()、delete()甚至是openCursor()方法，用法和add()差不了太多，使用也比較簡單，可以自行百度。是剛開始使用數據庫連接數據庫的部分比較容易踩坑，所以就寫了這篇博文給大家，希望大家喜歡。