乙個**可以有多個 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 資料庫
在 html5 的本地儲存中,有一種叫 indexeddb 的資料庫,該資料庫是一種儲存在客戶端本地的 nosql 資料庫,它可以儲存大量的資料。從上篇 html5 高階系列 web storage 我們知道 web storage 可以方便靈活的在本地訪問簡單資料,但是對於大量結構化儲存,inde...