HTML (016) HTML5 IndexedDB 索引資料庫
一、誕生背景:
隨著瀏覽器的功能不斷增強,越來越多的網站開始考慮,將大量資料儲存在客戶端,這樣可以減少從伺服器獲取資料,直接從本地獲取資料。現有的瀏覽器資料儲存方案,都不適合儲存大量資料:Cookie
的大小不超過4KB,且每次請求都會發送回伺服器;LocalStorage 在 2.5MB 到 10MB
之間(各家瀏覽器不同),而且不提供搜尋功能,不能建立自定義的索引。所以,需要一種新的解決方案,這就是 IndexedDB 誕生的背景。
IndexedDB是瀏覽器提供的本地資料庫, 允許儲存大量資料,提供查詢介面,還能建立索引。這些都是 LocalStorage
所不具備的。就資料庫型別而言,IndexedDB 不屬於關係型資料庫(不支援 SQL 查詢語句),更接近 NoSQL 資料庫。
IndexedDB裡資料以物件的形式儲存,每個物件都有一個key值索引。IndexedDB裡的操作都是事務性的。一種物件儲存在一個objectStore裡,objectStore就相當於關係資料庫裡的表。IndexedDB可以有很多objectStore,objectStore裡可以有很多物件。每個物件可以用key值獲取。
二、特點:
- 鍵值對儲存。 IndexedDB 內部採用物件倉庫(object store)存放資料。所有型別的資料都可以直接存入,包括 JavaScript 物件。物件倉庫中,資料以"鍵值對"的形式儲存,每一個數據記錄都有對應的主鍵,主鍵是獨一無二的,不能有重複,否則會丟擲一個錯誤。
- 非同步。 IndexedDB 操作時不會鎖死瀏覽器,使用者依然可以進行其他操作,這與 LocalStorage 形成對比,後者的操作是同步的。非同步設計是為了防止大量資料的讀寫,拖慢網頁的表現。
- 支援事務。 IndexedDB 支援事務(transaction),這意味著一系列操作步驟之中,只要有一步失敗,整個事務就都取消,資料庫回滾到事務發生之前的狀態,不存在只改寫一部分資料的情況。
- 同源限制。 IndexedDB 受到同源限制,每一個數據庫對應建立它的域名。網頁只能訪問自身域名下的資料庫,而不能訪問跨域的資料庫。
- 儲存空間大。 IndexedDB 的儲存空間比 LocalStorage 大得多,一般來說不少於 250MB,甚至沒有上限。
- 支援二進位制儲存。 IndexedDB 不僅可以儲存字串,還可以儲存二進位制資料(ArrayBuffer 物件和 Blob 物件)。
三、基本概念:
-
資料庫。IDBDatabase 物件
資料庫是一系列相關資料的容器。每個域名(嚴格的說,是協議 + 域名 + 埠)都可以新建任意多個數據庫。
IndexedDB
資料庫有版本的概念。同一個時刻,只能有一個版本的資料庫存在。如果要修改資料庫結構(新增或刪除表、索引或者主鍵),只能通過升級資料庫版本完成。 -
物件倉庫。IDBObjectStore 物件
每個資料庫包含若干個物件倉庫(object store)。它類似於關係型資料庫的表格。 -
資料記錄。IDBKeyRange 物件
物件倉庫儲存的是資料記錄。每條記錄類似於關係型資料庫的行,但是隻有主鍵和資料體兩部分。主鍵可以是資料記錄裡面的一個屬性,也可以指定為一個遞增的整數編號。 -
索引。IDBIndex 物件
-
事務。IDBTransaction 物件
資料記錄的讀寫和刪改,都要通過事務完成。事務物件提供error
、abort
和complete
三個事件,用來監聽操作結果。 -
操作請求:IDBRequest 物件。 幾乎是所有 indexedDB 操作的返回值,indexedDB 操作請求
IDBRequest.result 結果
IDBRequest.onerror 異常事件
IDBRequest.onsuccess 成功的事件 -
指標: IDBCursor 物件
四、indexedDB 對比 LocalStorage
IndexedDB和LocalStorage都是用來在瀏覽器裡儲存資料,但它們使用不同的技術,有不同的用途,你需要根據自己的情況適當的選擇使用哪種。LocalStorage是用key-
value鍵值模式儲存資料,但跟IndexedDB不一樣的是,它的資料並不是按物件形式儲存。它儲存的資料都是字串形式。如果你想讓LocalStorage儲存物件,你需要藉助JSON.stringify()
能將物件變成字串形式,再用JSON.parse()
將字串還原成物件。但如果要儲存大量的複雜的資料,這並不是一種很好的方案。畢竟,localstorage就是專門為小數量資料設計的,它的api是同步的。
IndexedDB很適合儲存大量資料,它的API是非同步呼叫的。IndexedDB使用索引儲存資料,各種資料庫操作放在事務中執行。IndexedDB甚至還支援簡單的資料型別。IndexedDB比localstorage強大得多,但它的API也相對複雜。
對於簡單的資料,你應該繼續使用localstorage,但當你希望儲存大量資料時,IndexedDB會明顯的更適合,IndexedDB能提供你更為複雜的查詢資料的方式。
五、基本操作:
1、瀏覽器是否支援:
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
if(!window.indexedDB){
console.log("你的瀏覽器不支援IndexedDB");
}
2、開啟資料庫&新建資料庫
新建資料庫與開啟資料庫是同一個操作。如果指定的資料庫不存在,就會新建。不同之處在於,後續的操作主要在upgradeneeded
事件的監聽函式裡面完成,因為這時版本從無到有,所以會觸發這個事件。
一旦你的瀏覽器支援IndexedDB,我們就可以開啟它。但不能直接開啟IndexedDB資料庫。IndexedDB需要你建立一個請求來開啟它。
使用 IndexedDB 的第一步是開啟資料庫,使用indexedDB.open()
方法。
var request = window.indexedDB.open(databaseName, version);
這個方法接受兩個引數,第一個引數是字串,表示資料庫的名字。如果指定的資料庫不存在,就會新建資料庫。第二個引數是整數,表示資料庫的版本。如果省略,開啟已有資料庫時,預設為當前版本;新建資料庫時,預設為1
。
如果沒有版本號變化,而且頁面之前被開啟過,你會獲得一個onsuccess
事件。如果有錯誤發生時則觸發onerror
事件。如果你之前沒有關閉連線,則會觸發onblocked
事件。
indexedDB.open()
方法返回一個 IDBRequest
物件。這個物件通過三種事件error
、success
、upgradeneeded
,處理開啟資料庫的操作結果。
onupgradeneeded
事件在第一次開啟頁面初始化資料庫時會被呼叫,或在當有版本號變化時被呼叫。所以,你應該在onupgradeneeded
函式裡建立你的儲存資料。通過事件物件的target.result
屬性,拿到資料庫例項。
通常,新建資料庫以後,第一件事是新建物件倉庫objectStore(即新建表)。一個objectStore相當於一張表,裡面儲存的每條資料和一個鍵相關聯。
表中的主鍵(key)是預設建立索引的屬性。比如,資料記錄是{ id: 1, name: '張三' }
,那麼id
屬性可以作為主鍵。
db.createObjectStore('students',{keyPath:"id"});
主鍵也可以指定為下一層物件的屬性,比如{ foo: { bar: 'baz' } }
的foo.bar
也可以指定為主鍵。
如果資料記錄裡面沒有合適作為主鍵的屬性,那麼可以讓 IndexedDB 自動生成主鍵。
db.createObjectStore('students',{autoIncrement: true});
eg:資料庫新建成功以後,新增一張叫做person
的表格,主鍵是id
。
var db;
var objectStore;
var request = window.indexedDB.open("testDB", 2);
request.onerror = function (event) {}
request.onsuccess = function (event) {
db = request.result//可以拿到資料庫物件
}
//如果指定的版本號,大於資料庫的實際版本號,就會發生資料庫升級事件upgradeneeded
request.onupgradeneeded = function (event) {
db = event.target.result;
if (!db.objectStoreNames.contains('person')) {//判斷表是否存在
objectStore = db.createObjectStore('person', { keyPath: 'id' }); //建立表
//自動生成主鍵db.createObjectStore(
// 'person',
// { autoIncrement: true }
//);
}
//新建索引,引數索引名稱、索引所在的屬性、配置物件
objectStore.createIndex('email', 'email', { unique: true });
}
3、關閉、刪除資料庫
關閉資料庫可以直接呼叫資料庫物件的close方法。
刪除資料庫使用indexedDB物件的deleteDatabase方法。
function openDB (name,version) {
var version=version || 1;
var request=window.indexedDB.open(name,version);
request.onerror=function(e){
console.log(e.currentTarget.error.message);
};
request.onsuccess=function(e){
myDB.db=e.target.result;
};
request.onupgradeneeded=function(e){
console.log('DB version changed to '+version);
};
}
function closeDB(db){
db.close();
}
function deleteDB(name){
indexedDB.deleteDatabase(name);
}
var myDB={
name:'test',
version:3,
db:null
};
openDB(myDB.name,myDB.version);
setTimeout(function(){
closeDB(myDB.db);
deleteDB(myDB.name);
},500);
4、新增資料
為了往資料庫裡新增資料,我們首先需要建立一個事務,並要求具有讀寫許可權。在indexedDB裡任何的存取物件的操作都需要放在事務裡執行。
新建事務時必須指定表格名稱和操作模式("只讀"或"讀寫")。新建事務以後,通過IDBTransaction.objectStore(name)
方法,拿到
IDBObjectStore 物件,再通過表格物件的add()
方法,向表格寫入一條記錄。
寫入操作是一個非同步操作,通過監聽連線物件的success
事件和error
事件,瞭解是否寫入成功。
function add() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.add({ id: 1, name: '張三', age: 24, email: '[email protected]' });
request.onsuccess = function (event) {
console.log('資料寫入成功');
};
request.onerror = function (event) {
console.log('資料寫入失敗');
}
}
add();
5、讀取資料
objectStore.get()
方法用於讀取資料,引數是主鍵的值。
通過key取出物件,即往get()
方法裡傳入物件的key值,取出相應的物件。
function read() {
var transaction = db.transaction(['person']);
var objectStore = transaction.objectStore('person');
var request = objectStore.get(1);
console.log(request.id);
request.onerror = function(event) {
console.log('事務失敗');
};
request.onsuccess = function( event) {
if (request.result) {
console.log('Name: ' + request.result.name);
console.log('Age: ' + request.result.age);
console.log('Email: ' + request.result.email);
} else {
console.log('未獲得資料記錄');
}
};
}
read();
6、資料更新
IDBObject.put()
方法。
以下程式碼使用put()
方法自動更新了主鍵為1
的記錄。
function update() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.put({ id: 1, name: '李四', age: 35, email: '[email protected]' });
request.onsuccess = function (event) {
console.log('資料更新成功');
};
request.onerror = function (event) {
console.log('資料更新失敗');
}
}
update();
為了更新一個物件,首先要把它取出來,修改,然後再放回去。
var transaction = db.transaction(["students"],"readwrite");
var objectStore = transaction.objectStore("students");
var request = objectStore.get(rollNo);
request.onsuccess = function(event){
console.log("Updating : "+request.result.name + " to " + name);
request.result.name = name;
objectStore.put(request.result);
};
7、資料刪除
IDBObjectStore.delete()
方法用於刪除記錄。
刪除跟新增一樣,需要建立事務,然後呼叫刪除介面,通過key刪除物件。
function remove() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.delete(1);
request.onsuccess = function (event) {
console.log('資料刪除成功');
};
}
remove();
1、呼叫object store的clear方法可以清空object store
function clearObjectStore(db,storeName){
var transaction=db.transaction(storeName,'readwrite');
var store=transaction.objectStore(storeName);
store.clear();
}
2、呼叫資料庫例項的deleteObjectStore方法可以刪除一個object store。
這個就得在onupgradeneeded裡面呼叫了。
if(db.objectStoreNames.contains('students')){
db.deleteObjectStore('students');
}
8、索引的使用
新增索引後可以使用索引查詢資料
索引的意義在於,可以讓你搜索任意欄位,也就是說從任意欄位拿到資料記錄。如果不建立索引,預設只能搜尋主鍵(即從主鍵取值)。
假定新建表格的時候,對name
欄位建立了索引。
新建索引。IDBObject.createIndex()
的三個引數分別為索引名稱、索引所在的屬性、配置物件(說明該屬性是否包含重複的值)。
objectStore.createIndex('name', 'name', { unique: false });
現在,就可以從name
找到對應的資料記錄了。
var transaction = db.transaction(['person'], 'readonly');
var store = transaction.objectStore('person');
var index = store.index('name');
var request = index.get('李四');
request.onsuccess = function (e) {
var result = e.target.result;
if (result) {
// ...
} else {
// ...
}
}
9、遍歷資料
遍歷資料表格的所有記錄,要使用指標物件 IDBCursor。
openCursor()
方法是一個非同步操作,所以要監聽success
事件。
curson.contine()會使遊標下移,直到沒有資料返回undefined
index.openCursor()/``index.openKeyCursor()方法:在不傳遞引數的時候會獲取object store所有記錄
function readAll() {
var objectStore = db.transaction('person').objectStore('person');
var request= objectStore.openCursor()
request.onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
console.log('Id: ' + cursor.key);
console.log('Name: ' + cursor.value.name);
console.log('Age: ' + cursor.value.age);
console.log('Email: ' + cursor.value.email);
cursor.continue();
} else {
console.log('沒有更多資料了!');
}
};
}
readAll();
指定遊標範圍
可以使用key range 限制遊標中值的範圍,把它作為第一個引數傳給 openCursor()
或是 openKeyCursor()
IDBKeyRange.only(value):只獲取指定資料
- ```IDBKeyRange.lowerBound(value,isOpen):獲取最小是value的資料,第二個引數用來指示是否排除value值本身,也就是數學中的是否是開區間`
IDBKeyRange.upperBound(value,isOpen):和上面類似,用於獲取最大值是value的資料
IDBKeyRange.bound(value1,value2,isOpen1,isOpen2):不用解釋了吧
要想獲取age為26的student,可以結合遊標使用索引
function getMultipleData(db,storeName){
var transaction=db.transaction(storeName);
var store=transaction.objectStore(storeName);
var index = store.index("ageIndex");
var request=index.openCursor(IDBKeyRange.only(26))
request.onsuccess=function(e){
var cursor=e.target.result;
if(cursor){
var student=cursor.value;
console.log(student.id);
cursor.continue();
}
}
}
獲取名字首字母在B-E的student
function getMultipleData(db,storeName){
var transaction=db.transaction(storeName);
var store=transaction.objectStore(storeName);
var index = store.index("nameIndex");
var request=index.openCursor(IDBKeyRange.bound('B','F',false,true));
request.onsuccess=function(e){
var cursor=e.target.result;
if(cursor){
var student=cursor.value;
console.log(student.name);
cursor.continue();
}
}
}