HTML5 高階系列 indexedDB 資料庫

在 html5 的本地儲存中，有一種叫 indexeddb 的資料庫，該資料庫是一種儲存在客戶端本地的 nosql 資料庫，它可以儲存大量的資料。從上篇：html5 高階系列：web storage ，我們知道 web storage 可以方便靈活的在本地訪問簡單資料，但是對於大量結構化儲存，indexeddb 的優勢就更加明顯。接下來我們來看看 indexeddb 如何儲存資料。

## 連線資料庫

乙個**可以有多個 indexeddb 資料庫，但每個資料庫的名稱是唯一的。我們需要通過資料庫名來連線某個具體的資料庫。

var request = indexeddb.open('dbname', 1);  // 開啟 dbname 資料庫
request.onerror = function(e)
request.onsuccess = function(e)

我們使用 indexeddb.open 方法來連線資料庫，該方法接收兩個引數，第乙個是資料庫名，第二個是資料庫版本號。該方法會返回乙個 idbopendbrequest 物件，代表乙個請求連線資料庫的請求物件。我們可以通過監聽請求物件的 onsuccess 和 onerror 事件來定義連線成功或失敗需執行的方法。

因為 indexeddb api 中不允許資料庫中的資料倉儲在同一版本中發生變化，所以需要在 indexeddb.open 方法中傳入新的版本號來更新版本，避免在同一版本中重複修改資料庫。版本號必須為整數！

var request = indexeddb.open('dbname', 2);  // 更新版本，開啟版本為2的資料庫
// ...
request.onupgradeneeded = function(e)

我們通過監聽請求物件的 onupgradeneeded 事件來定義資料庫版本更新時執行的方法。

使用 indexeddb.open 連線資料庫成功後會返回乙個 idbopendbrequest 物件，我們可以呼叫該物件的 close 方法來關閉資料庫。

var request = indexeddb.open('dbname', 2);
// ...
request.onsuccess = function(e)

indexeddb.deletedatabase('dbname');
console.log('資料庫已刪除');

object store（物件倉庫）是 indexeddb 資料庫的基礎，在indexeddb 中並沒有資料庫表，而物件倉庫，就是相當於乙個資料庫表。

var request = indexeddb.open('dbname', 3);
// ...
request.onupgradeneeded = function(e));
console.log('建立物件倉庫成功');
}

db.createobjectstore 方法接收兩個引數，第乙個為物件倉庫名，第二個引數為可選引數，值為乙個js物件。該物件中的 keypath 屬性為主鍵，相當於資料庫表中 id 為主鍵。autoincrement 屬性為 false，則表示主鍵值不自增，新增資料時需指定主鍵值。

注意：在資料庫中，物件倉庫名不可重複，否則瀏覽器會報錯。

indexeddb 資料庫中通過資料物件的某個屬性來建立索引，在資料庫中進行檢索時，只能通過被設為索引的屬性進行檢索。

var request = indexeddb.open('dbname', 4);
// ...
request.onupgradeneeded = function(e));
var idx = store.createindex('usernameindex','username',)
console.log('建立索引成功');
}

store.createindex 方法接收三個引數，第乙個為索引名，第二個為資料物件的屬性，上例中使用 username 屬性來建立索引，第三個引數為可選引數，值為乙個js物件。該物件中的 unique 屬性為 true，代表索引值不可以相同，即兩條資料的 username 不可以相同，為 false 則可以相同。

在 indexeddb 中，所有資料操作都只能在事務中執行。連線資料庫成功後，可以使用 idbopendbrequest 物件的 transaction 方法開啟唯讀事務或讀寫事務。

var request = indexeddb.open('dbname', 5);
// ...
request.onupgradeneeded = function(e)
tx.onabort = function(e)
}

db.transaction 方法接收兩個引數，第乙個引數可以是字串或陣列，字串時則是乙個物件倉庫名，陣列時則是由物件倉庫名組成的陣列，transaction 可以對引數中任何乙個物件倉庫進行操作。第二個引數為事務模式，傳入 readonly 時只能對物件倉庫進行讀操作，無法寫操作。可以傳入 readwrite 進行讀寫操作。

var request = indexeddb.open('dbname', 5);
// ...
request.onsuccess = function(e)
var req1 = store.put(value);		// 儲存資料
var req2 = store.get(1);			// 獲取索引userid為1的資料
req2.onsuccess = function()
var req3 = store.delete(1);             // 刪除索引為1的資料
req3.onsuccess = function()
}

add 和 put 的作用類似，區別在於 put 儲存資料時，如果該資料的主鍵在資料庫中已經有相同主鍵的時候，則會修改資料庫中對應主鍵的物件，而使用 add 儲存資料，如果該主鍵已經存在，則儲存失敗。

上面我們知道使用 get() 方法可以獲取資料，但是需要制定主鍵值。如果我們想要獲取乙個區間的資料，可以使用游標。游標通過物件倉庫的 opencursor 方法建立並開啟。

opencursor 方法接收兩個引數，第乙個是 idbkeyrange 物件，該物件建立方法主要有以下幾種：

// boundrange 表示主鍵值從1到10(包含1和10)的集合。
// 如果第三個引數為true，則表示不包含最小鍵值1，如果第四引數為true，則表示不包含最大鍵值10，預設都為false
var boundrange = idbkeyrange.bound(1, 10, false, false);
// onlyrange 表示由乙個主鍵值的集合。only() 引數則為主鍵值，整數型別。
var onlyrange = idbkeyrange.only(1);
// lowerraneg 表示大於等於1的主鍵值的集合。
// 第二個引數可選，為true則表示不包含最小主鍵1，false則包含，預設為false
var lowerrange = idbkeyrange.lowerbound(1, false);
// upperrange 表示小於等於10的主鍵值的集合。
// 第二個引數可選，為true則表示不包含最大主鍵10，false則包含，預設為false
var upperrange = idbkeyrange.upperbound(10, false);

opencursor 方法的第二個引數表示游標的讀取方向，主要有以下幾種：

var request = indexeddb.open('dbname', 6);
// ...
request.onsuccess = function(e)else
}}

當存在符合檢索條件的資料時，可以通過 update 方法更新該資料：

cursor.updata();

可以通過 delete 方法刪除該資料：

cursor.delete();

cursor.continue();

HTML5 高階系列 indexedDB 資料庫

HTML5 高階系列 web Storage

HTML5 高階系列 web Storage

HTML5 高階系列 indexedDB 資料庫

HTML5 高階系列 indexedDB 資料庫

HTML5 高階系列 web Storage

HTML5 高階系列 web Storage

HTML5 高階系列 indexedDB 資料庫

相關推薦