利用IndexedDB API，可以在客戶端構建一個事務性數(shù)據(jù)庫烂叔，可以在客戶端存儲大量的結構化數(shù)據(jù)。
-
創(chuàng)建并連接到一個IndexedDB數(shù)據(jù)庫
var films= [
{
No: 1,
film_name: "寒戰(zhàn)",
director: ["梁樂民", "陸劍青"],
starring: ["郭富城", "梁家輝", "李治廷", "彭于晏", "楊采妮"],
Mins: "98min",
Release_time: "2012-11-08",
synopsis: "該片講述了在新時代背景下，一輛價值不菲的警察沖鋒車被劫持，隨之整個香港都陷入到安全危機搔预，警匪之間展開高智商較量。"
},
{
No: 2,
film_name: "踏血尋梅",
director: "翁子光",
starring: ["郭富城","春夏", "白只", "金燕玲"],
Mins: "120min",
Release_time: "2015-04-06",
synopsis: "影片以真實的肢解兇殺案改編叶组，以警察的視點講一個人性的故事拯田。片中主要的三個人物分別是內(nèi)地移民少女、失業(yè)貨車司機及工作狂警察甩十。"
},
{
No: 3,
film_name: "最愛",
director: "顧長衛(wèi)",
starring: ["章子怡", "郭富城", "陶澤如", "濮存昕", "孫海英", "蔣雯麗"],
Mins: "101min",
Release_time: "2011-05-10",
synopsis: "影片講述了一個小村莊的村民因為一場突如其來的惡疾而被打亂了平靜的生活船庇，人們在恐慌中展現(xiàn)出人性百態(tài)。身染絕癥的男女主角從相憐侣监、相依到相愛鸭轮，在這段不被祝福的感情中兩人用生命證明了愛情的尊嚴。"
},
{
No: 4,
film_name: "追兇者也",
director: "曹保平",
starring: ["劉燁", "張譯", "段博文", "王子文", "譚卓", "王硯輝", "顏北"],
Mins: "113min",
Release_time: "2016-09-14",
synopsis: "該影片講述了在偏遠的西部村寨悄然發(fā)生的一樁殘忍兇案橄霉，被警方推為首要疑兇的憨包汽修工宋老二與落魄古惑仔王友全窃爷、夜總會領班董小鳳一起上演了一部嬉笑怒罵的黑色逃殺故事"
},
{
No: 5,
film_name: "硬漢",
director: "丁晟",
starring: ["劉燁", "黃秋生", "孫紅雷", "于榮光", "劉洋", "陳雅倫"],
Mins: "95min",
Release_time: "2008-11-28",
synopsis: "講述一個退伍海軍“老三”的故事。講述的是一個中國式硬漢酪劫，塑造了平凡人中的英雄故事吞鸭。"
}
]
function createDB() {
var db;
//打開數(shù)據(jù)庫
var request = indexedDB.open("filmDB");
//連接數(shù)據(jù)庫失敗處理
request.onerror = function (e) {
console.log(e.target.errorCode)
}
//在版本發(fā)生變動時會觸發(fā)upgradeneeded事件。onupgradeneeded 是我們唯一可以修改數(shù)據(jù)庫結構的地方覆糟。
//在這里面，我們可以創(chuàng)建和刪除對象存儲空間以及構建和刪除索引
request.onupgradeneeded = function (e) {
db = e.target.result; // 獲取數(shù)據(jù)庫對象
//構建一個存儲空間
//每一個存入的對象都必須有“No”鍵遮咖。
var objectStore = db.createObjectStore("filmStore", {keyPath: "No"});
//創(chuàng)建索引
//unique: true表示是唯一索引滩字。
//multiEntry: true 表示starring的值如果是個數(shù)組，里面的每個數(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});
//確保存儲空間創(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ù)庫
filmStore.add(films[i]);
}
}
}
}
執(zhí)行后：
multiEntry屬性true/false的對比：
{multiEntry: true}
{multiEntry: false}
-
從IndexedDB數(shù)據(jù)庫中查找數(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是默認值麦箍，可以不寫
var objectStore = transaction.objectStore(storeName);//獲取存儲空間
var request = objectStore.get(keyPath);返回一個IDBRequest對象
request.onsuccess = function (e) {
console.log(e.target.result.film_name); //result屬性保存了與keyPath相關聯(lián)的數(shù)據(jù)
}
}
}
getData("filmStore", 3)
輸出結果：
使用游標進行條件查找：
//獲取2012年以后上映的電影
getRangeData("filmStore","Release_time", IDBKeyRange.lowerBound("2012-01-01"));
function getRangeData(storeName, index, range) { //存儲空間名，索引陶珠，檢索范圍
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) {//使用游標
var cursor = e.target.result;
if (cursor) {
console.log("影片名：" + cursor.value.film_name + " 上映時間：" + cursor.value.Release_time)
cursor.continue(); //游標移動到下一個位置
}
}
}
}
輸出結果：
-
更新數(shù)據(jù)庫
給一條數(shù)據(jù)增加一個項目：
updata({
storeName: "filmStore", //存儲空間名
index: "film_name", //索引
value: "硬漢", //檢索值
grade: "grade", //增加的鍵
gradeVal: "R" //增加的鍵值
})
//通過索引查找數(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ù)
}
}
}
結果：
Paste_Image.png
使用游標來更新數(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ù)的主鍵值添加到待更新對象上
obj.data.No = cursor.primaryKey;
//替換整個數(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: ["梁樂民", "陸劍青"],
starring: ["郭富城", "梁家輝", "李治廷", "彭于晏", "楊采妮"],
Mins: "98min",
Release_time: "2012-11-08",
synopsis: "該片講述了在新時代背景下，一輛價值不菲的警察沖鋒車被劫持揍诽，隨之整個香港都陷入到安全危機诀蓉，警匪之間展開高智商較量。"
}
})
-
刪除IndexedDB數(shù)據(jù)庫中的數(shù)據(jù)
使用主鍵刪除數(shù)據(jù)
var request = db.transaction(["filmStore"], "readwrite")
.objectStore("filmStore")
.delete(3);
request.onsuccess = function(event) {
// 刪除數(shù)據(jù)成功暑脆！
};
使用游標刪除數(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("硬漢")
})
刪除整個數(shù)據(jù)庫
indexedDB.deleteDatabase("filmDB");
