溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“HTML5的IndexedDB索引數據庫實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML5的IndexedDB索引數據庫實例分析”吧!
介紹
IndexedDB是HTML5 WEB數據庫，允許HTML5 WEB應用在用戶瀏覽器端存儲數據。對于應用來說IndexedDB非常強大，有用，可以在客戶端的chrome，IE，Firefox等WEB瀏覽器中存儲大量數據，下面簡單介紹一下IndexedDB的基本概念。什么是IndexedDB IndexedDB，HTML5新的數據存儲，可以在客戶端存儲，操作數據，可以使應用加載地交換，更好地響應。它具有關系型數據庫，擁有數據表，索引。它創建了數據類型和簡單的JavaScript持久對象的對象，每個對象可以有索引，可以有效地查詢和遍歷整個集合。此處為您提供了如何在Web應用程序中使用IndexedDB的真實示例。開始我們需要在執行前包含下面的代碼
JavaScript代碼將內容復制到
var indexedDB = window .indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
// window.IDB對象的前綴
var IDBTransaction = window .IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
var IDBKeyRange = window .IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
如果（！indexedDB）{
alert（“您的瀏覽器不支持穩定版本的IndexedDB。”）
}
：IndexedDB
在創建數據庫之前，我們首先需要為數據庫創建數據，假設我們有如下的用戶信息：
JavaScript代碼將內容復制到
var userData = [
{id：“ 1”，名稱：“ Tapas”，年齡：33，電子郵件：“ tapas@example.com”}，
{id：“ 2”，名稱：“ Bidulata”，年齡：55，電子郵件：“ bidu@home.com”}
];
現在我們需要用open（）方法打開我們的數據庫：
JavaScript代碼將內容復制到
var db;
var request = indexedDB .open（“ databaseName”，1）;
request.onerror = 函數（e）{
console.log（“ error：”，e）;
};
request.onsuccess = 函數（e）{
db = request .result;
console.log（“ success：” + db）;
};
request.onupgradeneeded = 函數（e）{
}
如上所示，我們已經打開了稱為“數據庫名稱”，指定版本號的數據庫，open（）方法有兩個參數：1.第一個參數是數據庫名稱，它會檢測名稱為“數據庫名稱”的數據庫是否已經存在，如果存在則打開它，否則創建新的數據庫。2.第二個參數是數據庫的版本，用于用戶更新數據庫結構。的onSuccess處理發生成功事件時“的onSuccess”被觸發，如果所有成功的請求都在此處理，我們可以通過賦值給DB變量保存請求的結果供以后使用。的onerror的處理程序發生錯誤事件時“的onerror”被觸發，如果打開數據庫的過程中失敗。Onupgradeneeded處理程序如果你想更新數據庫（創建，刪除或修改數據庫），那么您必須實現onupgradeneeded處理程序，使您可以在數據庫中做任何更改。在“ onupgradeneeded”處理程序中是可以更改數據庫的結構的唯一地方。創建和添加數據到表：IndexedDB使用對象存儲來存儲數據，而不是通過表。索引一個值存儲在對象存儲中，它與一個鍵相關聯。它允許我們創建任何對象存儲索引。索引允許我們訪問存儲在對象存儲中的值。下面的代碼顯示了如何創建對象存儲并插入預先準備好的數據：
JavaScript代碼將內容復制到
request.onupgradeneeded = 函數（事件）{
var objectStore = event .target.result.createObjectStore（“ users”，{keyPath：“ id”}）;
對于（var i in userData）{
objectStore.add（userData [i]）;
}
}
我們使用createObjectStore（）方法創建一個對象存儲。此方法接受兩個參數：-存儲的名稱和參數對象。在這里，我們有一個稱為“ users”的對象存儲，并定義了keyPath，這是對象唯一在這里，我們使用“ id”作為keyPath，這個值在對象存儲中是唯一的，我們必須確保該“ ID”的屬性在對象存儲中的每個對象中存在。一旦創建了對象存儲，我們可以開始使用循環添加數據進去。手動將數據添加到表：我們可以手動添加額外的數據到數據庫中。
JavaScript代碼將內容復制到
函數Add（）{
var request = db .transaction（[“ users”]，“ readwrite”）。objectStore（“ users”）
.add（{id：“ 3”，名稱：“ Gautam”，年齡：30，電子郵件：“ gautam@store.org”}）；
request.onsuccess = 函數（e）{
alert（“ Gautam已添加到數據庫。”）;
};
request.onerror = 函數（e）{
alert（“無法添加信息。”）;
}
}
該transaction（）方法是指定我們想要進行事務處理的對象存儲。transaction（）方法接受3個參數（之前，在我們在數據庫中做任何的CRUD操作（讀，寫，修改），必須使用事務。第二個和第三個是可選的）。第一個是我們要處理的對象存儲的列表，第二個指定我們是否要替換/讀取，第三個是版本變化。從表中讀取數據的get（）方法用于從對象存儲中檢索數據。我們之前已經設置對象的ID作為的的keyPath，所以GET（）方法將查找具有相同的ID值的對象。下面的代碼將返回我們命名為“Bidulata ”的對象：
JavaScript代碼將內容復制到
函數Read（）{
var objectStore = db .transaction（[“ users”]）。objectStore（“ users”）;
var request = objectStore .get（“ 2”）;
request.onerror = 函數（事件）{
alert（“無法從數據庫中檢索數據！”）;
};
request.onsuccess = 函數（事件）{
if（request.result）{
alert（“名稱：” + request.result.name +“，年齡：” + request.result.age +“，電子郵件：” + request.result.email）；
}其他{
alert（“在您的數據庫中找不到Bidulata！”）;
}
};
}
從表中讀取所有數據
下面的方法檢索表中的所有數據。此處我們使用游標來檢索對象存儲中的所有數據：
JavaScript代碼將內容復制到
函數ReadAll（）{
var objectStore = db .transaction（“ users”）。objectStore（“ users”）;
var req = objectStore .openCursor（）;
req.onsuccess = 函數（事件）{
db.close（）;
var res = event .target.result;
如果（res）{
alert（“ Key” + res.key +“是” + res.value.name +“，年齡：” + res.value.age +“，電子郵件：” + res.value.email）;
res.continue（）;
}
};
req.onerror = 函數 （e）{
console.log（“錯誤獲取：”，e）;
};
}
該openCursor（）用于遍歷數據庫中的多個記錄。在continue（）函數中繼續讀取下一條記錄。刪除表中的記錄下面的方法從對象中刪除記錄。
JavaScript代碼將內容復制到
函數Remove（）{
var request = db .transaction（[“ users”]，“ readwrite”）。objectStore（“ users”）。delete（“ 1”）;
request.onsuccess = 函數（事件）{
alert（“ Tapas的條目已從您的數據庫中刪除。”）;
};
}
我們將對象的keyPath作為參數傳遞給delete（）方法。最終代碼下面的方法從對象源中刪除一條記錄：
JavaScript代碼將內容復制到
<！DOCTYPE html >
<頭>
< meta http-equiv = “ Content-Type” content = “ text / html; charset = utf-8” />
< title > IndexedDB </ title >
<腳本類型= “ text / javascript” >
var indexedDB = window .indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
// window.IDB對象的前綴
var IDBTransaction = window .IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
var IDBKeyRange = window .IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
如果（！indexedDB）{
alert（“您的瀏覽器不支持穩定版本的IndexedDB。”）
}
var customerData = [
{id：“ 1”，名稱：“ Tapas”，年齡：33，電子郵件：“ tapas@example.com”}，
{id：“ 2”，名稱：“ Bidulata”，年齡：55，電子郵件：“ bidu@home.com”}
];
var db;
var request = indexedDB .open（“ newDatabase”，1）;
request.onerror = 函數（e）{
console.log（“ error：”，e）;
};
request.onsuccess = 函數（e）{
db = request .result;
console.log（“ success：” + db）;
};
request.onupgradeneeded = 函數（事件）{
}
request.onupgradeneeded = 函數（事件）{
var objectStore = event .target.result.createObjectStore（“ users”，{keyPath：“ id”}）;
對于（var i in userData）{
objectStore.add（userData [i]）;
}
}
函數Add（）{
var request = db .transaction（[“ users”]，“ readwrite”）
.objectStore（“用戶”）
.add（{id：“ 3”，名稱：“ Gautam”，年齡：30，電子郵件：“ gautam@store.org”}）；
request.onsuccess = 函數（e）{
alert（“ Gautam已添加到數據庫。”）;
};
request.onerror = 函數（e）{
alert（“無法添加信息。”）;
}
}
函數Read（）{
var objectStore = db .transaction（“ users”）。objectStore（“ users”）;
var request = objectStore .get（“ 2”）;
request.onerror = 函數（事件）{
alert（“無法從數據庫中檢索數據！”）;
};
request.onsuccess = 函數（事件）{
if（request.result）{
alert（“名稱：” + request.result.name +“，年齡：” + request.result.age +“，電子郵件：” + request.result.email）；
}其他{
alert（“在您的數據庫中找不到Bidulata！”）;
}
};
}
函數ReadAll（）{
var objectStore = db .transaction（“ users”）。objectStore（“ users”）;
var req = objectStore .openCursor（）;
req.onsuccess = 函數（事件）{
db.close（）;
var res = event .target.result;
如果（res）{
alert（“ Key” + res.key +“是” + res.value.name +“，年齡：” + res.value.age +“，電子郵件：” + res.value.email）;
res.continue（）;
}
};
req.onerror = 函數 （e）{
console.log（“錯誤獲取：”，e）;
};
}
函數Remove（）{
var request = db .transaction（[“ users”]，“ readwrite”）。objectStore（“ users”）。delete（“ 1”）;
request.onsuccess = 函數（事件）{
alert（“ Tapas的條目已從您的數據庫中刪除。”）;
};
}
</腳本>
</頭>
<身體>
< button onclick = “ Add（）” >添加記錄</ button >
< button onclick = “ Remove（）” >刪除記錄</ button >
< button onclick = “ Read（）” >檢索單個記錄</ button >
< button onclick = “ ReadAll（）” >檢索所有記錄</ button >
</ body >
</ html >
鎖
localStorage是不帶鎖功能的。那么要實現前端的數據共享并且需要鎖功能那就需要使用其他本存儲方式，索引indexDB。indededDB使用的是事務處理的機制，那實際上就是鎖功能。 做這個測試需要先簡單的封裝下indexedDB的操作，因為indexedDB的連接比較麻煩，而且兩個測試頁面都需要用到
JavaScript代碼將內容復制到
//db.js
//封裝事務操作
IDBDatabase.prototype.doTransaction =函數（f）{
f（this.transaction（[“ Obj”]，“ readwrite”）。objectStore（“ Obj”））;;
};
//連接數據庫，成功后調用main函數
（功能（）{
//打開數據庫
var cn = indexedDB .open（“ TestDB”，1）;
//創建數據對象
cn.onupgradeneeded =函數（e）{
e.target.result.createObjectStore（“ Obj”）;
};
//數據庫連接成功
cn.onsuccess =函數（e）{
main（e.target.result）;
};
}）（）;
接下來是兩個測試頁面
<腳本src = “ db.js” > </腳本>
<腳本>
//a.html
函數main（e）{
（函數callee（）{
//開始一個事務
e.doTransaction（function（e）{
e.put（1，“ test”）; //設置test的數值1
e.put（2，“ test”）; //設置test的數值2
}）;
setTimeout（callee）;
}）（）;
};
</腳本>
<腳本src = “ db.js” > </腳本>
<腳本>
//b.html
函數main（e）{
（函數callee（）{
//開始一個事務
e.doTransaction（function（e）{
//獲取測試的值
e.get（“ test”）. onsuccess =函數（e）{
console.log（e.target.result）;
};
}）;
setTimeout（callee）;
}）（）;
};
</腳本>
把本地存儲換成indexedDB事務處理。但是結果就不同
測試的時候b.html中可能不會立即有輸出，因為indexedDB正忙著處理a.html東西，b.html事務丟了了事務丟了中等待。但是無論如何，輸出結果也不會是1這個值。因為indexedDB的最小處理單位是事務，而不是localStorage那以表達式為單位。這樣只要把鎖和解鎖之間需要處理的東西放入一個事務中即可實現。另外，瀏覽器對indexedDB的支持不如localStorage，所以使用時還得考慮瀏覽器兼容。
到此，相信大家對“HTML5的IndexedDB索引數據庫實例分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
