利用IndexedDB API，可以在客戶端構(gòu)建一個(gè)事務(wù)性數(shù)據(jù)庫(kù)，可以在客戶端存儲(chǔ)大量的結(jié)構(gòu)化數(shù)據(jù)。

• 創(chuàng)建并連接到一個(gè)IndexedDB數(shù)據(jù)庫(kù)

var films= [ 
    {
        No: 1,
        film_name: "寒戰(zhàn)",
        director: ["梁樂(lè)民", "陸劍青"],
        starring: ["郭富城", "梁家輝", "李治廷", "彭于晏", "楊采妮"],
        Mins: "98min",
        Release_time: "2012-11-08",
        synopsis: "該片講述了在新時(shí)代背景下，一輛價(jià)值不菲的警察沖鋒車被劫持，隨之整個(gè)香港都陷入到安全危機(jī)，警匪之間展開(kāi)高智商較量。"
    },
    {
        No: 2,
        film_name: "踏血尋梅",
        director: "翁子光",
        starring: ["郭富城","春夏", "白只", "金燕玲"],
        Mins: "120min",
        Release_time: "2015-04-06",
        synopsis: "影片以真實(shí)的肢解兇殺案改編，以警察的視點(diǎn)講一個(gè)人性的故事。片中主要的三個(gè)人物分別是內(nèi)地移民少女、失業(yè)貨車司機(jī)及工作狂警察。"
    },
    {
        No: 3,
        film_name: "最愛(ài)",
        director: "顧長(zhǎng)衛(wèi)",
        starring: ["章子怡", "郭富城", "陶澤如", "濮存昕", "孫海英", "蔣雯麗"],
        Mins: "101min",
        Release_time: "2011-05-10",
        synopsis: "影片講述了一個(gè)小村莊的村民因?yàn)橐粓?chǎng)突如其來(lái)的惡疾而被打亂了平靜的生活，人們?cè)诳只胖姓宫F(xiàn)出人性百態(tài)。身染絕癥的男女主角從相憐、相依到相愛(ài)，在這段不被祝福的感情中兩人用生命證明了愛(ài)情的尊嚴(yán)。"
    },
    {
        No: 4,
        film_name: "追兇者也",
        director: "曹保平",
        starring: ["劉燁", "張譯", "段博文", "王子文", "譚卓", "王硯輝", "顏北"],
        Mins: "113min",
        Release_time: "2016-09-14",
        synopsis: "該影片講述了在偏遠(yuǎn)的西部村寨悄然發(fā)生的一樁殘忍兇案，被警方推為首要疑兇的憨包汽修工宋老二與落魄古惑仔王友全、夜總會(huì)領(lǐng)班董小鳳一起上演了一部嬉笑怒罵的黑色逃殺故事"
    },
    {
        No: 5,
        film_name: "硬漢",
        director: "丁晟",
        starring: ["劉燁", "黃秋生", "孫紅雷", "于榮光", "劉洋", "陳雅倫"],
        Mins: "95min",
        Release_time: "2008-11-28",
        synopsis: "講述一個(gè)退伍海軍“老三”的故事。講述的是一個(gè)中國(guó)式硬漢，塑造了平凡人中的英雄故事。"
    }
]

function createDB() {
    var db;
    //打開(kāi)數(shù)據(jù)庫(kù)
    var request = indexedDB.open("filmDB");

    //連接數(shù)據(jù)庫(kù)失敗處理
    request.onerror = function (e) {
        console.log(e.target.errorCode)
    }

    //在版本發(fā)生變動(dòng)時(shí)會(huì)觸發(fā)upgradeneeded事件。onupgradeneeded 是我們唯一可以修改數(shù)據(jù)庫(kù)結(jié)構(gòu)的地方。
    //在這里面，我們可以創(chuàng)建和刪除對(duì)象存儲(chǔ)空間以及構(gòu)建和刪除索引
    request.onupgradeneeded = function (e) {
        db = e.target.result; // 獲取數(shù)據(jù)庫(kù)對(duì)象
        //構(gòu)建一個(gè)存儲(chǔ)空間
        //每一個(gè)存入的對(duì)象都必須有“No”鍵。
        var objectStore = db.createObjectStore("filmStore", {keyPath: "No"});
        
        //創(chuàng)建索引
        //unique: true表示是唯一索引。
        //multiEntry: true 表示starring的值如果是個(gè)數(shù)組，里面的每個(gè)數(shù)組元素都可作為索引。
        objectStore.createIndex("film_name", "film_name", {unique: true});
        objectStore.createIndex("director", "director", {unique: false});
        objectStore.createIndex("starring", "starring", {multiEntry: true});
        objectStore.createIndex("Release_time", "Release_time", {unique: false});

        //確保存儲(chǔ)空間創(chuàng)建完成后執(zhí)行
        objectStore.transaction.oncomplete = function (e) {
            var filmStore = db.transaction("filmStore", "readwrite").objectStore("filmStore");
            for (var i = 0, length = films.length; i < length; i++) {
                //添加數(shù)據(jù)到數(shù)據(jù)庫(kù)
                filmStore.add(films[i]);
            }
        }
    }
}

執(zhí)行后：

multiEntry屬性true/false的對(duì)比：

{multiEntry: true}

{multiEntry: false}

• 從IndexedDB數(shù)據(jù)庫(kù)中查找數(shù)據(jù)

使用keyPath查詢：

function getData(storeName, keyPath) {
    var result = indexedDB.open("filmDB");
    result.onsuccess = function (e) {
        var db = e.target.result;
        var transaction = db.transaction(storeName, "readonly"); //readonly是默認(rèn)值，可以不寫
        var objectStore = transaction.objectStore(storeName);//獲取存儲(chǔ)空間
        var request = objectStore.get(keyPath);返回一個(gè)IDBRequest對(duì)象
        request.onsuccess = function (e) {
            console.log(e.target.result.film_name); //result屬性保存了與keyPath相關(guān)聯(lián)的數(shù)據(jù)
        }
    }
}
getData("filmStore", 3)

輸出結(jié)果：

使用游標(biāo)進(jìn)行條件查找：

//獲取2012年以后上映的電影
getRangeData("filmStore","Release_time", IDBKeyRange.lowerBound("2012-01-01"));

function getRangeData(storeName, index, range) { //存儲(chǔ)空間名，索引，檢索范圍
    indexedDB.open("filmDB").onsuccess = function (e) {
        var db = e.target.result;
        var objectStore = db.transaction(storeName).objectStore(storeName).index(index);
        objectStore.openCursor(range).onsuccess = function (e) {//使用游標(biāo)
            var cursor = e.target.result;
            if (cursor) {
                console.log("影片名：" + cursor.value.film_name + " 上映時(shí)間：" + cursor.value.Release_time)
                cursor.continue(); //游標(biāo)移動(dòng)到下一個(gè)位置
            }
        }
    }
}

輸出結(jié)果：

• 更新數(shù)據(jù)庫(kù)

給一條數(shù)據(jù)增加一個(gè)項(xiàng)目：

updata({
    storeName: "filmStore", //存儲(chǔ)空間名
    index: "film_name", //索引
    value: "硬漢", //檢索值
    grade: "grade", //增加的鍵
    gradeVal: "R" //增加的鍵值
})

//通過(guò)索引查找數(shù)據(jù)并更新數(shù)據(jù)
function updata(obj) {
    indexedDB.open("filmDB").onsuccess = function (e) {
        var db = e.target.result;
        var objectStore = db.transaction(obj.storeName, "readwrite").objectStore(obj.storeName);
        var objectStoreIndexResult = objectStore.index(obj.index);
        objectStoreIndexResult.get(obj.value).onsuccess = function (e) {
            var data = e.target.result;
            data[obj.grade] = obj.gradeVal; //添加鍵值
            objectStore.put(data); //更新數(shù)據(jù)
        }
    }
}

結(jié)果：

Paste_Image.png

使用游標(biāo)來(lái)更新數(shù)據(jù)：
替換掉整條數(shù)據(jù)。

function update(obj) {
    indexedDB.open("filmDB").onsuccess = function (e) {
        var db = e.target.result;
        db.transaction(obj.storeName, "readwrite")
          .objectStore(obj.storeName)
          .index(obj.index)
          .openCursor(obj.keyRange)
          .onsuccess = function (e) {
              var cursor = e.target.result;
              if (cursor) {
                  if (cursor.value.film_name == obj.film_name) {
                      //把被更新數(shù)據(jù)的主鍵值添加到待更新對(duì)象上
                      obj.data.No = cursor.primaryKey;  
                      //替換整個(gè)數(shù)據(jù)
                      cursor.update(obj.data).onsuccess = function (e) {
                          console.log("成功")
                      }
                  }
                  cursor.continue();
              }
          }
    }
}

update({
    storeName: "filmStore",
    index: "film_name",
    keyRange:IDBKeyRange.only("追兇者也"),
    film_name: "追兇者也",
    data: {
        film_name: "寒戰(zhàn)",
        director: ["梁樂(lè)民", "陸劍青"],
        starring: ["郭富城", "梁家輝", "李治廷", "彭于晏", "楊采妮"],
        Mins: "98min",
        Release_time: "2012-11-08",
        synopsis: "該片講述了在新時(shí)代背景下，一輛價(jià)值不菲的警察沖鋒車被劫持，隨之整個(gè)香港都陷入到安全危機(jī)，警匪之間展開(kāi)高智商較量。"
    }
})

• 刪除IndexedDB數(shù)據(jù)庫(kù)中的數(shù)據(jù)

使用主鍵刪除數(shù)據(jù)

var request = db.transaction(["filmStore"], "readwrite")
                  .objectStore("filmStore") 
                  .delete(3);
request.onsuccess = function(event) { 
    // 刪除數(shù)據(jù)成功！
};

使用游標(biāo)刪除數(shù)據(jù)

function leleteIndexData(obj) {
    indexedDB.open("filmDB").onsuccess = function (e) {
        var db = e.target.result;
        db.transaction(obj.storeName, "readwrite")
          .objectStore(obj.storeName)
          .index(obj.index)
          .openCursor(obj.keyRange)
          .onsuccess = function (e) {
              var cursor = e.target.result;
              if (cursor) {
                  cursor.delete().onsuccess = function () {
                      console.log("成功刪除")
                  }
              }
          }
    }
}
//刪除影片名為硬漢的電影數(shù)據(jù)
leleteIndexData({
    storeName: "filmStore",
    index: "film_name",
    keyRange:IDBKeyRange.only("硬漢") 
})

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

indexedDB.deleteDatabase("filmDB");