第8章本地存儲(chǔ)_第1頁
第8章本地存儲(chǔ)_第2頁
第8章本地存儲(chǔ)_第3頁
第8章本地存儲(chǔ)_第4頁
第8章本地存儲(chǔ)_第5頁
已閱讀5頁，還剩79頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、第8章 本地存儲(chǔ)本章工作任務(wù)n Web Storagen 本地?cái)?shù)據(jù)庫n indexedDB數(shù)據(jù)庫第3章 網(wǎng)絡(luò)相關(guān)配置本章簡(jiǎn)介本章將介紹HTML 5中與本地存儲(chǔ)相關(guān)的兩個(gè)重要內(nèi)容-Web Storage與本地?cái)?shù)據(jù)庫。其中，Web Storage存儲(chǔ)機(jī)制是對(duì)HTML 4中cookies存儲(chǔ)機(jī)制的一個(gè)改善。由于cookies存儲(chǔ)機(jī)制有很多缺點(diǎn)，HTML 5不再使用它，轉(zhuǎn)而使用改良后的Web Storage存儲(chǔ)機(jī)制。本地?cái)?shù)據(jù)庫是HTML 5中新增的一個(gè)功能，使用它可以在客戶端本地建立一個(gè)數(shù)據(jù)庫，原本必須要保存在服務(wù)器端數(shù)據(jù)庫中的內(nèi)容現(xiàn)在可以直接保存在客戶端本地了，這大大減輕了服務(wù)器的負(fù)擔(dān)，同時(shí)也加快了

2、訪問數(shù)據(jù)的速度。學(xué)習(xí)內(nèi)容：n 掌握Web Storage的基本概念，了解sessionStorage和locaIStorage，以及兩者之間的區(qū)別，掌握sessionStorage和locaIStorage的使用方法，能夠使用這兩者進(jìn)行復(fù)雜數(shù)據(jù)的存儲(chǔ)，能夠使用這兩者進(jìn)行JavaScript對(duì)象的存儲(chǔ)。n 掌握本地?cái)?shù)據(jù)庫的基本概念，掌握SQLLite本地?cái)?shù)據(jù)庫的基本概念及其使用夠使用openDatabase方法創(chuàng)建與打開SQLLite數(shù)據(jù)庫，能夠使用transactionin方法進(jìn)行 SQLLite數(shù)據(jù)庫中事務(wù)的處理，能夠結(jié)合使用transaction方法與executeSql方法來實(shí)現(xiàn)數(shù)據(jù)在S

3、QLLite數(shù)據(jù)庫中的增、刪、查、改。n 掌握indexedDB數(shù)據(jù)庫的基本概念及其使用方法，能夠在腳本代碼中連接indexedDB數(shù)據(jù)庫，掌握indexedDB數(shù)據(jù)庫中對(duì)象倉庫、索引與事務(wù)的基本概念及其分類，能夠在版本更新事務(wù)中創(chuàng)建對(duì)象倉庫與索引，能夠在只讀事務(wù)中獲取對(duì)象倉庫中的一條數(shù)據(jù)或使用游標(biāo)檢索多條數(shù)據(jù)，能夠在讀寫事務(wù)中向?qū)ο髠}庫中追加、修改或刪除數(shù)據(jù)。8.1 Web Storage8.1.1 Web storage概述在HTML5中，除了Canvas元素之外，另一個(gè)新增的非常重要的功能是可以在客戶端地保存數(shù)據(jù)的Web Storage功能。我們知道，在HTML 4中可以使用cookie

4、s在客戶端保存諸如用戶名等簡(jiǎn)單的用戶信息，但通過長(zhǎng)期的使用，人們發(fā)現(xiàn)用cookies儲(chǔ)存永久數(shù)據(jù)存在以下幾個(gè)問題。Ø 大?。篶ookies的大小被限制在4KB。Ø 帶寬：cookies是隨HTTP事務(wù)一起被發(fā)送的，因此會(huì)浪費(fèi)一部分發(fā)送cookies時(shí)使用的帶寬。Ø 復(fù)雜性：要正確地操縱cookies是很困難的。針對(duì)這些問題，在HTML 5中，重新提供了一種在客戶端本地保存數(shù)據(jù)的功能，它就是Web Storage功能。顧名思義，Web Storage功能就是在Web上儲(chǔ)存數(shù)據(jù)的功能，這里的儲(chǔ)存是針對(duì)客戶端本地而言的。具體來說，Web Storage又分為兩種： u

5、sessionStorage將數(shù)據(jù)保存在session對(duì)象中。session是指用戶在瀏覽某個(gè)網(wǎng)站時(shí)，從進(jìn)入網(wǎng)站到瀏覽器關(guān)閉所經(jīng)過的這段時(shí)間，也就是用戶瀏覽這個(gè)網(wǎng)站所花費(fèi)的時(shí)間。session對(duì)象可以用來保存在這段時(shí)間內(nèi)所要求保存的任何數(shù)據(jù)。 u localStorage 將數(shù)據(jù)保存在客戶端本地的硬件設(shè)備（通常指硬盤，也可以是其他硬件設(shè)備）中，即使 瀏覽器被關(guān)閉了，該數(shù)據(jù)仍然存在，下次打開瀏覽器訪問網(wǎng)站時(shí)仍然可以繼續(xù)使用。這兩者的區(qū)別在于，sessionStorage為臨時(shí)保存，而localStorage為永久保存。目前為止，F(xiàn)irefox 3.6以上版本、Chrome 6以上版本、Safar

6、i 5以上版本、Opera 10.50以上版本、IE 8以上版本的瀏覽器支持session-Storage與localStorage的使用。 接下來，讓我們具體看一下sessionStorage與localStorage的使用示例。 首先，需要準(zhǔn)備一個(gè)用來保存數(shù)據(jù)的網(wǎng)頁。在示例網(wǎng)頁中，我們?cè)陧撁嫔戏胖玫目丶绫?-1所示。表8-1 Web Storage示例的頁面中的元素 元素 ID用途input type=textinput 輸入數(shù)據(jù)p msg顯示數(shù)據(jù)button保存數(shù)據(jù)button保存數(shù)據(jù) 該示例的HTML頁面代碼如代碼清單8-1所示。代碼清單8-1 Web Storage示例的HTML頁

7、面代碼< ! DOCTYPE html><head><meta charset= " UTF-8 "><title>Web Storage示例 </title><script type= " text/ javascript " src= " script . js "></script></head><body><h1>Web Storage示例</h1><p id= " msg &qu

8、ot;></p><input type= " text " id= " input " ><input type= " button " value= "保存數(shù)據(jù) " onclick= " saveStorage ( ' input ' );" ><input type= " button " value= "讀取數(shù)據(jù) " onclick= " loadStorage ( '

9、 msg ' ); "></body></html>單擊保存數(shù)據(jù)按鈕時(shí)調(diào)用saveStorage方法來保存數(shù)據(jù)，單擊讀取數(shù)據(jù)按鈕時(shí)調(diào)用loadStorage方法讀取數(shù)據(jù)，這兩個(gè)方法均位于腳本文件script.js中。接下來，查看腳本文件script.js。在這個(gè)腳本文件中，分別使用了sessionStorage方法與loadStorage方法。這兩種方法都是用于當(dāng)用戶在input文本框中輸入內(nèi)容后，單擊保存數(shù)據(jù)按鈕時(shí)保存數(shù)據(jù)，單擊讀取數(shù)據(jù)按鈕時(shí)讀取被保存的數(shù)據(jù)。但是兩種方法對(duì)數(shù)據(jù)的處理方式不一樣，在使用sessionStorage方法時(shí)，如果關(guān)閉

10、了瀏覽器，這個(gè)數(shù)據(jù)就丟失了，下一次打開瀏覽器單擊讀取數(shù)據(jù)按鈕時(shí)，讀取不到任何數(shù)據(jù)。而使用locaIStorage方法時(shí)，即使瀏覽器關(guān)閉了，下次打開瀏覽器時(shí)仍然能夠讀取被保存的數(shù)據(jù)。不過，數(shù)據(jù)保存是按不同的瀏覽器分別進(jìn)行保存的，也就是說，打開別的瀏覽器是讀取不到在先前瀏覽器中保存的數(shù)據(jù)的。下面我們來看一下讀取數(shù)據(jù)部分。讀寫數(shù)據(jù)時(shí)使用的基本方法如下。(1) sessionStorage保存數(shù)據(jù)的方法：sessionStorage. setltem(key, value);|或sessionStorage.key= value；讀取數(shù)據(jù)的方法：變量=sessionStorage.getltem(ke

11、y);|或，變量=sessionStorage.key;(2) locaIStorage保存數(shù)據(jù)的方法：localStorage.setltem(key, value);|或localStorage. key= value;讀取數(shù)據(jù)的方法：變量=localStorage. getltem(key);|或變量=locaIStorage.key;若使用sessionStorage讀取或保存數(shù)據(jù)，則使用sessionStorage對(duì)象并調(diào)用該對(duì)象d的讀寫方法；若使用localStorage讀取或保存數(shù)據(jù)，則使用localStoraggetltem調(diào)用該對(duì)象的讀寫方法。 在進(jìn)行讀寫時(shí)，不管是哪個(gè)對(duì)象，

12、都可以通過該對(duì)象的getItem方法來讀取數(shù)據(jù)，也可以通過該對(duì)象的自定義屬性值來讀取數(shù)據(jù)；可以通過該對(duì)象的setltem方法來保存數(shù)據(jù)通過該對(duì)象的自定義屬性值來保存數(shù)據(jù)。保存數(shù)據(jù)時(shí)按“鍵名鍵值”的形式進(jìn)行保存。當(dāng)通過該對(duì)象的getltem方法讀取數(shù)據(jù)時(shí)，將參數(shù)指定為鍵名，該方法返回鍵值，當(dāng)通過該對(duì)象的自定義屬性值來讀取數(shù)據(jù)時(shí)，可以將該對(duì)象的某個(gè)自定義屬性名作為鍵名，訪問該自定義屬性的屬性值即可得到鍵值；當(dāng)通過該對(duì)象的setltem方法保存數(shù)據(jù)時(shí)，將第一個(gè)參數(shù)指定為鍵名，將第二個(gè)參數(shù)指定為鍵值；當(dāng)通過該對(duì)象的自定義屬性值來保存數(shù)據(jù)時(shí)，可以將該對(duì)象的某個(gè)自定義屬性名作為鍵名，然后直接將該自定義屬性

13、值設(shè)置為鍵值。 在保存數(shù)據(jù)時(shí)不允許重復(fù)保存相同的鍵名。保存后可以修改鍵值，但不允許修改鍵名（只能重新取鍵名，然后再保存鍵值）。 script.js腳本文件中的內(nèi)容如代碼清單8-2所示。代碼清單8-2 Web Storage示例的JavaScript腳本代碼/ /ses sionStorage示例function saveStorage (id) var target = document . getElementByld ( id) , var str = target.value; sessionStorage . setitem ( " me s sage " , st

14、r ) ; / /或 sessionStorage .message=str;function loadStorage ( id) var target = document.getElementByld ( id) ; var msg = sessionStorage. getltem( "message " ) , /或var msg=sessionStorage . message ; target.innerHTML = msg; /localStorage示例 function saveStorage(id) var target = document.getEl

15、ementByld(id); var str = target.value, localStorage . setltem ( "message " , str) ; /或localStorage.message=str; function loadStorage(id) var target = document.getElementByld(id); var msg = localStorage.getltem( "message " ) ; / /或 var msg=localStorage . message, target.innerHTML

16、= msg;這段程序在瀏覽器中的運(yùn)行結(jié)果如圖8-1所示。圖8-1 瀏覽器中的Web Storage示例8.1.2 簡(jiǎn)單Web留言本8.1.1節(jié)講到的使用getltem方法、sessionStorage對(duì)象或locaIStorage對(duì)象的自定義屬性值讀取數(shù)據(jù)，使用setltem方法、sessionStorage對(duì)象或locaIStorage對(duì)象的自定義屬性值保存數(shù)據(jù)，雖然這種一對(duì)一的數(shù)據(jù)讀寫方法使用起來比較方便，但是在實(shí)際使用過程中用處并不是很大，因?yàn)槿绻４娴臄?shù)據(jù)量比較大，那么使用這種方法會(huì)非常麻煩。下面來看一下如何利用Storage來保存和讀取大量數(shù)據(jù)。 這里來看一個(gè)簡(jiǎn)單Web留言本的示例

17、。使用一個(gè)多行文本框來輸入數(shù)據(jù)，單擊按鈕時(shí)將文本框中的數(shù)據(jù)保存到locaIStorage中，在表單下部放置_個(gè)p元素來顯示保存后的數(shù)據(jù)。 只保存文本框中的內(nèi)容，并不能知道該內(nèi)容是什么時(shí)候?qū)懞玫?，所以在保存該?nèi)容的同時(shí)，保存當(dāng)前日期和時(shí)間，并將該日期和時(shí)間一并顯示在p元素中。在利用Web Storage保存數(shù)據(jù)時(shí)，數(shù)據(jù)必須是“鍵名鍵值”這個(gè)格式，所以將文本框的內(nèi)容作為鍵值，保存時(shí)的日期和時(shí)間作為鍵名來進(jìn)行保存，計(jì)算機(jī)中的日期和時(shí)間值是以時(shí)間戳（1970年1月1日凌晨12點(diǎn)后經(jīng)過的秒數(shù)）的形式進(jìn)行管理的，所以保存時(shí)不可能存在重復(fù)的鍵名。 該示例的顯示頁面所用的HTML代碼如代碼清單8-3所示。在該

18、頁面中，除了輸入數(shù)據(jù)用的文本框與顯示數(shù)據(jù)用的p元素之外，還放置了追加按鈕與初始化按鈕，單擊追加按鈕來保存數(shù)據(jù)，單擊初始化按鈕來消除全部數(shù)據(jù)。代碼清單8-3簡(jiǎn)單Web留言本的HTML代碼< ! DOCTYPE html><head><meta charset= "UTF-8 "><title>簡(jiǎn)單Web留言本</title><script type= " text/j avascript " src= " script . j s " ></script>

19、;</head><body><hl>簡(jiǎn)單Web留言本</hl><textarea id= " memo " cols= " 60 " rows= " 10 "></textarea><br><input type= " button " value= "追加 " onclick= " saveStorage ( ' memo ' ) ; " ><input t

20、ype= " button " value= "初始化 " onclick= " clearStorage ( ' msg ' ) , " ><hr><p id= "msg " ></p></body></html>接下來，再查看一下script.js腳本文件?，F(xiàn)在，這個(gè)腳本文件里含有3個(gè)供單擊按鈕時(shí)調(diào)用的函數(shù)，分別是 saveStorage、loadStorage和clearStorage。(1)saveStorage函數(shù) 這個(gè)函數(shù)

21、比較簡(jiǎn)單，使用“new Date()getTime()”語句獲得當(dāng)前日期和時(shí)間戳，然后調(diào)用locaIStorage.setltem方法將得到的時(shí)間戳作為鍵值，并將文本框中的數(shù)據(jù)作為鍵名進(jìn)行保存。保存完畢后，重新調(diào)用腳本中的loadStorage函數(shù)在頁面上顯示保存后的數(shù)據(jù)。 (2) loadStorage函數(shù) 這個(gè)函數(shù)取得保存后的所有數(shù)據(jù)，然后以表格的形式進(jìn)行顯示。在取得全部數(shù)據(jù)時(shí)，需要使用到locaIStorage的兩個(gè)比較重要的屬性。 loadStorage.length-所有保存在localStorage中的數(shù)據(jù)的條數(shù)。locaIStorage.key (index)-將想要得到數(shù)據(jù)的索

22、引號(hào)作為index參數(shù)傳入，可以得 到localStorage中與這個(gè)索引號(hào)對(duì)應(yīng)的數(shù)據(jù)。比如想得到第6條數(shù)據(jù)，傳入index為5 （index是從0開始計(jì)算的）。 先用loadStorage.length屬性獲取保存數(shù)據(jù)昀條數(shù)，然后做一個(gè)循環(huán)，在循環(huán)內(nèi)使用一個(gè)變量，該變量從0開始作為index參數(shù)傳人locaIStorage.key (index)屬性，每次循環(huán)時(shí)該變量加1-通過這種方法，取得保存在locaIStorage中的所有數(shù)據(jù)。 (3) clearStorage函數(shù) 將localStorage中保存的數(shù)據(jù)全部清除。在這個(gè)函數(shù)中只有一句語句“l(fā)ocalStorage.clear()”，在

23、調(diào)用localStorage的clear方法后所有保存在localStorage中的數(shù)據(jù)會(huì)被全部清除。script.js腳本中的全部代碼如代碼清單8-4所示。 代碼清單8-4 簡(jiǎn)單Web留言本的JavaScript腳本代碼function saveStorage(id) var data = document.getElementByld ( id) .value; var time = new Date().getTime(), localStorage . setltem ( time , data ) ; alert( "數(shù)據(jù)已保存o " ) ; loadStorag

24、e ( ' msg ' ) ,-. hnction loadStorage ( id) var result = '<table border= " I "> ' ; for(var i = 0;i < localStorage.length;i+) var key = localStorage.key(i); var value = localStorage.getltem(key); var date = new Date(); date.setTime (key) , var datestr = date.toGMTS

25、tring(); result += '<tr><td>' + value + '<td><td>' + datestr + '<td></tr>', result += ' </table> ' , var target = document.getElementByld ( id) ; target . innerHTML = result; function clearStorage ( ) localStorage . clear ( )

26、, alert ( "金部數(shù)據(jù)被清除 0" ) ; loadStorage ( ' msg ' ) , 該示例在瀏覽器中的運(yùn)行結(jié)果如圖8-2所示。圖8-2 瀏覽器中的簡(jiǎn)單Web留言本示例8.1.3 作為簡(jiǎn)易數(shù)據(jù)庫來利用接下來，讓我們來討論一個(gè)更復(fù)雜的問題，能不能將Web Storage作為簡(jiǎn)易數(shù)據(jù)庫來利用呢？ 如果想用Web Storagerage作為數(shù)據(jù)庫，有幾個(gè)問題必須要考慮。首先'在數(shù)據(jù)庫中，大多數(shù)表都分為幾列，怎樣對(duì)列來進(jìn)行管理呢？怎樣對(duì)數(shù)據(jù)進(jìn)行檢索呢？如果能夠解決這些問題，就可以將Web Storage作為數(shù)據(jù)庫來利用了。 這一次來看一個(gè)非

27、常簡(jiǎn)單的“客戶聯(lián)系信息管理網(wǎng)頁”示例?？蛻舻穆?lián)系信息分為姓名、Email、電話號(hào)碼、備注這幾列，它們保存在locaIStorage中。如果輸入客戶的姓名并且進(jìn)行檢索，那么可以獲取這個(gè)客戶的所有聯(lián)系信息。 首先，保存數(shù)據(jù)時(shí)將客戶的姓名作為鍵名進(jìn)行保存，這樣在獲取客戶其他信息時(shí)會(huì)比較方便。 那么，怎樣將客戶聯(lián)系信息分幾列來進(jìn)行保存呢？要做到這一點(diǎn)，需要使用JSON格式。將對(duì)象以JSON格式作為文本保存，獲取該對(duì)象時(shí)再通過JSON格式來進(jìn)行獲取，就可以在Web Storage中保存和讀取具有復(fù)雜結(jié)構(gòu)的數(shù)據(jù)了。 首先，我們?cè)诖a清單8-5中看一下這個(gè)示例的HTML頁面代碼。代碼清單8-5簡(jiǎn)易數(shù)據(jù)庫的H

28、TML頁面代碼<! DOCTYPE html><head><meta charset=“UTF-8”><title>簡(jiǎn)易數(shù)據(jù)庫示例</title><script type=“text/j avascript”src=”script. js”></script></head><body><hl>使用Web Storage來做簡(jiǎn)易數(shù)據(jù)庫示洌</hl><table> <tr><td>姓名：</td><td>&l

29、t;input type=”text”id=”name”><td><tr> <tr><td>EMAIL: </td><td><input type=”text”id=“email”><td><tr> <tr><td>電話號(hào)碼：</td><td><input type=”text”id=”tel”><td><tr> .<tr><td>備注：</td><td&g

30、t;<input type=”text”id=”memo”><td></tr> <tr> <td></td> <td><input type-”button" value=”保存”onclick=”saveStorage();”><td> </tr></table><hr><p>檢索：<input type=”text”id=”find”> <input type=”button”value=”檢索”onclic

31、k=”findStorage(msg);”></p><p id= "msg”><p></body>接下來，查看script.js腳本文件，這一次，在這個(gè)腳本文件中存放了兩個(gè)函數(shù)，分別是保存數(shù)據(jù)用的saveStorage函數(shù)與檢索數(shù)據(jù)用的findStorage函數(shù)。下面分別看一下這兩個(gè)函數(shù)。（1） saveStorage函數(shù)中的流程1) 各輸入文本框中獲取數(shù)據(jù)。2) 建對(duì)象，將獲取的數(shù)據(jù)作為對(duì)象的屬性進(jìn)行保存。3) 對(duì)象轉(zhuǎn)換成JSON格式的文本數(shù)據(jù)。4) 文本數(shù)據(jù)保存在locaIStorage中。 為了將數(shù)據(jù)保存在一個(gè)對(duì)象中，使用n

32、ew Object語句創(chuàng)建了一個(gè)對(duì)象，將各種數(shù)據(jù)保存在該對(duì)象的各個(gè)屬性中，然后，為了將對(duì)象轉(zhuǎn)換成JSON格式的文本數(shù)據(jù)，使用了JSON對(duì)象的stringify方法。stringify方法的使用方法如下： var str= JSON.stringify( data);該方法接受一個(gè)參數(shù)data，該參數(shù)表示要轉(zhuǎn)換成JSON格式文本數(shù)據(jù)的對(duì)象。這個(gè)方法的作用是將對(duì)象轉(zhuǎn)換成JSON格式的文本數(shù)據(jù)，該方法返回轉(zhuǎn)換完成后的文本數(shù)據(jù)。 （2） findStorage函數(shù)中的流程1) IocaIStorage中，將檢索用的姓名作為鍵值，獲取對(duì)應(yīng)的數(shù)據(jù)。2) 獲取的數(shù)據(jù)轉(zhuǎn)換成JSON對(duì)象。3) 得JSON對(duì)象的

33、各個(gè)屬性值，創(chuàng)建要輸出的內(nèi)容。4) 頁面上輸出內(nèi)容。 該函數(shù)的關(guān)鍵是使用JSON對(duì)象的parse方法，將從locaIStorage中獲取的數(shù)據(jù)轉(zhuǎn)換成JSON對(duì)象。parse方法的使用方法如下：var data= JSON.parse( str)；該方法接受一個(gè)參數(shù)str，該參數(shù)表示從locaIStorage中取得的數(shù)據(jù)，該窮法的作用是將傳入的數(shù)據(jù)轉(zhuǎn)換成JSON對(duì)象，并且將該對(duì)象返回。 script.js腳本文件中的代碼如代碼清單8-6所示。 代碼清單8-6簡(jiǎn)易數(shù)據(jù)庫的JavaScript腳本代碼function saveStorage ( ) var data = new Object; da

34、ta .name = document . getElementByld ( ' name ' ) . value , data . email = document . getElementByld ( ' email ' ) .value; data.tel = document . getElementByld ( ' tel ' ) .value, data.memo = document. cjetElementByld( ' memo ' ) .value, var str = JSON.stringify(data)

35、 , localStorage . setitem ( data. name , str) , alert ( "數(shù)據(jù)已保存. " ) ; function findStorage ( id) var find = document . getElementByld ( ' find ' ) .value; var str = locaIStorage . getltem ( find) ; var data = JSON.parse( str) ; var result = "姓名: i' + + '<b

36、r>', result += "EMAIL: " + data.email + ' <br> ' ,result += "電話號(hào)碼 : " + data.tel + '<br> ' ;result += "備注: " + data.memo + '<br> ' ;var target = document . getElementByld ( id) ;target . innerHTML = result;這段代碼在瀏覽器中的運(yùn)行結(jié)果如

37、圖8-3所示。圖8-3使用Web Storage來做簡(jiǎn)易數(shù)據(jù)庫的示例8.1.4 利用storage事件實(shí)時(shí)監(jiān)視Web Storage中的數(shù)據(jù)在HTML 5中，可以通過對(duì)window對(duì)象的storage事件進(jìn)行監(jiān)聽并指定其事件處理函數(shù)的方法來定義當(dāng)在其他頁面中修改sessionStorage或localStorage中的值時(shí)所要執(zhí)行的處理，代碼如下：window.addEVentListener(storage,function(event)當(dāng)sessionStorage或locaIStorage的值發(fā)生變動(dòng)時(shí)所要執(zhí)行的處理 ，false)；在事件處理函數(shù)中，觸發(fā)事件的事件對(duì)象（event參數(shù)值

38、）具有如下屬性。l event.key屬性：屬性值為在sessionStorage或locaIStorage中被修改的數(shù)據(jù)鍵值。l event.oldValue屬性：屬性值為在sessionStorage或locaIStorage中被修改前的值。l event.newValue屬性：屬性值為在sessionStorage或locaIStorage中被修改后的值。l event.url屬性：屬性值為修改sessionStorage或locaIStorage中值的頁面URL地址。l event.storageArea：屬性值為被變動(dòng)的sessionStorage封象或localStorage對(duì)象。

39、 接下來通過一個(gè)代碼示例來展示storage事件的使用方法，該示例有兩個(gè)示例頁面，其中一個(gè)示例頁面用于輸出localStorage中鍵值為“test”的數(shù)據(jù)的變動(dòng)情況，一旦該數(shù)據(jù)被修改立即在頁面上的output控件中輸出該數(shù)據(jù)被修改前的值、被修改后的值及修改該數(shù)據(jù)的頁面URL地址；使用另一個(gè)示例頁面來修改locaIStorage中鍵值為“test”的數(shù)據(jù)，頁面中顯示一個(gè)文本框控件與一個(gè)“設(shè)置”按鈕，用戶在文本框控件中輸入數(shù)據(jù)后單擊該按鈕，localStorage中鍵值為“test”的數(shù)據(jù)被修改為用戶在文本框控件中輸入的數(shù)據(jù)。第一個(gè)頁面的代碼如代碼清單87所示。代碼清單8-7利用storage事

40、件實(shí)時(shí)監(jiān)視Web Storage中的數(shù)據(jù) < ! DOCTYPE html> <html> <head> <title>利用 storage事件實(shí)時(shí)監(jiān)視Web Storage中的數(shù)據(jù) </title> <script> vindow. addEventListener ( ' storage ' , function ( event) if (event.key ="test " ) var output=document . getElementByld ( " output

41、 " ) ; output . innerHTML= "原有值 : " +event . oldValue, output . innerHTML+= " <br/>新值 : " +event . newValue; output . innerHTML+= " <br/>變動(dòng)頁面地址 : " + utf 8_decode ( unescape ( event . Url) ; console . log ( event . storageArea) , / /此行代碼只在Chrome瀏覽器中有效 c

42、onsole . log ( event. storageArea = localStorage) , /輸出 true , false) ; function utf 8_decode (utftext) var string = " " ; var i = O; var c = cl = c2 = O; while (i<utftext. length) c = utftext.charCodeAt (i) , if (c < 128) string += String. f romCharCode ( c ) ; i+, else if (c > 1

43、91) && (c < 224) c2 = utftext.charCodeAt (i+l) , string += String.fromCharCode(c & 31)( 6) I (c2 & 63); else c2 = utftext.charCodeAt ( i+l) , c3 = utftext .charCodeAt (i+2 ) , string += String.fromCharCode(c & 15)( 12) |(c2 & 63) 6) return string; </script></head&

44、gt;</body><output id="output"></div> </body></html>用于修改locaIStorage中數(shù)據(jù)的頁面中的代碼如代碼清單8-8所示。< ! DOCTYPE html><html><head><title>修 改Web Storage中的數(shù)據(jù)</title><script>function setLocalStorage ( ) localStorage .test=document . getElem

45、entByld ( " tex1 " ) .value ;</script></head><body>請(qǐng)輸入一些值 : <input type= " text " id= " tex1 " /><button onClick= " setLocalStorage() " >設(shè)置</button></body></html> 在瀏覽器中打開兩個(gè)窗口，在第一個(gè)窗口中打開用于輸出localStorage中數(shù)據(jù)變動(dòng)情況的頁面，在

46、第二個(gè)窗口中打開用于修改locaIStorage數(shù)據(jù)的頁面，在文本框控件中輸入數(shù)據(jù)后單擊“設(shè)置”按鈕，然后查看第一個(gè)窗口，瀏覽器中的顯示效果如圖8-4所示。圖8-4 監(jiān)視locaIStorage中數(shù)據(jù)的變動(dòng)情況8.2 本地?cái)?shù)據(jù)庫8.2.1 本地?cái)?shù)據(jù)庫的基本概念在HTML 5中，大大豐富了客戶端本地可以存儲(chǔ)的內(nèi)容，添加了很多功能將原本必須要保存在服務(wù)器上的數(shù)據(jù)轉(zhuǎn)為保存在客戶端本地，從而大大提高了Web應(yīng)用程序的性能，減輕了服務(wù)器端的負(fù)擔(dān)，使Web時(shí)代重顢回到了“客戶端為重、服務(wù)器端為輕”的時(shí)代。 在這其中，一項(xiàng)非常重要的功能就是對(duì)于數(shù)據(jù)庫的本地存儲(chǔ)功能。在HTML 4 中，數(shù)據(jù)庫只能放在服務(wù)器端

47、，只能通過服務(wù)器來訪問數(shù)據(jù)庫，但是在HTML 5中，可以像訪問本地文件那樣輕松地對(duì)內(nèi)置數(shù)據(jù)庫進(jìn)行直接訪問。在HTML5中內(nèi)置了兩種本地?cái)?shù)據(jù)庫，一種為本節(jié)介紹的被稱為“SQLLite”的，可以通過SQL語言來訪問的文件型SQL數(shù)據(jù)庫；另一種為下一節(jié)所介紹的被稱為“indexedDB”的NoSQL類型的數(shù)據(jù)庫。 到目前為止，Chrome 6以上版本、Opera 10以上版本、Safari 5版本的瀏覽器對(duì)SQLLite數(shù)據(jù)庫提供支持。接下來，我們介紹如何在JavaScript腳本代碼中使用SQLLite數(shù)據(jù)庫。總的說來，有兩個(gè)必要的步驟。 Ø 創(chuàng)建訪問數(shù)據(jù)庫的對(duì)象。Ø 使用事務(wù)

48、處理。首先，必須要使用openDatabase方法來創(chuàng)建一個(gè)訪問數(shù)據(jù)庫的對(duì)象。該方法的使用方法如下所示。Var db= openDatabase(mydb, 1.0, Test DB , 2*1024*1024); 該方法使用4個(gè)參數(shù)，第一個(gè)參數(shù)為數(shù)據(jù)庫名，第二個(gè)參數(shù)為版本號(hào)，第三個(gè)參數(shù)為數(shù)據(jù)庫的描述，第四個(gè)參數(shù)為數(shù)據(jù)庫的大小。該方法返回創(chuàng)建后的數(shù)據(jù)庫訪問對(duì)象，如果該數(shù)據(jù)庫不存在，則創(chuàng)建該數(shù)據(jù)庫。在實(shí)際訪問數(shù)據(jù)庫時(shí)，還需要調(diào)用transaction方法，用來執(zhí)行事務(wù)處理。使用事務(wù)處理，可以防止在對(duì)數(shù)據(jù)庫進(jìn)行訪問及執(zhí)行有關(guān)操作時(shí)受到外界的干擾。因?yàn)樵赪eb上，同時(shí)會(huì)有許多人都在對(duì)頁面進(jìn)行訪問。如

49、果在訪問數(shù)據(jù)庫的過程中，正在操作的數(shù)據(jù)被其他用戶修改掉，會(huì)引起很多意想不到的后果。因此，可以使用事務(wù)來達(dá)到在操作完成之前，阻止其他用戶訪問數(shù)據(jù)庫的目的。 transaction方法的使用方法如下所示：db.transaction( function ( tx) tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id unique, Log);transaction方法使用一個(gè)回調(diào)函數(shù)作為參數(shù)。在這個(gè)函數(shù)中，執(zhí)行訪問數(shù)據(jù)庫的語句。8.2 用executeSql來執(zhí)行查詢接下來，我們來看一下在transaction的回調(diào)函數(shù)內(nèi)，到底是怎樣訪問數(shù)據(jù)庫的。這

50、里，使用了作為參數(shù)傳遞給回調(diào)函數(shù)的transaction對(duì)象的executeSql方法。 executeSql方法的完整定義如下所示。transaction. executeSql( sqlquery,dataHandler, errorHandler); 該方法使用4個(gè)參數(shù)，第一個(gè)參數(shù)為需要執(zhí)行的SQL語句。第二個(gè)參數(shù)為SQL語句中所有使用到的參數(shù)的數(shù)組。在executeSql方法中，將SQL語句中所要使用到的參數(shù)先用“？”代替，然后依次將這些參數(shù)組成數(shù)組放在第二個(gè)參數(shù)中，如下所示。transaction. executeSql(”UPDATE people set age=? where

51、name=?,”,age. Name);第三個(gè)參數(shù)為成功執(zhí)行SQL語句時(shí)調(diào)用的回調(diào)函數(shù)。該回調(diào)函數(shù)的傳遞方法如下所示：function dataHandler( transaction, results)執(zhí)行SQL語句成功時(shí)的處理；該回調(diào)函數(shù)使用兩個(gè)參數(shù)，第一個(gè)參數(shù)為transaction對(duì)象，第二個(gè)參數(shù)為拭行查詢操作時(shí)返回的查詢到的結(jié)果數(shù)據(jù)集對(duì)象。第四個(gè)參數(shù)為執(zhí)行SQL語句出錯(cuò)時(shí)調(diào)用的回調(diào)函數(shù)。該回調(diào)函數(shù)的傳遞方法如下所示：function errorHandler( transaction，errmsg)ll執(zhí)行SQL語句出錯(cuò)時(shí)的處理；該回調(diào)函數(shù)使用兩個(gè)參數(shù)，第一個(gè)參數(shù)為transacti

52、on對(duì)象，第二個(gè)參數(shù)為執(zhí)行發(fā)生錯(cuò)誤時(shí)的錯(cuò)誤信息文字。 那么，我們來看一下，當(dāng)執(zhí)行查詢操作時(shí)，如何從查詢到的結(jié)果數(shù)據(jù)集中，依次把數(shù)據(jù)取出到頁面上來，最簡(jiǎn)單的方法是使用for循環(huán)語句。結(jié)果數(shù)據(jù)集對(duì)象有一個(gè)rows屬性，其中保存了查詢到的每條記錄，記錄的條數(shù)可以用rows.length來獲取。可以用for循，用rowsindex或rows.ltem (indexl)的形式來依次取出每條數(shù)據(jù)。在JavaScript腳本中，一般采用rowsindex的形式。另外，在Chrome 5瀏覽器中，不支持rows.ltem (index1)的形式。8.2.3 使用數(shù)據(jù)庫實(shí)現(xiàn)Web留言本接下來，仍然用Web留言本

53、作為示例，來看一下具體應(yīng)該怎樣對(duì)數(shù)據(jù)庫進(jìn)行一些簡(jiǎn)單的操作。雖然在8.1節(jié)中，我們已經(jīng)介紹過了使用Web Storage可以實(shí)現(xiàn)Web留言本的功能，但是在這里，我們來看一下怎樣利用數(shù)據(jù)庫來實(shí)現(xiàn)同樣的功能。 首先，看一下這個(gè)示例的界面。界面中，存在一個(gè)輸入姓名用的文本框，一個(gè)輸入留言用的文本框，以及一個(gè)保存數(shù)據(jù)時(shí)用的按鈕。在按鈕下面放置了一個(gè)表格，保存數(shù)據(jù)后從數(shù)據(jù)庫中重新取得所有數(shù)據(jù)，然后把數(shù)據(jù)顯示在這個(gè)表格中。 在單擊按鈕時(shí)，調(diào)用saveData函數(shù)(onclick=“saveData();”)，保存數(shù)據(jù)時(shí)的處理都被寫在了這個(gè)函數(shù)里。 另外，打開頁面時(shí)將調(diào)用init函數(shù)(<body onl

54、oad=“init()”>)，將數(shù)據(jù)庫中全部已保存的留言信息顯示在表格中。 界面代碼顯示如代碼清單8-9所示。 代碼清單8-9 Web留言本界面代碼<!DOCTYPE html><head><meta charset= "UTF-8”><title>使用數(shù)據(jù)庫實(shí)現(xiàn)We:o留言本</title><script type=”text/j avascript”src=" script. js“></script></head><body onload=”init();”&g

55、t;<hl>使用數(shù)據(jù)庫實(shí)現(xiàn)Web留言本</hl><table><tr><td>姓名：</td><td><input type=”text”id=”name><td><tr><tr><td>留言：</td><td><input type=”text”id=“memo“><td><tr><tr><td></td><td><input type=

56、”button" value=”保存”onclick=”saveData();”><td></tr></table><hr><table id=”datatable”border=”1”></table><p id= "msg“><p></body></html>接下來，讓我們打開script.js腳本文件來看一下。（1）打開數(shù)據(jù)庫 打開數(shù)據(jù)庫的代碼如下所示。Var datatable=null;Var db= openDatabase(MyData

57、, , My Database, 102400);在這個(gè)腳本文件的開始處，使用了一個(gè)變量datatable。用這個(gè)變量來代表頁面中的表格（table元素），之后會(huì)使用到這個(gè)變量。db變量代表使用openDatabase方法創(chuàng)建的數(shù)據(jù)庫訪問對(duì)象。在示例中，創(chuàng)建了MyData這個(gè)數(shù)據(jù)庫并對(duì)其進(jìn)行訪問。 （2）初始化接下來，編寫了一個(gè)1nit函數(shù)。這個(gè)函數(shù)在頁面打開時(shí)調(diào)用。為了在打開頁面時(shí)就往頁面表格中裝入數(shù)據(jù)，所以在該函數(shù)中首先設(shè)定變量datatable為頁面中的表格，然后調(diào)用腳本中的另一個(gè)函數(shù)showAIIData來顯示數(shù)據(jù)。（3）擦除表格中當(dāng)前顯示的數(shù)據(jù)腳本文件中的init函數(shù)之后是remov

58、eAlIData函數(shù)，這個(gè)函數(shù)是在showAIIData函數(shù)中被調(diào)用的一個(gè)必不可少的函數(shù)，它的作用是將頁面中table元素下的子元素全部清除，只留下一個(gè)空表格框架，然后填入表頭。這樣在頁面表格中當(dāng)前顯示的數(shù)據(jù)就全部被清除了，以便重新讀取數(shù)據(jù)裝入表格。 （4）顯示數(shù)據(jù)接下來是showData函數(shù)，該函數(shù)使用一個(gè)row參數(shù)。該參數(shù)表示從數(shù)據(jù)庫申讀取到的一行數(shù)據(jù)。該函數(shù)在頁面表格中使用tr元素添加一行，并使用td元素添加各列，然后將傳入的這行數(shù)據(jù)分別填入在表格中添加的這一行對(duì)應(yīng)的各列中。 （5）顯示全部數(shù)據(jù)接下來是showAllData函數(shù)，在該函數(shù)中使用transaction方法，在該方法的回調(diào)函數(shù)中執(zhí)行execute Sql方法獲取全部數(shù)據(jù)。獲取到

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論