HTML5 程序設(shè)計第10章

1、第第10章章 本章知識點本章知識點10.1 10.1 概述概述 10.2 localstorage 10.2 localstorage 10.3 sessionstorage 10.3 sessionstorage 10.4 webSQL Database API 10.4 webSQL Database API 10.5 IndexedDB 10.5 IndexedDB 10.1 概述概述 p 10.1.1 HTML410.1.1 HTML4的本地數(shù)據(jù)存儲方式的本地數(shù)據(jù)存儲方式 p 10.1.2 HTML510.1.2 HTML5本地存儲技術(shù)概述本地存儲技術(shù)概述 10.1.1 HTML4的本

2、地數(shù)據(jù)存儲方式的本地數(shù)據(jù)存儲方式 在傳統(tǒng)的在傳統(tǒng)的WebWeb程序中，通常使用程序中，通常使用CookieCookie和和SessionSession來存儲本地來存儲本地數(shù)據(jù)。數(shù)據(jù)。 1Cookie Cookie存在如下缺陷存在如下缺陷 CookieCookie的數(shù)據(jù)大小是由限制的，大多數(shù)的數(shù)據(jù)大小是由限制的，大多數(shù)瀏覽器只支持最大為瀏覽器只支持最大為 4096 4096 字節(jié)的字節(jié)的 CookieCookie。有時不能滿足需求。有時不能滿足需求。 客戶端可以禁用或清空客戶端可以禁用或清空CookieCookie，從而影，從而影響程序的功能。響程序的功能。 當(dāng)多人共用一臺計算機時使用當(dāng)多人共用

3、一臺計算機時使用CookieCookie可可能會泄露用戶隱私，帶來安全問題。能會泄露用戶隱私，帶來安全問題。 2Session（會話）（會話） 10.1.2 HTML5本地存儲技術(shù)概述本地存儲技術(shù)概述 1 1localstorage localstorage 2 2sessionstorage sessionstorage 3 3web SQLweb SQL數(shù)據(jù)庫數(shù)據(jù)庫4 4IndexedDBIndexedDB 1localstorage localstoragelocalstorage類似于類似于CookieCookie，用于持久化，用于持久化的本地存儲。但的本地存儲。但localstora

4、gelocalstorage沒有有效沒有有效期，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永期，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會過期的。遠(yuǎn)不會過期的。localstoragelocalstorage的存儲能的存儲能力也遠(yuǎn)大于力也遠(yuǎn)大于CookieCookie，可以存儲多達(dá)，可以存儲多達(dá)5MB5MB的的數(shù)據(jù)。數(shù)據(jù)。 2sessionstorage p sessionstoragesessionstorage類似于類似于SessionSession，用于本，用于本地存儲一個會話（地存儲一個會話（sessionsession）中的數(shù)據(jù)，）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才這些數(shù)據(jù)只有在同一個會話中的

5、頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此毀。因此sessionStoragesessionStorage不是一種持久不是一種持久化的本地存儲?；谋镜卮鎯?。 3web SQL數(shù)據(jù)庫數(shù)據(jù)庫 除了使用除了使用localstoragelocalstorage將數(shù)據(jù)存儲在將數(shù)據(jù)存儲在本地文件中，本地文件中，HTML5HTML5甚至支持本地的甚至支持本地的web SQLweb SQL數(shù)據(jù)庫。傳統(tǒng)的數(shù)據(jù)庫。傳統(tǒng)的WebWeb應(yīng)用程應(yīng)用程序都是使用腳本語言訪問序都是使用腳本語言訪問WebWeb服務(wù)器服務(wù)器上的數(shù)據(jù)庫，但是訪問服務(wù)器會產(chǎn)上的數(shù)據(jù)庫，但是訪問服務(wù)器會產(chǎn)生

6、網(wǎng)絡(luò)流量，而且需要等待服務(wù)器生網(wǎng)絡(luò)流量，而且需要等待服務(wù)器的響應(yīng)。操作本地數(shù)據(jù)庫無疑大大的響應(yīng)。操作本地數(shù)據(jù)庫無疑大大提升了提升了HTML5HTML5的本地數(shù)據(jù)存儲能力。的本地數(shù)據(jù)存儲能力。4IndexedDB pIndexedDBIndexedDB是一種輕量級是一種輕量級NoSQLNoSQL數(shù)據(jù)庫。數(shù)據(jù)庫。NoSQLNoSQL是是非關(guān)系型的數(shù)據(jù)庫，非關(guān)系型的數(shù)據(jù)庫，NoSQLNoSQL是是Not Only SQLNot Only SQL的縮的縮寫，意即反寫，意即反SQLSQL運動，是一項全新的數(shù)據(jù)庫革命運動，是一項全新的數(shù)據(jù)庫革命性運動。性運動。pHTML5HTML5支持兩種不同類型的數(shù)據(jù)庫

7、，給了用戶跟支持兩種不同類型的數(shù)據(jù)庫，給了用戶跟多的選擇，足以應(yīng)對各種需求的多的選擇，足以應(yīng)對各種需求的WebWeb應(yīng)用程序。應(yīng)用程序。10.2 localstorage p10.2.1 10.2.1 瀏覽器對瀏覽器對localstoragelocalstorage的支持的支持情況情況p10.2.2 10.2.2 使用使用localstoragelocalstorage保存數(shù)據(jù)保存數(shù)據(jù) p10.2.3 10.2.3 獲取獲取localstoragelocalstorage中的數(shù)據(jù)中的數(shù)據(jù) p10.2.4 10.2.4 刪除刪除localstoragelocalstorage中的數(shù)據(jù)中的數(shù)據(jù) p

8、10.2.5 storage10.2.5 storage事件事件 10.2.1 瀏覽器對瀏覽器對localstorage的支持情況的支持情況 p在在JavaScriptJavaScript中可以使用中可以使用window.localStoragewindow.localStorage屬性檢測瀏覽器對屬性檢測瀏覽器對localstoragelocalstorage的支持情況。的支持情況。如果如果window.localStoragewindow.localStorage等于等于TrueTrue，則表明當(dāng)，則表明當(dāng)前瀏覽器支持前瀏覽器支持localstoragelocalstorage；否則表明不

9、支持；否則表明不支持。 【例例10-1】 p在網(wǎng)頁中定義一個按鈕，單擊此按鈕時在網(wǎng)頁中定義一個按鈕，單擊此按鈕時，會檢測瀏覽器是否支持，會檢測瀏覽器是否支持localstoragelocalstorage。定義按鈕的代碼如下：。定義按鈕的代碼如下：檢測瀏覽器是檢測瀏覽器是否支持否支持localstorage單擊按鈕單擊按鈕check將調(diào)用將調(diào)用check()函數(shù)。函數(shù)。check()函數(shù)的定義代碼如下函數(shù)的定義代碼如下 function check() if(window.localStorage) alert(您的瀏覽器支持您的瀏覽器支持localstorage。); else alert(

10、您的瀏覽器不支持您的瀏覽器不支持localstorage。); 提示提示 p在使用在使用Internet ExploreInternet Explore測試時，必須將文件上測試時，必須將文件上傳到傳到WebWeb服務(wù)器上（或者服務(wù)器上（或者localhostlocalhost），才支持），才支持localstoragelocalstorage。如果直接打開本地的。如果直接打開本地的HTMLHTML文件，則文件，則提示不支持提示不支持localstoragelocalstorage。 10.2.2 使用使用localstorage保存數(shù)據(jù)保存數(shù)據(jù) plocalstoragelocalstorag

11、e使用使用“鍵值鍵值”對保存數(shù)據(jù)，可以對保存數(shù)據(jù)，可以使用使用setItem()setItem()方法設(shè)置方法設(shè)置localstoragelocalstorage數(shù)據(jù)，語數(shù)據(jù)，語法如下：法如下：localStorage.setItem(, )p也可以通過也可以通過localStorage.localStorage. 和和localStoragelocalStorage的形式訪問的形式訪問localstoragelocalstorage數(shù)據(jù)。例如，下面數(shù)據(jù)。例如，下面3 3條語句都可以在條語句都可以在localstoragelocalstorage中存儲鍵名為中存儲鍵名為keykey、值為、值為

12、valuevalue的數(shù)據(jù)：的數(shù)據(jù)：localStorage.setItem(key, value);localStorage.key = value;localStoragekey = value;【例例10-2】 p在網(wǎng)頁中定義一個按鈕，單擊此按鈕時，在在網(wǎng)頁中定義一個按鈕，單擊此按鈕時，在localstoragelocalstorage中存儲鍵名為中存儲鍵名為keykey、值為、值為valuevalue的數(shù)據(jù)。按鈕的定義代碼如下：的數(shù)據(jù)。按鈕的定義代碼如下：使用使用localstorage保存數(shù)據(jù)保存數(shù)據(jù)單擊按鈕單擊按鈕check將調(diào)用將調(diào)用setItem()函數(shù)。函數(shù)。setItem(

13、)函數(shù)的定義代碼如下：函數(shù)的定義代碼如下： function setItem() if(window.localStorage) localStorage.setItem(key, value); else alert(您的瀏覽器不支持您的瀏覽器不支持localstorage。); 10.2.3 獲取獲取localstorage中的數(shù)據(jù)中的數(shù)據(jù) p 可以使用可以使用getItem()getItem()方法設(shè)置方法設(shè)置localstoragelocalstorage數(shù)據(jù)，語法數(shù)據(jù)，語法如下：如下： = localStorage.getItem();p 也可以通過也可以通過localStorage

14、.localStorage. 和和localStoragelocalStorage的形式訪問的形式訪問localstoragelocalstorage數(shù)據(jù)。例如，下面數(shù)據(jù)。例如，下面3 3條語條語句都可以獲取句都可以獲取localstoragelocalstorage中存儲的鍵名為中存儲的鍵名為keykey的數(shù)的數(shù)據(jù)值到變量據(jù)值到變量valuevalue中：中：var value = localStorage.getItem(key);var value = localStorage.key;var value = localStoragekey;【例例10-3】 p 在網(wǎng)頁中定義一個按鈕，單

15、擊此按鈕時，從在網(wǎng)頁中定義一個按鈕，單擊此按鈕時，從localstoragelocalstorage中獲取鍵名為中獲取鍵名為keykey的值。按鈕的定義代碼如下：的值。按鈕的定義代碼如下：p 獲取獲取localstorage中的數(shù)據(jù)中的數(shù)據(jù)p 單擊按鈕將調(diào)用單擊按鈕將調(diào)用getItem ()getItem ()函數(shù)。函數(shù)。getItem ()getItem ()函數(shù)的定義代碼如下：函數(shù)的定義代碼如下：function getItem() if(window.localStorage) var value = localStorage.getItem(key); alert(value); el

16、se alert(您的瀏覽器不支持您的瀏覽器不支持localstorage。); 【例【例10-4】 function count() var count / 讀取讀取localstorage數(shù)據(jù)，并轉(zhuǎn)換為數(shù)據(jù)，并轉(zhuǎn)換為int類型類型 if(localStorage.getItem(count) = null) count =1 else count = parseInt(localStorage.getItem(count)+1; / 顯示訪問計數(shù)顯示訪問計數(shù) if(count 1) document.write(您已是第您已是第 + count+次訪問本站點了。次訪問本站點了。); els

17、e document.write(歡迎您首次訪問本站。歡迎您首次訪問本站。); /保存新的訪問計數(shù)保存新的訪問計數(shù) localStorage.setItem(count, count);window.addEventListener(load, count, true);使用使用localstorage記錄用戶訪問網(wǎng)頁的次數(shù)記錄用戶訪問網(wǎng)頁的次數(shù) 10.2.4 刪除刪除localstorage中的數(shù)據(jù)中的數(shù)據(jù) p調(diào)用調(diào)用localStorage.removeItem()localStorage.removeItem()方法可以刪方法可以刪除除localstoragelocalstorage中指

18、定鍵的項，語法如下：中指定鍵的項，語法如下：plocalStorage.removeItem(key)localStorage.removeItem(key)pkeykey為要刪除的指定鍵。為要刪除的指定鍵。p如果要刪除如果要刪除localstoragelocalstorage中所有的數(shù)據(jù)，則可中所有的數(shù)據(jù)，則可以調(diào)用以調(diào)用localStorage.clear()localStorage.clear()方法。方法。 10.2.5 storage事件事件 p HTML5HTML5提供一個提供一個storagestorage事件，當(dāng)事件，當(dāng)setItem()setItem()、removeItem

19、()removeItem()或者或者clear()clear()方法被調(diào)用，并且數(shù)據(jù)真的方法被調(diào)用，并且數(shù)據(jù)真的發(fā)生了改變時，發(fā)生了改變時，storagestorage事件就會被觸發(fā)。注意，只有事件就會被觸發(fā)。注意，只有數(shù)據(jù)真的發(fā)生了變化，才會觸發(fā)數(shù)據(jù)真的發(fā)生了變化，才會觸發(fā)storagestorage事件。也就是事件。也就是說，如果當(dāng)前的存儲區(qū)域是空的，調(diào)用說，如果當(dāng)前的存儲區(qū)域是空的，調(diào)用clear()clear()是不會是不會觸發(fā)事件的。或者通過觸發(fā)事件的。或者通過setItem()setItem()來設(shè)置一個與現(xiàn)有值來設(shè)置一個與現(xiàn)有值相同的值，相同的值，storagestorage事件

20、也是不會被觸發(fā)的事件也是不會被觸發(fā)的toragetorage事件事件的的p EventEvent對象包含如下屬性：對象包含如下屬性： storageAreastorageArea，表示存儲類型（，表示存儲類型（localstoragelocalstorage或或sessionstoragesessionstorage）；）；p keykey，發(fā)生改變的項的，發(fā)生改變的項的keykeyp oldValue oldValue，發(fā)生改變的項的原值，發(fā)生改變的項的原值p newValuenewValue，發(fā)生改變的項的新值，發(fā)生改變的項的新值p urlurl， keykey改變發(fā)生的改變發(fā)生的URLU

21、RL【例【例10-5】 Your test data: Waiting for data via storage event. 接上接上 var addEvent = (function() if (document.addEventListener) return function(el, type, fn) if (el.length) for (var i = 0; i el.length; i+) addEvent(eli, type, fn); else el.addEventListener(type, fn, false); ; else return function(el,

22、type, fn) if (el.length) for (var i = 0; i el.length; i+) addEvent(eli, type, fn); else el.attachEvent(on + type, function() return fn.call(el, window.event); ); ; )();接上接上 var dataInput = document.getElementById(data), output = document.getElementById(fromEvent),save = document.getElementById(save)

23、;addEvent(window, storage, function (event) if (event.key = storage-event-test) output.innerHTML =key:+event.key+ - old:+event.oldValue+ - new:+ event.newValue; );addEvent(save, click, function () localStorage.setItem(storage-event-test, dataInput.value););瀏覽【例瀏覽【例10-5】的界面】的界面 提示提示 p必須將文件上傳到必須將文件上傳到

24、WebWeb服務(wù)器上（或者服務(wù)器上（或者localhostlocalhost），才支持），才支持storagestorage事件。事件。 p不同瀏覽器對不同瀏覽器對storagestorage事件的支持情況不事件的支持情況不同。經(jīng)測試，同。經(jīng)測試，Internet Explorer 9Internet Explorer 9可以可以在當(dāng)前頁面中接收到在當(dāng)前頁面中接收到storagestorage事件，而在事件，而在firefoxfirefox和和chromechrome中，必須同時打開兩個中，必須同時打開兩個窗口瀏覽【例窗口瀏覽【例10-510-5】，在其中一個窗口】，在其中一個窗口中單擊按鈕，

25、在另一個窗口會接收到中單擊按鈕，在另一個窗口會接收到storagestorage事件。事件。 10.3 sessionstorage p10.3.1 10.3.1 判斷瀏覽器是否支持判斷瀏覽器是否支持sessionstorage sessionstorage p10.3.2 10.3.2 使用使用sessionstoragesessionstorage保存數(shù)據(jù)保存數(shù)據(jù)p10.3.3 10.3.3 獲取獲取sessionstoragesessionstorage中的數(shù)據(jù)中的數(shù)據(jù)p10.3.4 10.3.4 刪除刪除sessionstoragesessionstorage中的數(shù)據(jù)中的數(shù)據(jù) 10.3

26、.1 判斷瀏覽器是否支持判斷瀏覽器是否支持sessionstorage p在在JavaScriptJavaScript中可以使用中可以使用window. window. sessionStoragesessionStorage屬性檢測瀏覽器對屬性檢測瀏覽器對sessionstoragesessionstorage的支持情況。如果的支持情況。如果window. sessionStoragewindow. sessionStorage等于等于TrueTrue，則，則表明當(dāng)前瀏覽器支持表明當(dāng)前瀏覽器支持sessionstoragesessionstorage；否則表明不支持。否則表明不支持?！纠纠?/p>

27、10-6】 p 在網(wǎng)頁中定義一個按鈕，單擊此按鈕時，會檢測瀏覽器是否支持在網(wǎng)頁中定義一個按鈕，單擊此按鈕時，會檢測瀏覽器是否支持sessionstoragesessionstorage。定義按鈕的代碼如下：。定義按鈕的代碼如下：檢測瀏覽器是否支持檢測瀏覽器是否支持sessionstoragep 單擊按鈕單擊按鈕checkcheck將調(diào)用將調(diào)用check()check()函數(shù)。函數(shù)。check()check()函數(shù)的定義代碼如下：函數(shù)的定義代碼如下：function check() if(window.sessionStorage) alert(您的瀏覽器支持您的瀏覽器支持sessionstor

28、age。); else alert(您的瀏覽器不支持您的瀏覽器不支持sessionstorage。); 提示提示 p在使用在使用Internet ExploreInternet Explore測試時，必須測試時，必須將文件上傳到將文件上傳到WebWeb服務(wù)器上（或者服務(wù)器上（或者localhostlocalhost），才支持），才支持localstoragelocalstorage。如。如果直接打開本地的果直接打開本地的HTMLHTML文件，則提示不文件，則提示不支持支持localstoragelocalstorage。 10.3.2 使用使用sessionstorage保存數(shù)據(jù)保存數(shù)據(jù) p

29、與與localstoragelocalstorage一樣，一樣，sessionstoragesessionstorage也使用也使用“鍵鍵值值”對保存數(shù)據(jù)，可以使用對保存數(shù)據(jù)，可以使用setItem()setItem()方法設(shè)置方法設(shè)置sessionstoragesessionstorage數(shù)據(jù)，語法如下：數(shù)據(jù)，語法如下：sessionStorage.setItem(, )p 也可以通過也可以通過sessionStorage.sessionStorage. 和和sessionStorage sessionStorage 的形式訪問的形式訪問sessionstoragesessionstorag

30、e數(shù)據(jù)。例如，下數(shù)據(jù)。例如，下面面3 3條語句都可以在條語句都可以在localstoragelocalstorage中存儲鍵名為中存儲鍵名為keykey、值為、值為valuevalue的數(shù)據(jù)：的數(shù)據(jù)：sessionStorage.setItem(key, value);sessionStorage.key = value;sessionStorage key = value;【例【例10-7】 p 在網(wǎng)頁中定義一個按鈕，單擊此按鈕時，在在網(wǎng)頁中定義一個按鈕，單擊此按鈕時，在sessionstoragesessionstorage中存儲鍵名中存儲鍵名為為keykey、值為、值為valuevalu

31、e的數(shù)據(jù)。按鈕的定義代碼如下：的數(shù)據(jù)。按鈕的定義代碼如下：使用使用sessionstorage保存數(shù)據(jù)保存數(shù)據(jù)p 單擊按鈕單擊按鈕checkcheck將調(diào)用將調(diào)用setItem()setItem()函數(shù)。函數(shù)。setItem()setItem()函數(shù)的定義代碼如下：函數(shù)的定義代碼如下：function setItem() if(window. sessionStorage) sessionStorage.setItem(key, value); else alert(您的瀏覽器不支持您的瀏覽器不支持sessionStorage。); 10.3.3 獲取獲取sessionstorage中的數(shù)據(jù)中

32、的數(shù)據(jù) p 可以使用可以使用getItem()getItem()方法設(shè)置方法設(shè)置sessionstoragesessionstorage數(shù)據(jù)，語法如下：數(shù)據(jù)，語法如下： = sessionStorage.getItem();p 也可以通過也可以通過localStorage.localStorage. 和和localStoragelocalStorage的形式訪問的形式訪問sessionstoragesessionstorage數(shù)據(jù)。例如，下面數(shù)據(jù)。例如，下面3 3條語句都可以獲取條語句都可以獲取localstoragelocalstorage中存中存儲的鍵名為儲的鍵名為keykey的數(shù)據(jù)值到變

33、量的數(shù)據(jù)值到變量valuevalue中：中：var value = sessionStorage.getItem(key);var value = sessionStorage.key;p var value = sessionStorage key;var value = sessionStorage key;可以使用可以使用getItem()getItem()方法設(shè)置方法設(shè)置sessionstoragesessionstorage數(shù)據(jù)，語法如下：數(shù)據(jù)，語法如下： = sessionStorage.getItem();p 也可以通過也可以通過localStorage.localStorage

34、. 和和localStoragelocalStorage的形式訪問的形式訪問sessionstoragesessionstorage數(shù)據(jù)。例如，下面數(shù)據(jù)。例如，下面3 3條語句都可以獲取條語句都可以獲取localstoragelocalstorage中存中存儲的鍵名為儲的鍵名為keykey的數(shù)據(jù)值到變量的數(shù)據(jù)值到變量valuevalue中：中：var value = sessionStorage.getItem(key);var value = sessionStorage.key;var value = sessionStorage key;【例【例10-8】 p 在在【例例10-710-7

35、】的網(wǎng)頁中增加一個按鈕，單擊此按鈕時，從的網(wǎng)頁中增加一個按鈕，單擊此按鈕時，從sessionstoragesessionstorage中獲取鍵名為中獲取鍵名為keykey的值。按鈕的定義代碼如下：的值。按鈕的定義代碼如下：獲取獲取sessionstorage中的數(shù)據(jù)中的數(shù)據(jù)p 單擊按鈕單擊按鈕getItemgetItem將調(diào)用將調(diào)用getItem ()getItem ()函數(shù)。函數(shù)。getItem ()getItem ()函數(shù)的定義函數(shù)的定義代碼如下：代碼如下：function getItem () if(window. sessionStorage) var value = sessionS

36、torage.getItem(key); alert(value); else alert(您的瀏覽器不支持您的瀏覽器不支持sessionStorage。); 10.3.4 刪除刪除sessionstorage中的數(shù)據(jù)中的數(shù)據(jù) p調(diào)用調(diào)用sessionStorage.removeItem()sessionStorage.removeItem()方法方法可以刪除可以刪除sessionStoragesessionStorage中指定鍵的項中指定鍵的項，語法如下：，語法如下：sessionStorage.removeItem(key)pkeykey為要刪除的指定鍵。為要刪除的指定鍵。p如果要刪除如果

37、要刪除sessionStoragesessionStorage中所有的數(shù)中所有的數(shù)據(jù)，則可以調(diào)用據(jù)，則可以調(diào)用sessionStorage.clear()sessionStorage.clear()方法。方法。10.4 webSQL Database API p10.4.1 10.4.1 判斷瀏覽器是否支持判斷瀏覽器是否支持webSQL webSQL Database API Database API p10.4.2 10.4.2 新建數(shù)據(jù)庫新建數(shù)據(jù)庫 p10.4.3 10.4.3 執(zhí)行執(zhí)行SQLSQL語句語句 10.4.1 判斷瀏覽器是否支持判斷瀏覽器是否支持webSQL Database

38、API p 使用使用windows. openDatabasewindows. openDatabase屬性可以打開本數(shù)據(jù)庫，并返回連接句柄。屬性可以打開本數(shù)據(jù)庫，并返回連接句柄。如果該句柄為如果該句柄為nullnull、undefinedundefined則說明不支持使用則說明不支持使用webSQL Database APIwebSQL Database API操作本地數(shù)據(jù)庫，反之則支持。下面定義一個操作本地數(shù)據(jù)庫，反之則支持。下面定義一個openDatabase()openDatabase()函數(shù)，用函數(shù)，用于打開本地數(shù)據(jù)庫：于打開本地數(shù)據(jù)庫：function getOpenDatabas

39、e() try /如果支持則返回數(shù)據(jù)庫連接句柄如果支持則返回數(shù)據(jù)庫連接句柄 if(!window.openDatabase) return window.openDatabase; else return undefined; catch (e) return undefined; 【例【例10-9】 p 在網(wǎng)頁中定義一個按鈕，單擊此按鈕時，會檢測瀏覽器是否支持在網(wǎng)頁中定義一個按鈕，單擊此按鈕時，會檢測瀏覽器是否支持webSQL webSQL Database APIDatabase API。定義按鈕的代碼如下：。定義按鈕的代碼如下：檢測瀏覽器是否支持檢測瀏覽器是否支持webSQL Datab

40、ase APIp 單擊按鈕單擊按鈕checkcheck將調(diào)用將調(diào)用check()check()函數(shù)。函數(shù)。check()check()函數(shù)的定義代碼如下：函數(shù)的定義代碼如下：function check() if(getOpenDatabase() = undefined) alert(您的瀏覽器不支持您的瀏覽器不支持webSQL Database API。); else alert(您的瀏覽器支持您的瀏覽器支持webSQL Database API。); 10.4.2 新建數(shù)據(jù)庫新建數(shù)據(jù)庫 pwebSQL Database APIwebSQL Database API在中并不包括專門在中并不

41、包括專門用于創(chuàng)建數(shù)據(jù)庫的用于創(chuàng)建數(shù)據(jù)庫的APIAPI，但是以指定的數(shù)，但是以指定的數(shù)據(jù)庫名為參數(shù)調(diào)用據(jù)庫名為參數(shù)調(diào)用openDatabase()openDatabase()函數(shù)函數(shù)時，如果自定的數(shù)據(jù)庫名不存在，則會時，如果自定的數(shù)據(jù)庫名不存在，則會自動創(chuàng)建它。帶參數(shù)的自動創(chuàng)建它。帶參數(shù)的openDatabase()openDatabase()函數(shù)的語法如下：函數(shù)的語法如下：數(shù)據(jù)庫連接句柄數(shù)據(jù)庫連接句柄 = openDatabase(數(shù)數(shù)據(jù)庫名據(jù)庫名, 版本號版本號, 數(shù)據(jù)庫顯示名稱數(shù)據(jù)庫顯示名稱, 估計估計容量容量);【例【例10-10】 p 創(chuàng)建數(shù)據(jù)庫創(chuàng)建數(shù)據(jù)庫mydatabasemydat

42、abase的代碼如下：的代碼如下：function createDB() if(window.openDatabase = undefined) alert(您的瀏覽器不支持您的瀏覽器不支持webSQL Database API。); else var dbs = window.openDatabase(mydatabase, v1.0, Save data DB, 100); if(dbs) alert(創(chuàng)建成功。創(chuàng)建成功。); else alert(打開數(shù)據(jù)庫失敗。打開數(shù)據(jù)庫失敗。); 10.4.3 執(zhí)行執(zhí)行SQL語句語句 p使用使用transaction()transaction()函數(shù)

43、可以執(zhí)行函數(shù)可以執(zhí)行SQLSQL語句，語語句，語法如下：法如下：數(shù)據(jù)庫連接句柄數(shù)據(jù)庫連接句柄.transaction(function (tx) tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id unique, log); );ptransaction()transaction()函數(shù)的參數(shù)是一個回調(diào)函數(shù)，函數(shù)的參數(shù)是一個回調(diào)函數(shù)，使用回調(diào)函數(shù)的參數(shù)使用回調(diào)函數(shù)的參數(shù)txtx來調(diào)用來調(diào)用executeSql()executeSql()函函數(shù)可以執(zhí)行數(shù)可以執(zhí)行SQLSQL語句。下面分別介紹幾個常用語句。下面分別介紹幾個常用的的SQLSQL語句。語

44、句。1創(chuàng)建表語句創(chuàng)建表語句CREATE TABLE p 表是數(shù)據(jù)庫中最重要的邏輯對象，是存儲數(shù)據(jù)的主要表是數(shù)據(jù)庫中最重要的邏輯對象，是存儲數(shù)據(jù)的主要對象。在設(shè)計數(shù)據(jù)庫結(jié)構(gòu)時，很重要的工作就是設(shè)計對象。在設(shè)計數(shù)據(jù)庫結(jié)構(gòu)時，很重要的工作就是設(shè)計表的結(jié)構(gòu)。關(guān)系型數(shù)據(jù)庫的表由行和列組成。表的結(jié)構(gòu)。關(guān)系型數(shù)據(jù)庫的表由行和列組成。CREATE TABLE語句用于創(chuàng)建表語句用于創(chuàng)建表 CREATE TABLE IF NOT EXISTS 表表名名( 列名列名1數(shù)據(jù)類型數(shù)據(jù)類型 字段屬性字段屬性, 列名列名2數(shù)據(jù)類型數(shù)據(jù)類型 字段屬性字段屬性, 列名列名n數(shù)據(jù)類型數(shù)據(jù)類型 字段屬性字段屬性)【例【例10-11

45、】 function createTable() if(window.openDatabase = undefined) alert(您的瀏覽器不支持您的瀏覽器不支持webSQL Database API。); else var dbs = window.openDatabase(mydatabase, v1.0, Save data DB, 100); if(dbs) dbs.transaction(function(tx) tx.executeSql(CREATE TABLE IF NOT EXISTS t(id UNIQUE,name); ); else alert(打開數(shù)據(jù)庫失敗。打開

46、數(shù)據(jù)庫失敗。); DROP TABLE語句語句 p可以使用可以使用DROP TABLEDROP TABLE語句刪除表，語法語句刪除表，語法如下：如下：DROP TABLE 表名表名p在在WebSQLWebSQL中執(zhí)行中執(zhí)行DROP TABLEDROP TABLE語句的方法語句的方法與執(zhí)行與執(zhí)行CREATE TABLECREATE TABLE語句的方法相似。語句的方法相似。2插入數(shù)據(jù)表語句插入數(shù)據(jù)表語句INSERT pINSERTINSERT語句用于向表中插入數(shù)據(jù)，基本語句用于向表中插入數(shù)據(jù)，基本使用方法如下：使用方法如下：INSERT INTO 表名表名 (列名列名1, 列名列名2, , 列名

47、列名n) VALUES (值值1, 值值2, , 值值n)【例【例10-12】 function insert () if(window.openDatabase = undefined) alert(您的瀏覽器不支持您的瀏覽器不支持webSQL Database API。); else var dbs = window.openDatabase(mydatabase, v1.0, Save data DB, 100); if(dbs) dbs.transaction(function(tx) tx.executeSql(INSERT INTO t(id ,name) VALUES (1, l

48、ee); ); else alert(打開數(shù)據(jù)庫失敗。打開數(shù)據(jù)庫失敗。); UPDATE語句語句 p可以通過可以通過UPDATEUPDATE語句修改表中的數(shù)據(jù)。語句修改表中的數(shù)據(jù)。UPDATEUPDATE語句的基本使用方法如下所示：語句的基本使用方法如下所示：UPDATE 表名表名 SET 列名列名1 = 值值1, 列名列名2 = 值值2, , 列名列名n = 值值nWHERE 更新條件表達(dá)式更新條件表達(dá)式DELETE語句語句 pDELETE FROM 表名表名WHERE 刪除條刪除條件表達(dá)式件表達(dá)式3查詢數(shù)據(jù)表語句查詢數(shù)據(jù)表語句SELECT SELECT子句子句FROM 子句子句 WHERE

49、 子句子句 各子句的主要功能說明如下。各子句的主要功能說明如下。 SELECTSELECT子句：指定查詢結(jié)果集的列組成，列子句：指定查詢結(jié)果集的列組成，列表中的列可以來自一個或多個表；表中的列可以來自一個或多個表； FROMFROM子句：指定要查詢的一個或多個表；子句：指定要查詢的一個或多個表； WHEREWHERE子句：指定查詢的條件；子句：指定查詢的條件；transaction()函數(shù)函數(shù) p使用使用transaction()transaction()函數(shù)執(zhí)行函數(shù)執(zhí)行SELECTSELECT語句語句的語法如下：的語法如下：db.transaction(function (t) t.exec

50、uteSql(SELECT語句語句, , function(t, r) , function(t, e) );t.executeSql()函數(shù)有函數(shù)有4個參數(shù)個參數(shù) p第一個參數(shù)是要執(zhí)行的第一個參數(shù)是要執(zhí)行的SELECTSELECT語句；語句；p第第2 2個參數(shù)是要傳遞的參數(shù)，比如查詢條個參數(shù)是要傳遞的參數(shù)，比如查詢條件，如果沒有參數(shù)，則使用件，如果沒有參數(shù)，則使用；p第第3 3個參數(shù)是處理查詢結(jié)果集的回調(diào)函數(shù)個參數(shù)是處理查詢結(jié)果集的回調(diào)函數(shù)，參數(shù)，參數(shù)r r為結(jié)果集；為結(jié)果集；p第第4 4個參數(shù)是處理錯誤的回調(diào)函數(shù)，參數(shù)個參數(shù)是處理錯誤的回調(diào)函數(shù)，參數(shù)e e為錯誤對象。為錯誤對象。 【例【例

51、10-13】 function select() if(window.openDatabase = undefined) alert(您的瀏覽器不支持您的瀏覽器不支持webSQL Database API。); elsevar dbs = window.openDatabase(mydatabase, v1.0, Save data DB, 100); if(dbs) dbs.transaction(function(tx) tx.executeSql(SELECT * FROM t, , function(tx, results) alert( results.rows.length);if

52、(results & results.rows & 0 results.rows.length) var text = ; 接上接上for (var i=0; i results.rows.length; i+) text += results.rows.item(i).id + + results.rows.item(i).name + ; document.getElementById(result).innerHTML = text; , null); ); else alert(打開數(shù)據(jù)庫失敗。打開數(shù)據(jù)庫失敗。); 定義一個定義一個“查詢表查詢表t”按鈕按鈕 查詢表查詢

53、表t定義一個定義一個標(biāo)簽，用于顯示查詢結(jié)果標(biāo)簽，用于顯示查詢結(jié)果 顯示表顯示表t的內(nèi)容的內(nèi)容 10.5 IndexedDB p10.5.1 10.5.1 數(shù)據(jù)庫的相關(guān)概念數(shù)據(jù)庫的相關(guān)概念 p10.5.2 10.5.2 判斷瀏覽器是否支持判斷瀏覽器是否支持IndexedDB IndexedDB p10.5.3 10.5.3 創(chuàng)建和打開數(shù)據(jù)庫創(chuàng)建和打開數(shù)據(jù)庫 p10.5.4 10.5.4 創(chuàng)建對象存儲空間創(chuàng)建對象存儲空間ObjectStore ObjectStore p10.5.5 10.5.5 創(chuàng)建索引創(chuàng)建索引 p10.5.6 10.5.6 事務(wù)事務(wù) p10.5.7 10.5.7 游標(biāo)游標(biāo) 10

54、.5.1 數(shù)據(jù)庫的相關(guān)概念數(shù)據(jù)庫的相關(guān)概念 p1 1數(shù)據(jù)庫數(shù)據(jù)庫 p2 2數(shù)據(jù)庫管理系統(tǒng)數(shù)據(jù)庫管理系統(tǒng) p3 3數(shù)據(jù)庫系統(tǒng)數(shù)據(jù)庫系統(tǒng) p4 4NoSQLNoSQL數(shù)據(jù)庫數(shù)據(jù)庫 1數(shù)據(jù)庫數(shù)據(jù)庫 p數(shù)據(jù)庫（數(shù)據(jù)庫（DatabaseDatabase，DBDB），簡單地講就），簡單地講就是存放數(shù)據(jù)的倉庫。不過，數(shù)據(jù)庫不是是存放數(shù)據(jù)的倉庫。不過，數(shù)據(jù)庫不是數(shù)據(jù)的簡單堆積，而是以一定的方式保數(shù)據(jù)的簡單堆積，而是以一定的方式保存在計算機存儲設(shè)備上的相互關(guān)聯(lián)的數(shù)存在計算機存儲設(shè)備上的相互關(guān)聯(lián)的數(shù)據(jù)的集合。也就是說，數(shù)據(jù)庫中的數(shù)據(jù)據(jù)的集合。也就是說，數(shù)據(jù)庫中的數(shù)據(jù)并不是相互孤立的，數(shù)據(jù)和數(shù)據(jù)之間是并不是相互孤立

55、的，數(shù)據(jù)和數(shù)據(jù)之間是有關(guān)聯(lián)的。有關(guān)聯(lián)的。2數(shù)據(jù)庫管理系統(tǒng)數(shù)據(jù)庫管理系統(tǒng) p數(shù)據(jù)庫管理系統(tǒng)（數(shù)據(jù)庫管理系統(tǒng)（Database Management Database Management SystemSystem，DBMSDBMS）是一種系統(tǒng)軟件，介于）是一種系統(tǒng)軟件，介于應(yīng)用程序和操作系統(tǒng)之間，用于幫助我應(yīng)用程序和操作系統(tǒng)之間，用于幫助我們管理輸入到計算機中的大量數(shù)據(jù)。如們管理輸入到計算機中的大量數(shù)據(jù)。如用于創(chuàng)建數(shù)據(jù)庫，向數(shù)據(jù)庫中存儲數(shù)據(jù)用于創(chuàng)建數(shù)據(jù)庫，向數(shù)據(jù)庫中存儲數(shù)據(jù)，修改數(shù)據(jù)庫中的數(shù)據(jù)，從數(shù)據(jù)庫中提，修改數(shù)據(jù)庫中的數(shù)據(jù)，從數(shù)據(jù)庫中提取信息等。取信息等。 一個數(shù)據(jù)庫管理系統(tǒng)應(yīng)具備如下功能一

56、個數(shù)據(jù)庫管理系統(tǒng)應(yīng)具備如下功能 p （1 1）數(shù)據(jù)定義功能?？梢远x數(shù)據(jù)庫的結(jié)構(gòu)，定義數(shù)）數(shù)據(jù)定義功能?？梢远x數(shù)據(jù)庫的結(jié)構(gòu)，定義數(shù)據(jù)庫中數(shù)據(jù)之間的聯(lián)系，定義對數(shù)據(jù)庫中數(shù)據(jù)的各種據(jù)庫中數(shù)據(jù)之間的聯(lián)系，定義對數(shù)據(jù)庫中數(shù)據(jù)的各種約束等。約束等。p （2 2）數(shù)據(jù)操縱功能：可以實現(xiàn)對數(shù)據(jù)庫中數(shù)據(jù)的添加）數(shù)據(jù)操縱功能：可以實現(xiàn)對數(shù)據(jù)庫中數(shù)據(jù)的添加、刪除、修改，可以對數(shù)據(jù)庫進(jìn)行備份和恢復(fù)等。、刪除、修改，可以對數(shù)據(jù)庫進(jìn)行備份和恢復(fù)等。p （3 3）數(shù)據(jù)查詢功能：可以以各種方式提供靈活的查詢）數(shù)據(jù)查詢功能：可以以各種方式提供靈活的查詢功能，使用戶可以方便地使用數(shù)據(jù)庫中的數(shù)據(jù)。功能，使用戶可以方便地使用數(shù)據(jù)

57、庫中的數(shù)據(jù)。p （4 4）數(shù)據(jù)控制功能：可以完成對數(shù)據(jù)庫中數(shù)據(jù)的安全）數(shù)據(jù)控制功能：可以完成對數(shù)據(jù)庫中數(shù)據(jù)的安全性控制、完整性控制、多用戶環(huán)境下的并發(fā)控制等多性控制、完整性控制、多用戶環(huán)境下的并發(fā)控制等多方面的控制。方面的控制。p （5 5）數(shù)據(jù)庫通信功能：在分布式數(shù)據(jù)庫或提供網(wǎng)絡(luò)操）數(shù)據(jù)庫通信功能：在分布式數(shù)據(jù)庫或提供網(wǎng)絡(luò)操作功能的數(shù)據(jù)庫中還必須提供數(shù)據(jù)庫的通信功能。作功能的數(shù)據(jù)庫中還必須提供數(shù)據(jù)庫的通信功能。數(shù)據(jù)庫管理系統(tǒng)在計算機系統(tǒng)中的地位數(shù)據(jù)庫管理系統(tǒng)在計算機系統(tǒng)中的地位 硬件 操 系 統(tǒng) 作 D B M S 應(yīng) 用 開 發(fā) 工 具 應(yīng) 用 系 統(tǒng) 3數(shù)據(jù)庫系統(tǒng)數(shù)據(jù)庫系統(tǒng) p數(shù)據(jù)庫系統(tǒng)

58、（數(shù)據(jù)庫系統(tǒng)（Database SystemDatabase System，DBSDBS）是指在計算機系統(tǒng)中引入數(shù)據(jù)庫的系統(tǒng)是指在計算機系統(tǒng)中引入數(shù)據(jù)庫的系統(tǒng)，除了相關(guān)的硬件之外，數(shù)據(jù)庫系統(tǒng)還，除了相關(guān)的硬件之外，數(shù)據(jù)庫系統(tǒng)還包括數(shù)據(jù)庫、數(shù)據(jù)庫管理系統(tǒng)、應(yīng)用系包括數(shù)據(jù)庫、數(shù)據(jù)庫管理系統(tǒng)、應(yīng)用系統(tǒng)、數(shù)據(jù)庫管理員和用戶。統(tǒng)、數(shù)據(jù)庫管理員和用戶。p可以看出，數(shù)據(jù)庫、數(shù)據(jù)庫管理系統(tǒng)和可以看出，數(shù)據(jù)庫、數(shù)據(jù)庫管理系統(tǒng)和數(shù)據(jù)庫系統(tǒng)是數(shù)據(jù)庫系統(tǒng)是3 3個不同的概念，數(shù)據(jù)庫強個不同的概念，數(shù)據(jù)庫強調(diào)的是數(shù)據(jù)，數(shù)據(jù)庫管理系統(tǒng)是系統(tǒng)軟調(diào)的是數(shù)據(jù)，數(shù)據(jù)庫管理系統(tǒng)是系統(tǒng)軟件，而數(shù)據(jù)庫系統(tǒng)強調(diào)的是系統(tǒng)。件，而數(shù)據(jù)庫系統(tǒng)

59、強調(diào)的是系統(tǒng)。4NoSQL數(shù)據(jù)庫數(shù)據(jù)庫 p NoSQLNoSQL是新一代的數(shù)據(jù)庫，是新一代的數(shù)據(jù)庫，NoSQLNoSQL有有non-relationalnon-relational和和Not Only Not Only SQLSQL的意思，具有非關(guān)系型、高效、分布式、開放源代碼等特點。的意思，具有非關(guān)系型、高效、分布式、開放源代碼等特點。對于已經(jīng)熟悉對于已經(jīng)熟悉SQL ServerSQL Server等關(guān)系型數(shù)據(jù)庫的讀者而言，接受等關(guān)系型數(shù)據(jù)庫的讀者而言，接受NoSQLNoSQL數(shù)據(jù)庫還需要有一個過程。數(shù)據(jù)庫還需要有一個過程。NamNam為什么要提出為什么要提出NoSQLNoSQL的概念呢？因

60、的概念呢？因為傳統(tǒng)的關(guān)系數(shù)據(jù)庫在應(yīng)付為傳統(tǒng)的關(guān)系數(shù)據(jù)庫在應(yīng)付web2.0web2.0網(wǎng)站，特別是超大規(guī)模和高并網(wǎng)站，特別是超大規(guī)模和高并發(fā)的發(fā)的SNSSNS類型（社交網(wǎng)絡(luò)）的類型（社交網(wǎng)絡(luò)）的web2.0web2.0純動態(tài)網(wǎng)站已經(jīng)顯得力不從心純動態(tài)網(wǎng)站已經(jīng)顯得力不從心，暴露了很多難以克服的問題。例如，對數(shù)據(jù)庫高并發(fā)讀寫的需，暴露了很多難以克服的問題。例如，對數(shù)據(jù)庫高并發(fā)讀寫的需求、對海量數(shù)據(jù)的高效率存儲和訪問的需求、對數(shù)據(jù)庫的高可擴(kuò)求、對海量數(shù)據(jù)的高效率存儲和訪問的需求、對數(shù)據(jù)庫的高可擴(kuò)展性和高可用性的需求等。所以，關(guān)系數(shù)據(jù)庫在很多情況下顯得展性和高可用性的需求等。所以，關(guān)系數(shù)據(jù)庫在很多情況下顯得不太合適了。