HTML5 高階系列 indexedDB 資料庫

2022-03-04 16:47:59 字數 4135 閱讀 3728

在 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 高階系列 web Storage

html5 的 web storage 儲存方式有兩種 localstorage 和 sessionstorage。這兩種方式都是通過鍵值對儲存資料，訪問方便，不影響 效能。他們的用法相同，儲存時間不同。localstorage 的資料儲存在本地硬體上，可以永久儲存，可以手動呼叫api清除資料。se...

HTML5 高階系列 web Storage

html5 的 web storage 儲存方式有兩種 localstorage 和 sessionstorage。這兩種方式都是通過鍵值對儲存資料，訪問方便，不影響 效能。他們的用法相同，儲存時間不同。localstorage 的資料儲存在本地硬體上，可以永久儲存，可以手動呼叫api清除資料。se...

HTML5 高階系列 indexedDB 資料庫

乙個 可以有多個 indexeddb 資料庫，但每個資料庫的名稱是唯一的。我們需要通過資料庫名來連線某個具體的資料庫。var request indexeddb.open dbname 1 開啟 dbname 資料庫 request.onerror function e request.onsucc...