第11章 HTML5的IndexedDB數(shù)據(jù)庫HTML5與CSS3 Web前端開發(fā)技術(shù)-PPT課件

1、HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)第11章 HTML5的IndexedDB數(shù)據(jù)庫(HTML5與CSS3 Web前端開發(fā)技術(shù))HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.2 創(chuàng)立數(shù)據(jù)庫創(chuàng)立數(shù)據(jù)庫v 創(chuàng)立和連接數(shù)據(jù)庫創(chuàng)立和連接數(shù)據(jù)庫v IndexedDB API中的的中的的open()方法，用方法，用于創(chuàng)立或翻開指定的數(shù)據(jù)庫，語法格式如下。于創(chuàng)立或翻開指定的數(shù)據(jù)庫，語法格式如下。v var dbRequest =

2、v indexedDB.open(dbName,dbVersion);HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.2 創(chuàng)立數(shù)據(jù)庫創(chuàng)立數(shù)據(jù)庫2. IndexedDB 數(shù)據(jù)庫中的對象定義數(shù)據(jù)庫中的對象定義 IndexedDB 數(shù)據(jù)庫包括數(shù)據(jù)庫包括indexedDB、IDBTransaction 、IDBKeyRange、IDBCursor等等對象，為了確保腳本代碼在各瀏覽器中兼容，應(yīng)當在使用數(shù)對象，為了確保腳本代碼在各瀏覽器中兼容，應(yīng)當在使用數(shù)據(jù)庫之前統(tǒng)一定義，代碼如下。據(jù)庫之前統(tǒng)一定義，代碼如下。window.indexedDB=window.indexedDB|window.we

3、bkitIndexedDB;window.IDBTransaction=window.IDBTransaction|window.webkitIDBTransaction|;window.IDBKeyRange= window.IDBKeyRange|window.webkitIDBKeyRange;window.IDBCursor= window.IDBCursor|window.webkitIDBCursor;HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.2 創(chuàng)立數(shù)據(jù)庫創(chuàng)立數(shù)據(jù)庫3. 刪除數(shù)據(jù)庫刪除數(shù)據(jù)庫 刪除現(xiàn)有數(shù)據(jù)庫，可以調(diào)用刪除現(xiàn)有數(shù)據(jù)庫，可以調(diào)用 deleteDatab

4、ase()方法，方法，該方法的使用和該方法的使用和open()方法類似，將要刪除的數(shù)據(jù)庫名稱方法類似，將要刪除的數(shù)據(jù)庫名稱作為參數(shù)，代碼如下。作為參數(shù)，代碼如下。function deleteDatabase() var deleteDbRequest = window.indexedDB.deleteDatabase(dbName); deleteDbRequest.onsuccess = function (e) /成功處理成功處理 ; deleteDbRequest.onerror = function (e) /錯誤處理錯誤處理 ;HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)1

5、1.2 創(chuàng)立數(shù)據(jù)庫創(chuàng)立數(shù)據(jù)庫4. 連接數(shù)據(jù)庫的完整例如連接數(shù)據(jù)庫的完整例如HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.3 數(shù)據(jù)庫的版本更新和事務(wù)處理數(shù)據(jù)庫的版本更新和事務(wù)處理1. 版本更新版本更新連接成功的數(shù)據(jù)庫還不能執(zhí)行任何數(shù)據(jù)操作。在使連接成功的數(shù)據(jù)庫還不能執(zhí)行任何數(shù)據(jù)操作。在使用用IndexedDB 數(shù)據(jù)庫的時候，所有數(shù)據(jù)的操作數(shù)據(jù)庫的時候，所有數(shù)據(jù)的操作都需要在一個事務(wù)內(nèi)部執(zhí)行。而對于對象倉庫與索都需要在一個事務(wù)內(nèi)部執(zhí)行。而對于對象倉庫與索引的操作，類似于關(guān)系數(shù)據(jù)庫中表結(jié)構(gòu)或索引的操引的操作，類似于關(guān)系數(shù)據(jù)庫中表結(jié)構(gòu)或索引的操作，必須在版本更新事務(wù)內(nèi)部進行。作，必須在版本

6、更新事務(wù)內(nèi)部進行。例如例如11-2實現(xiàn)的是一個版本更新的測試功能。實現(xiàn)的是一個版本更新的測試功能。HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.3 數(shù)據(jù)庫的版本更新和事務(wù)處理數(shù)據(jù)庫的版本更新和事務(wù)處理2.事務(wù)處理事務(wù)處理創(chuàng)立對象倉庫與索引、對象倉庫執(zhí)行所有讀取和寫創(chuàng)立對象倉庫與索引、對象倉庫執(zhí)行所有讀取和寫入操作的操作必須在事務(wù)中進行。入操作的操作必須在事務(wù)中進行。事務(wù)具有三種模式事務(wù)具有三種模式: readonly：提供對某個對象倉庫的只讀訪問：提供對某個對象倉庫的只讀訪問，在查詢對象倉庫時使用。，在查詢對象倉庫時使用。 readwrite：提供對某個對象倉庫的讀取和寫：提供對某

7、個對象倉庫的讀取和寫入權(quán)限。入權(quán)限。 versionchange：提供讀取和寫入權(quán)限來修：提供讀取和寫入權(quán)限來修改對象倉庫定義，或者創(chuàng)立一個新的對象倉庫。改對象倉庫定義，或者創(chuàng)立一個新的對象倉庫。數(shù)據(jù)庫的事務(wù)處理使用數(shù)據(jù)庫的事務(wù)處理使用transaction()方法，該方方法，該方法的語法格式如下：法的語法格式如下：var tx = idb. transaction (storeNames,mode);HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.4 創(chuàng)立對象倉庫創(chuàng)立對象倉庫對象倉庫是數(shù)據(jù)記錄的集合。要在現(xiàn)有數(shù)據(jù)庫中創(chuàng)對象倉庫是數(shù)據(jù)記錄的集合。要在現(xiàn)有數(shù)據(jù)庫中創(chuàng)立一個新對象倉庫，需

8、要對現(xiàn)有數(shù)據(jù)庫進行版本更立一個新對象倉庫，需要對現(xiàn)有數(shù)據(jù)庫進行版本更新。新。要創(chuàng)立一個對象倉庫，可以在數(shù)據(jù)庫對象上調(diào)用要創(chuàng)立一個對象倉庫，可以在數(shù)據(jù)庫對象上調(diào)用 createObjectStore() 方法，語法格式如下。方法，語法格式如下。var objectStore=idb. createObjectStore(name,optionalParameters);HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.4 創(chuàng)立對象倉庫創(chuàng)立對象倉庫例如例如11-3創(chuàng)立了名為創(chuàng)立了名為students的對象倉庫的對象倉庫HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.5 創(chuàng)立索引

9、可以使用對象倉庫的鍵來檢索對象存儲中的記錄，也可可以使用對象倉庫的鍵來檢索對象存儲中的記錄，也可以使用索引的字段來檢索記錄。在以使用索引的字段來檢索記錄。在IndexedDB數(shù)據(jù)庫中，數(shù)據(jù)庫中，只能對被索引的屬性值進行檢索。對象倉庫可具有一個或多只能對被索引的屬性值進行檢索。對象倉庫可具有一個或多個索引。個索引。創(chuàng)立索引的語法格式如下。創(chuàng)立索引的語法格式如下。var idx=store.createIndex( indexName,indexItem,optionalParameters); 其中，其中，indexName參數(shù)值為一個字符串，表示索引名參數(shù)值為一個字符串，表示索引名.HTML5

10、+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.5 創(chuàng)立索引v例如例如11-4創(chuàng)立了創(chuàng)立了3個索引，其中個索引，其中sName是惟一是惟一索引。索引。HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.6 保存和刪除數(shù)據(jù)1. 保存數(shù)據(jù)保存數(shù)據(jù) 向?qū)ο髠}庫中插入數(shù)據(jù)，首先需要連接某個向?qū)ο髠}庫中插入數(shù)據(jù)，首先需要連接某個IndexedDB 數(shù)據(jù)庫，這時，數(shù)據(jù)庫，這時，open()方法中的數(shù)據(jù)庫版本號參數(shù)可以省方法中的數(shù)據(jù)庫版本號參數(shù)可以省略不寫。在連接成功后使用該數(shù)據(jù)庫對象的略不寫。在連接成功后使用該數(shù)據(jù)庫對象的transaction方法開啟一個讀寫事務(wù)，再使用方法開啟一個讀寫事務(wù)，再使用

11、put()方法或方法或add()方法插方法插入數(shù)據(jù)。入數(shù)據(jù)。 (1) put()方法或方法或add()方法方法 向?qū)ο髠}庫添加數(shù)據(jù)可以使用向?qū)ο髠}庫添加數(shù)據(jù)可以使用put()方法或方法或add()方法，方法，語法格式如下。語法格式如下。var req = store.put(value); HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.6 保存和刪除數(shù)據(jù)(2)插入數(shù)據(jù)的過程插入數(shù)據(jù)的過程 向?qū)ο髠}庫中插入數(shù)據(jù)時，首先連接數(shù)據(jù)庫，接著開啟事向?qū)ο髠}庫中插入數(shù)據(jù)時，首先連接數(shù)據(jù)庫，接著開啟事務(wù)，獲取對象倉庫，最后插入數(shù)據(jù)。務(wù)，獲取對象倉庫，最后插入數(shù)據(jù)。 開啟事務(wù)后，使用開啟事務(wù)后，使

12、用transaction()方法開啟事務(wù)，該方方法開啟事務(wù)，該方法的參數(shù)是事務(wù)的作用范圍。再使用事務(wù)對象的法的參數(shù)是事務(wù)的作用范圍。再使用事務(wù)對象的objectStore()方法獲取該事務(wù)對象的作用范圍中的某個方法獲取該事務(wù)對象的作用范圍中的某個對象倉庫，代碼如下對象倉庫，代碼如下:var store = tx.objectStore(students); HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.6 保存和刪除數(shù)據(jù)v例如例如11-5在在students對象倉庫中保存了對象倉庫中保存了4條記條記錄。錄。HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.6 保存和刪除數(shù)據(jù)

13、2. 檢索數(shù)據(jù)檢索數(shù)據(jù)(1)使用對象倉庫的主使用對象倉庫的主鍵獲取記錄鍵獲取記錄在獲取對象倉庫成功后，使用對象在獲取對象倉庫成功后，使用對象倉庫的倉庫的get()方法從對象倉庫中獲方法從對象倉庫中獲取一條數(shù)據(jù)，代碼如下：取一條數(shù)據(jù)，代碼如下：var req = store.get(key); 該請求發(fā)出后將被立即異步執(zhí)行，該請求發(fā)出后將被立即異步執(zhí)行，用戶可以通過監(jiān)聽請求對象的用戶可以通過監(jiān)聽請求對象的onsuccess事件與請求對象的事件與請求對象的onerror事件并指定事件處理函事件并指定事件處理函數(shù)來定義請求被執(zhí)行成功或失敗時數(shù)來定義請求被執(zhí)行成功或失敗時所要進行的處理所要進行的處理.

14、req.onsuccess = function (e) /獲取數(shù)據(jù)成功時所執(zhí)行的處理獲取數(shù)據(jù)成功時所執(zhí)行的處理 req.onerror = function(e) /獲取數(shù)據(jù)失敗時所執(zhí)行的處理獲取數(shù)據(jù)失敗時所執(zhí)行的處理 HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.6 保存和刪除數(shù)據(jù)HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.6 保存和刪除數(shù)據(jù)(2)使用索引對象獲取記錄使用索引對象獲取記錄除了使用主鍵獲取記錄外，如果對象倉庫中存在其除了使用主鍵獲取記錄外，如果對象倉庫中存在其他屬性組成的索引，那么可以根據(jù)該索引的屬性取他屬性組成的索引，那么可以根據(jù)該索引的屬性取得數(shù)

15、據(jù)。得數(shù)據(jù)。var tx = idb.transaction(students， readonly); var store = tx.objectStore(students); var idx = store.index(sName); var req = idx.get(Mike); req.onsuccess = function (e) /數(shù)據(jù)獲取成功數(shù)據(jù)獲取成功 req.onerror = function (e) /數(shù)據(jù)獲取失敗數(shù)據(jù)獲取失敗HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.6 保存和刪除數(shù)據(jù)3. 刪除數(shù)據(jù)刪除數(shù)據(jù)使用使用delete()方法可以刪除方法可以刪

16、除對象倉庫中的數(shù)據(jù)對象倉庫中的數(shù)據(jù). (keyPath value);HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.7 使用游標檢索批量數(shù)據(jù)1. openCursor()方法及其參數(shù)方法及其參數(shù) openCursor()方法用于在對象倉庫中翻開游方法用于在對象倉庫中翻開游標。標。var req=store.openCursor(range,direction); range參數(shù)是一個參數(shù)是一個IDBKeyRange對象，該對對象，該對象的返回游標的作用范圍；象的返回游標的作用范圍； direction參數(shù)用于指定游標的讀取方向，參數(shù)參數(shù)用于指定游標的讀取方向，參數(shù)值為一個在值為一個

17、在 IndexedDB API中預(yù)定義的常量值中預(yù)定義的常量值。HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.7 使用游標檢索批量數(shù)據(jù)(1)指定游標范圍的方法指定游標范圍的方法表表11-1 創(chuàng)立創(chuàng)立IDBKeyRange對象的方法對象的方法方法（范圍類型）方法（范圍類型）描述描述IDBKeyRange.bound(lower,upper, lowerOpen，upperOpen);返回指定范圍內(nèi)的所有記錄，前兩個參數(shù)是范圍的下邊界和返回指定范圍內(nèi)的所有記錄，前兩個參數(shù)是范圍的下邊界和上邊界。上邊界。兩個可選參數(shù)兩個可選參數(shù)lowerOpen 和和 upperOpen，取值為，取值為

18、true或或false，表明下邊界或上邊界上的記錄是否包含在范圍內(nèi)。如果取值為表明下邊界或上邊界上的記錄是否包含在范圍內(nèi)。如果取值為true，不包括邊界；如果取值為，不包括邊界；如果取值為false，包括邊界。默認值為，包括邊界。默認值為false。IDBKeyRange.lowerBound (lower,lowerOpen)超過指定的邊界值之后的所有記錄。可選參數(shù)超過指定的邊界值之后的所有記錄。可選參數(shù)lowerOpen，表明下邊界的記錄是否包含在范圍中，解釋同上。表明下邊界的記錄是否包含在范圍中，解釋同上。IDBKeyRange.upperBound(upper,upperOpen);返

19、回指定的邊界值之前的所有記錄?？蛇x參數(shù)返回指定的邊界值之前的所有記錄?？蛇x參數(shù)upperOpen，表明上邊界的記錄是否應(yīng)包含在范圍中，解釋同上。表明上邊界的記錄是否應(yīng)包含在范圍中，解釋同上。IDBKeyRange.only(value)僅返回與指定值匹配的記錄。僅返回與指定值匹配的記錄。HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.7 使用游標檢索批量數(shù)據(jù)(2)指定游標的順序指定游標的順序openCursor()方法的第方法的第2個參數(shù)個參數(shù)direction用于指明游標用于指明游標的方向，有的方向，有4種取值。種取值。 ：順序循環(huán)：順序循環(huán) ：順序循環(huán)且鍵值不重復：順序循環(huán)且鍵值

20、不重復 ：倒序循環(huán)：倒序循環(huán) ：倒序循環(huán)且鍵值不重復：倒序循環(huán)且鍵值不重復HTML5+CSS3 Web前端開發(fā)技術(shù)前端開發(fā)技術(shù)11.7 使用游標檢索批量數(shù)據(jù)2.數(shù)據(jù)遍歷數(shù)據(jù)遍歷A.遍歷對象倉庫中的所有數(shù)據(jù)遍歷對象倉庫中的所有數(shù)據(jù)例如例如11-8是遍歷是遍歷students對象倉庫的所有記錄，對象倉庫的所有記錄，結(jié)合這個例如，說明遍歷對象倉庫中記錄的步驟。結(jié)合這個例如，說明遍歷對象倉庫中記錄的步驟。1連接數(shù)據(jù)庫。連接數(shù)據(jù)庫。 init()方法完成連接數(shù)據(jù)庫操作，并得到一個數(shù)方法完成連接數(shù)據(jù)庫操作，并得到一個數(shù)據(jù)庫對象據(jù)庫對象idb。 單擊網(wǎng)頁頁面中的單擊網(wǎng)頁頁面中的“Travel Data按鈕，顯示按鈕，顯示數(shù)據(jù)的遍歷結(jié)果。數(shù)據(jù)的遍歷結(jié)果。2啟動事務(wù)，并指定事務(wù)的作用