html 5與css 3網(wǎng)頁(yè)設(shè)計(jì)入門提高第9章5其他新特性

第9章HTML5的其他新特性內(nèi)容簡(jiǎn)介

本章將從7個(gè)方面介紹HTML5的這些新增特性。通過(guò)本章的學(xué)習(xí)，讀者可以了解HTML5中提供的高級(jí)技術(shù)，也可以熟練使用這些技術(shù)實(shí)現(xiàn)某些常用的功能。本章重點(diǎn)：掌握FileList對(duì)象獲取多個(gè)文件信息的方法了解如何限制文件的類型掌握FileReader接口的方法和事件了解FileError接口的錯(cuò)誤編碼熟悉DataTransfer對(duì)象的常用方法和屬性了解localStorage對(duì)象和sessionStorage對(duì)象的區(qū)別掌握客戶端存儲(chǔ)數(shù)據(jù)的常用方法掌握J(rèn)SON的parse()方法和stringify()方法掌握HTML5本地?cái)?shù)據(jù)庫(kù)的使用掌握多文檔傳遞數(shù)據(jù)的實(shí)現(xiàn)方法熟悉HTML5中多線程的實(shí)現(xiàn)過(guò)程了解HTML5的地圖API了解HTML5的離線緩存9.1文件新增特性

文件在HTML5中占有非常重要的作用。HTML5為文件操作提供了一個(gè)全新的文件API，通過(guò)這個(gè)API使得訪問(wèn)本地文件和處理文件信息變得十分簡(jiǎn)單。例如，可以同時(shí)選擇多個(gè)文件，對(duì)文件擴(kuò)展名進(jìn)行過(guò)濾以及查看文件內(nèi)容等等。下面詳細(xì)介紹HTML5中文件API的具體操作。9.1.1獲取多個(gè)文件的信息HTML5同樣可以使用file類型來(lái)創(chuàng)建一個(gè)文件域。具體方法是在form內(nèi)創(chuàng)建一個(gè)input類型為file的元素，然后運(yùn)行即可。瀏覽器會(huì)自動(dòng)識(shí)別并創(chuàng)建相應(yīng)的瀏覽按鈕和選擇文件對(duì)話框。

在file類型中選擇的文件其實(shí)是一個(gè)file對(duì)象。file對(duì)象有4個(gè)屬性，如下所示：name屬性

表示選中文件不帶路徑的名稱。size屬性

使用字節(jié)表示的文件大小。type屬性

使用MIME類型表示的文件類型。lastModifiedDate屬性

表示文件的最后修改日期。multiple屬性

表示是否允許同時(shí)選擇多個(gè)文件，默認(rèn)值為false。9.1.2新增FileReader接口簡(jiǎn)介HTML5的file對(duì)象主要用于獲取文件屬性信息，如果要讀取文件的內(nèi)容則需要調(diào)用HTML5中新增的FileReader接口。FileReader接口提供了一組異步API，通過(guò)這些API可以從瀏覽器的主線程中異步訪問(wèn)文件系統(tǒng)。如表9-1中列出了FileReader接口中用于讀取文件的方法及其說(shuō)明。需要注意，無(wú)論讀取成功或者失敗，讀取方法都不會(huì)返回讀取結(jié)果，而是將結(jié)果保存在result屬性中。

表9-1FileReader接口方法9.1.2新增FileReader接口簡(jiǎn)介

除了上述的方法之外，F(xiàn)ileReader接口還包含了一套完整的事件模型來(lái)監(jiān)視讀取文件時(shí)的各個(gè)狀態(tài)。這些事件主要如表9-2所示。表9-2FileReader接口事件事件名稱說(shuō)明onabort當(dāng)讀取數(shù)據(jù)中斷時(shí)觸發(fā)onerror當(dāng)讀取數(shù)據(jù)出錯(cuò)時(shí)觸發(fā)onloadstart當(dāng)讀取數(shù)據(jù)開始時(shí)觸發(fā)onprogress當(dāng)正在讀取數(shù)據(jù)時(shí)觸發(fā)onload當(dāng)讀取數(shù)據(jù)成功時(shí)觸發(fā)onloadend當(dāng)讀取操作完成時(shí)觸發(fā)，無(wú)論成功或者失敗都觸發(fā)9.1.3使用FileReader接口讀取文件FileReader接口是W3C為讀取文件內(nèi)容在HTML5中新增的，上節(jié)介紹了該接口的方法，下面詳細(xì)介紹這些方法的具體應(yīng)用。1．使用readAsText()方法readAsText()方法可以以文本格式讀取文件的內(nèi)容。語(yǔ)法格式如下：varresult=FileReader.readAsText(blob,encoding);

第一個(gè)參數(shù)是file類型表示要讀取的文件，第二個(gè)參數(shù)字符串類型用于指定讀取時(shí)使用的編碼，默認(rèn)值為UTF-8。返回值為字符串形式的文件內(nèi)容。2．使用readAsDataURL()方法readAsDataURL()方法可以將文件讀取為一串URL字符串。該字符串通常會(huì)使用特殊格式的URL形式直接讀入頁(yè)面，像圖像格式等。該方法的語(yǔ)法格式如下：varresult=FileReader.readAsDataURL(blob);9.1.3使用FileReader接口讀取文件blob參數(shù)表示文件的只讀原始數(shù)據(jù)對(duì)象。readAsDataURL()方法返回值是一個(gè)表示數(shù)據(jù)的本地對(duì)象。3．使用readAsArrayBuffer()方法readAsArrayBuffer()方法可以將文件讀取為字節(jié)數(shù)組，通常是將它傳送到后端，后端可以通過(guò)這段字符串存儲(chǔ)文件。語(yǔ)法格式如下：varresult=FileReader.readAsArrayBuffer(blob);blob參數(shù)表示文件的只讀原始數(shù)據(jù)對(duì)象。readAsArrayBuffer()方法返回值是一個(gè)表示數(shù)據(jù)的ArrayBUffer對(duì)象。readerAsBinaryString()方法的使用很簡(jiǎn)單，只要將一個(gè)要讀取的文件file作為參數(shù)傳入即可，這樣讀取的結(jié)果保存到result屬性中。具體使用與readAsDataURL()方法相同這里就不再介紹。9.1.4使用FileReader接口監(jiān)聽事件

在前面介紹FileReader接口中讀取方法的使用時(shí)僅對(duì)onload事件進(jìn)行了處理。在讀取正常的情況下，F(xiàn)ileReader接口中事件的觸發(fā)順序如下：onloadstart->onprogress->onload->onloadend

除了執(zhí)行順序外，在實(shí)際使用時(shí)還應(yīng)該注意如下區(qū)別。（1）大部分的文件讀取過(guò)程都集中在onprogress事件，該事件耗時(shí)最長(zhǎng)。（2）如果文件在讀取過(guò)程中出現(xiàn)異?；蛘咧兄?，那么onprogress事件將結(jié)束，并直接觸發(fā)onerror或者onabort事件，而不觸發(fā)onload事件。（3）onload事件是文件讀取成功時(shí)觸發(fā)，而onloaded事件雖然也是文件操作成功時(shí)觸發(fā)。但是onloaded事件無(wú)論讀取成功或者失敗都會(huì)觸發(fā)，這一點(diǎn)需要注意。因此，如果要正確獲取文件數(shù)據(jù)，必須在onload事件中編寫代碼，而不是onloaded事件。9.1.5文件讀取時(shí)的異常處理

雖然使用FileReader接口中的方法可以快速實(shí)現(xiàn)對(duì)文件的讀取。但是，在文件讀取的過(guò)程中，不可避免地會(huì)出現(xiàn)各種類型的錯(cuò)誤和異常。這時(shí)便可以通過(guò)FileError接口獲取錯(cuò)誤與異常所產(chǎn)生的錯(cuò)誤代碼，再根據(jù)返回的錯(cuò)誤代碼分析具體發(fā)生錯(cuò)誤與異常的原因。

在出現(xiàn)下列情況時(shí)，可能會(huì)導(dǎo)致FileReader接口出現(xiàn)潛在的錯(cuò)誤與異常。訪問(wèn)某個(gè)文件的過(guò)程中，該文件被移動(dòng)或者刪除及被其他應(yīng)用程序修改。由于權(quán)限原因，無(wú)法讀取文件的數(shù)據(jù)信息。文件出于案例因素的考慮，在讀取文件時(shí)返回一個(gè)無(wú)效的數(shù)據(jù)信息。讀取文件太大，超出URL網(wǎng)址的限制，將無(wú)法返回一個(gè)有效的數(shù)據(jù)信息。在讀取文件的過(guò)程中，應(yīng)用程序本身觸發(fā)了中止讀取的事件。9.1.5文件讀取時(shí)的異常處理

在異步讀取文件的過(guò)程中，出現(xiàn)錯(cuò)誤與異常都可以使用FileError接口。該接口主要用于異步提示錯(cuò)誤，當(dāng)FileReader對(duì)象無(wú)法返回?cái)?shù)據(jù)時(shí)，將形成一個(gè)錯(cuò)誤屬性，而該屬性則是一個(gè)FileError接口，通過(guò)該接口列出錯(cuò)誤與異常的錯(cuò)誤代碼信息。如表9-3列出了FileError接口中提供的錯(cuò)誤代碼以及對(duì)應(yīng)的說(shuō)明。

表9-3FileError接口錯(cuò)誤代碼錯(cuò)誤代碼錯(cuò)誤常量說(shuō)明1NOT_FOUND_ERR無(wú)法找到文件或者原文件已經(jīng)被修改2SECURITY_ERR由于安全考慮，無(wú)法讀取文件數(shù)據(jù)3ABORT_ERR由abort事件觸發(fā)的中止讀取過(guò)程4NOT_READABLE_ERR由于權(quán)限原因，不能讀取文件數(shù)據(jù)5ENCODING_ERR讀取的文件太大，超出讀取時(shí)地址的限制9.1.6實(shí)戰(zhàn)——實(shí)現(xiàn)文件上傳通過(guò)前面的練習(xí)我們已經(jīng)掌握了如何獲取到選擇文件的基本信息，也能夠限制文件的類型和讀取文件的內(nèi)容。但是這些文件只是保存在本地，并沒有實(shí)現(xiàn)上傳功能。本次實(shí)戰(zhàn)將使用HTML5結(jié)合JSP實(shí)現(xiàn)將用戶選擇的多個(gè)文件批量上傳到服務(wù)器。具體步驟如下：（1）使用MyEclipse工具創(chuàng)建一個(gè)名為fileupload的Web項(xiàng)目。（2）新建一個(gè)名為index.jsp的文件作為選擇文件的頁(yè)面。（3）在頁(yè)面中創(chuàng)建一個(gè)表單，允許用戶選擇多個(gè)文件，并且可以查看要上傳的圖片文件。（4）編寫單擊“預(yù)覽”按鈕時(shí)執(zhí)行的JavaScript函數(shù)GetPicFile()，具體代碼可參考9.1.3節(jié)，這里不再重復(fù)。（5）在fileupload項(xiàng)目中新建一個(gè)名為upload的Servlet。在doPost()方法編寫代碼獲取在客戶端選擇的多個(gè)文件，然后以流的形式寫到項(xiàng)目下的upload目錄中。（6）將fileupload項(xiàng)目部署到服務(wù)器。在瀏覽器中輸入進(jìn)入選擇文件界面。9.1.6實(shí)戰(zhàn)——實(shí)現(xiàn)文件上傳

（7）單擊“上傳”按鈕將把文件上傳到upload目錄，并可以繼續(xù)上傳，如圖9-9所示。

圖9-9上傳結(jié)果9.2拖放功能

在HTML4之前果要實(shí)現(xiàn)文件（例如文本文件、圖像文件）的拖放功能，需要借助mousedown、mousemove和mouseup事件實(shí)現(xiàn)在瀏覽器內(nèi)部的拖放操作。而在HTML5中提供了對(duì)文件拖放的支持，下面詳細(xì)介紹HTML5的拖放API，以及拖放對(duì)象的使用。9.2.1拖放API簡(jiǎn)介HTML5提供了文件拖放操作的API，使用這些API不僅能夠?qū)崿F(xiàn)瀏覽器內(nèi)部的拖放操作，還可以在瀏覽器與其他應(yīng)用程序之間實(shí)現(xiàn)數(shù)據(jù)傳輸，同時(shí)大大簡(jiǎn)化了拖放的實(shí)現(xiàn)代碼。在實(shí)現(xiàn)拖放時(shí)需要涉及到很多事件，這些事件的說(shuō)明如表9-4所示。

表9-4拖放事件及說(shuō)明事件名稱說(shuō)明dragstart開始執(zhí)行拖放操作，應(yīng)用于被拖放元素drag拖放過(guò)程中，應(yīng)用于被拖放元素dragenter被拖放的元素開始進(jìn)入本元素的范圍內(nèi)，應(yīng)用于拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素dragover被拖放的元素正在本元素范圍內(nèi)移動(dòng)，應(yīng)用于拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素dragleave被拖放的元素離開本元素的范圍，應(yīng)用于拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素drop有其他元素被拖放到了本元素中，應(yīng)用于拖放的目標(biāo)元素dragend拖放操作結(jié)束，應(yīng)用于拖放的對(duì)象元素9.2.2拖放對(duì)象的方法和屬性

一般情況下拖動(dòng)某個(gè)元素，然后把它拖放到另外某個(gè)元素上也需要在源元素與目標(biāo)元素之間傳送一些數(shù)據(jù)。為了完成這項(xiàng)數(shù)據(jù)傳送任務(wù)，HTML5提供了拖放對(duì)象——DataTransfer。DataTransfer對(duì)象提供了對(duì)剪貼板的訪問(wèn)以便在拖放操作中使用。由于DataTransfer是事件對(duì)象的屬性，所以只能在拖放事件的事件處理程序中訪問(wèn)DataTransfer對(duì)象。DataTransfer對(duì)象既可以在源對(duì)象中使用，也可以在目標(biāo)對(duì)象中使用。DataTransfer對(duì)象有多個(gè)方法，常用方法及說(shuō)明如表9-5所示。

表9-5DataTransfer對(duì)象的方法說(shuō)明方法名稱說(shuō)明getData()獲取由setData()中保存的數(shù)據(jù)并且進(jìn)行返回。如果返回的數(shù)據(jù)不存在，則返回空字符串setData()為元素添加指定的數(shù)據(jù)。有兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)字符串，表示保存的數(shù)據(jù)類型，也是getData()方法惟一的一個(gè)參數(shù)；第二個(gè)參數(shù)表示數(shù)據(jù)clearData()清除以特定格式保存的數(shù)據(jù)。如果未指定格式，則刪除當(dāng)前元素的所有攜帶數(shù)據(jù)addElement()為拖動(dòng)操作添加一個(gè)元素。添加這個(gè)元素只影響數(shù)據(jù)（即增加作為拖動(dòng)源而影響回調(diào)的對(duì)象），不會(huì)影響拖動(dòng)操作時(shí)頁(yè)面元素的外觀setDragImage()指定一副圖像，當(dāng)拖動(dòng)發(fā)生時(shí)，顯示在光標(biāo)下方。該方法有3個(gè)參數(shù)，它們分別是要顯示的HTML元素和光標(biāo)在圖像中的x、y坐標(biāo)。其中，HTML元素可以是一張圖像，也可以是其他元素9.2.2拖放對(duì)象的方法和屬性要注意dropEffect屬性只有與effectAllowed屬性搭配才有用，如果它所設(shè)置的效果與effectAllowed屬性設(shè)置的效果不符，則拖放操作失敗。dropEffect屬性可有如下取值。none不能把拖動(dòng)的元素放在這里。這是除文本框之外所有元素的默認(rèn)值。move應(yīng)該把拖動(dòng)的元素移動(dòng)到放置目標(biāo)。copy應(yīng)該把拖動(dòng)的元素復(fù)制到放置目標(biāo)。link表示放置目標(biāo)會(huì)打開拖動(dòng)的元素（但拖動(dòng)的元素必須是一個(gè)鏈接，存在URL）。與dropEffect屬性相比，effectAllowed屬性的取值較多，具體說(shuō)明如下所示。none被拖動(dòng)的元素不能有任何行為。move只允許值為movedropEffect。copy只允許值為copy的dropEffect。link只允許值為link的dropEffect。linkMove允許值為link和move的dropEffect。copyMove允許值為copy和link的dropEffect。copyLink允許值為copy和link的dropEffect。uninitialized沒有該被拖動(dòng)元素放置行為。all允許任意dropEffect。9.2.3實(shí)戰(zhàn)——模擬圖片刪除本節(jié)項(xiàng)目案例通過(guò)拖放API將相冊(cè)中的某張圖片以拖動(dòng)的方式放入回收站，從而實(shí)現(xiàn)相冊(cè)管理功能。其具體步驟如下：（1）添加新的HTML頁(yè)面，在頁(yè)面的合適位置添加3個(gè)div元素，它們分別表示圖片列表、顯示刪除圖片的效果以及顯示回收站。然后向第一個(gè)div元素中添加ul和li元素，它們實(shí)現(xiàn)顯示多張圖片的效果。（2）頁(yè)面加載調(diào)用自定義的init()函數(shù)，（3）Drop()函數(shù)中通過(guò)removeChild()方法移除相冊(cè)中指定的圖片形成刪除的效果，同時(shí)通過(guò)全局變量intDeleNum累計(jì)刪除圖片的數(shù)量，并將該總數(shù)量的值顯示到頁(yè)面中。（4）通過(guò)document對(duì)象添加頁(yè)面的dragover事件和drop事件，它們都調(diào)用e.preventDefault()方法取消頁(yè)面的默認(rèn)值。（5）為頁(yè)面中的元素添加樣式效果，（6）運(yùn)行本案例的代碼進(jìn)行測(cè)試，拖動(dòng)刪除圖片時(shí)的效果。9.3新增客戶端數(shù)據(jù)存儲(chǔ)特性

隨著Web應(yīng)用的發(fā)展，應(yīng)用開發(fā)者越來(lái)越關(guān)注的一個(gè)問(wèn)題是：如何更好地在客戶端存儲(chǔ)數(shù)據(jù)。在HTML4中通常使用Cookie存儲(chǔ)機(jī)制，但是由于cookies有限制保存數(shù)據(jù)空間大小、數(shù)據(jù)保密性差、代碼操作復(fù)雜等缺點(diǎn)已經(jīng)完全無(wú)法滿足如今開發(fā)者的需求。HTML5規(guī)范定義了一種在客戶端存儲(chǔ)數(shù)據(jù)的更好的方式（即Web存儲(chǔ)），本節(jié)將介紹這種方式。

它包含兩種不同的存儲(chǔ)對(duì)象類型：sessionStorage和localStorage。這一節(jié)我們就主要來(lái)介紹sessionStorage對(duì)象和localStorage對(duì)象。9.3.1客戶端存儲(chǔ)對(duì)象簡(jiǎn)介HTML5的客戶端存儲(chǔ)是在Cookie基礎(chǔ)上發(fā)展起來(lái)的，與Cookie相比具有如下優(yōu)勢(shì)：存儲(chǔ)空間更大

默認(rèn)情況下可以存儲(chǔ)5MB大小的數(shù)據(jù)，雖然不同瀏覽器支持的數(shù)據(jù)大小會(huì)有所不同，但是都要比Cookie大得多。存儲(chǔ)內(nèi)容不會(huì)發(fā)送到服務(wù)器Cookie的內(nèi)容會(huì)隨著請(qǐng)求一起發(fā)送到服務(wù)器，這對(duì)于本地存儲(chǔ)的數(shù)據(jù)是一種帶寬浪費(fèi)。而客戶端存儲(chǔ)中的數(shù)據(jù)僅僅是保存在本地，不會(huì)與服務(wù)器發(fā)生任何交互。更多豐富易用的接口

客戶端存儲(chǔ)提供了一套更為豐富的接口，使得數(shù)據(jù)操作更為簡(jiǎn)便。HTML5的客戶端存儲(chǔ)機(jī)制主要有兩大對(duì)象組成，分別是localStorage和sessionStorage。其中；sessionStorage用于存儲(chǔ)與用戶會(huì)話有關(guān)的數(shù)據(jù)，作用周期與會(huì)話相同；而localStorage用于持久化的存儲(chǔ)數(shù)據(jù)，除非手動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)永遠(yuǎn)不會(huì)過(guò)期。9.3.1客戶端存儲(chǔ)對(duì)象簡(jiǎn)介1．sessionStorage對(duì)象sessionStorage對(duì)象所存儲(chǔ)的數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)，并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此，sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。sessionStorage對(duì)象最常用的方法如下所示。setItem(key,value)參數(shù)key表示被保存內(nèi)容的鍵，參數(shù)value表示被保存內(nèi)容的值。getItem(key)獲取指定key本地存儲(chǔ)的值，如果不存在，則返回一個(gè)null值。removeItem(key)刪除指定key本地存儲(chǔ)的值。clear()清除localStorage對(duì)象中所有的數(shù)據(jù)。key()獲取指定下標(biāo)的鍵名稱（如同Array）2．localStorage對(duì)象

使用sessionStorage對(duì)象保存的用戶會(huì)話數(shù)據(jù)在關(guān)閉瀏覽器之后會(huì)丟失。因此，如果需要在客戶端保存永久數(shù)據(jù)，則應(yīng)該使用localStorage對(duì)象。localStorage對(duì)象可以將數(shù)據(jù)長(zhǎng)期保存在客戶端，直至手動(dòng)清除為止。localStorage對(duì)象同sessionStorage對(duì)象一樣，最常用的方法有setItem()、getItem()、removeItem()、clear()和key()，在這里就不再詳細(xì)介紹這些方法。9.3.2操作本地?cái)?shù)據(jù)

由于localStorage對(duì)象和sessionStorage對(duì)象的方法是一樣的，本節(jié)以localStorage對(duì)象為例講解如何寫入數(shù)據(jù)、讀取數(shù)據(jù)以及清空數(shù)據(jù)。1．判斷瀏覽器是否支持

使用localStorage對(duì)象之前需要判斷瀏覽器是否支持該對(duì)象，如果不支持，它可能會(huì)為空。判斷代碼如下：.functiongetLocalStorage(){ try{ if(!!window.localStorage) //如果瀏覽器支持，則返回該對(duì)象

returnwindow.localStorage; }catch(e){ returnundefined;2．保存數(shù)據(jù)

要向客戶端中保存一個(gè)數(shù)據(jù)需要調(diào)用setItem()方法，其調(diào)用格式如下所示：.localStorage.setItem(key,value)9.3.2操作本地?cái)?shù)據(jù)

其中，參數(shù)key表示數(shù)據(jù)的鍵名，參數(shù)value表示要的數(shù)據(jù)。一旦鍵名設(shè)置成功，則不允許修改，也不能重復(fù)；如果鍵名重復(fù)的鍵名，那么將用新的鍵值取代原有的鍵值。3．讀取數(shù)據(jù)

如果要讀取被保存的數(shù)據(jù)可以調(diào)用localStorage對(duì)象中g(shù)etItem()方法，其調(diào)用格式如下：localStorage.getItem(key);

其中，參數(shù)key表示數(shù)據(jù)保存時(shí)的鍵名，該方法將返回一個(gè)指定鍵名對(duì)應(yīng)的鍵值；如果不存在，則返回一個(gè)null值。4．清空數(shù)據(jù)

調(diào)用localStorage對(duì)象中的removeItem()方法可以刪除某個(gè)鍵名對(duì)應(yīng)的數(shù)據(jù)。但是，有時(shí)保存數(shù)據(jù)很多，如果使用removeItem()方法逐條刪除比較麻煩。此時(shí)，可以調(diào)用localStorage對(duì)象中的另一個(gè)方法clear()，該方法的功能是清空全部localStorage對(duì)象保存的數(shù)據(jù)，其調(diào)用格式如下所示：localStorage.clear();9.3.2操作本地?cái)?shù)據(jù)5．遍歷數(shù)據(jù)

使用遍歷可以查看localStorage對(duì)象中保存的全部數(shù)據(jù)信息。在遍歷過(guò)程中需要借助localStorage對(duì)象的length屬性和key屬性，屬性說(shuō)明如下。length屬性

表示localStorage對(duì)象中保存數(shù)據(jù)的總量。key屬性

表示保存數(shù)據(jù)時(shí)的鍵名。該屬性常與索引（index）配合使用，表示第幾條鍵名對(duì)應(yīng)的數(shù)據(jù)記錄。其中，索引號(hào)以0值開始，例如第2條鍵名對(duì)應(yīng)的數(shù)據(jù)index值應(yīng)該為1。9.3.3實(shí)戰(zhàn)——JSON方式存取數(shù)據(jù)

無(wú)論localStorage對(duì)象還是sessionStorage對(duì)象都是通過(guò)鍵值對(duì)來(lái)存儲(chǔ)數(shù)據(jù)的。因此他們實(shí)現(xiàn)的只是支持字符串到字符串的映射，如果要存儲(chǔ)需要很多的鍵值內(nèi)容，它們的問(wèn)題就出現(xiàn)了：處理相對(duì)復(fù)雜，擴(kuò)展性差，數(shù)據(jù)結(jié)構(gòu)不合理等。

為了解決這一問(wèn)題，HTML5中還可以通過(guò)使用JSON對(duì)象轉(zhuǎn)換數(shù)據(jù)，實(shí)現(xiàn)存儲(chǔ)更多數(shù)據(jù)的功能。JSON對(duì)象的常用方法如下：JSON.parse(data)

參數(shù)data表示localStorage對(duì)象獲取的數(shù)據(jù)，調(diào)用該方法返回一個(gè)裝載data數(shù)據(jù)的JSON對(duì)象。JSON.stringify(obj)

參數(shù)obj表示一個(gè)任意的實(shí)體對(duì)象，調(diào)用該方法返回一個(gè)由實(shí)體對(duì)象轉(zhuǎn)成JSON格式的文本數(shù)據(jù)集。（1）創(chuàng)建一個(gè)HTML頁(yè)面。編寫用于輸入網(wǎng)站收藏夾信息的布局代碼，并且可以根據(jù)網(wǎng)站名稱進(jìn)行搜索，以及顯示搜索結(jié)果的表格。（2）在頁(yè)面中可以輸入網(wǎng)站編號(hào)、名稱、地址和備注，單擊“保存”按鈕之后將以JSON形式保存到客戶端。（3）當(dāng)保存了多個(gè)JSON對(duì)象數(shù)據(jù)之后，可以通過(guò)網(wǎng)站名稱作為關(guān)鍵字查找詳細(xì)信息。（4）在瀏覽器中運(yùn)行頁(yè)面，向客戶端保存一些網(wǎng)站信息。9.4新增本地?cái)?shù)據(jù)庫(kù)特性localStorage對(duì)象和sessionStorage對(duì)象雖然提供了比Cookie更好、更快和容量更大的存儲(chǔ)數(shù)據(jù)。但是，如果數(shù)據(jù)之間的關(guān)系比較復(fù)雜，并且存儲(chǔ)的數(shù)據(jù)容量比較大，這些空間往往不能夠滿足用戶的需要。這時(shí)可以使用HTML5的另一個(gè)新特性——本地?cái)?shù)據(jù)庫(kù)。

所謂本地?cái)?shù)據(jù)庫(kù)就是HTML5內(nèi)置了SQLite數(shù)據(jù)庫(kù)的功能，能在客戶端實(shí)現(xiàn)關(guān)系數(shù)據(jù)庫(kù)的功能，下面詳細(xì)介紹他的應(yīng)用。9.4.1HTML5本地?cái)?shù)據(jù)庫(kù)簡(jiǎn)介

在HTML4以及之前的版本中，數(shù)據(jù)庫(kù)只能存放在服務(wù)器端，通過(guò)動(dòng)態(tài)語(yǔ)言來(lái)訪問(wèn)數(shù)據(jù)庫(kù)。但是在HTML5中，可以像本地文件那樣輕松地對(duì)內(nèi)置數(shù)據(jù)庫(kù)進(jìn)行直接訪問(wèn)。HTML5本地?cái)?shù)據(jù)庫(kù)全稱是WebSQLDataBase，它提供了關(guān)系數(shù)據(jù)庫(kù)的基本功能，可以存儲(chǔ)頁(yè)面中交互的、復(fù)雜的數(shù)據(jù)。它既可以保存數(shù)據(jù)，也能緩存從服務(wù)器獲取的數(shù)據(jù)。HTML5本地?cái)?shù)據(jù)庫(kù)通過(guò)事務(wù)驅(qū)動(dòng)，實(shí)現(xiàn)對(duì)數(shù)據(jù)的管理。因此，它可以支持多瀏覽器的并發(fā)操作，而不發(fā)生存儲(chǔ)時(shí)的沖突。與客戶端數(shù)據(jù)存儲(chǔ)相比，HTML5本地?cái)?shù)據(jù)庫(kù)具有如下優(yōu)勢(shì)?？梢宰远x要設(shè)置的存儲(chǔ)空間?？梢钥缬蛟L問(wèn)。存儲(chǔ)結(jié)構(gòu)更加自由。可以方便地使用WebSQL來(lái)對(duì)數(shù)據(jù)進(jìn)行讀寫。要通過(guò)HTML5本地?cái)?shù)據(jù)庫(kù)存儲(chǔ)數(shù)據(jù)，第一步就是創(chuàng)建或打開一個(gè)數(shù)據(jù)庫(kù)。這需要調(diào)用openDatabase()方法，該方法的語(yǔ)法格式如下所示：openDatabase(DBName,DBVersion,DBDescribe,DBSize,Callback());9.4.1HTML5本地?cái)?shù)據(jù)庫(kù)簡(jiǎn)介

其中，參數(shù)DBName表示數(shù)據(jù)庫(kù)名稱；參數(shù)DBVersion表示版本號(hào)；參數(shù)DBDescribe表示對(duì)數(shù)據(jù)庫(kù)的描述；參數(shù)DBSize表示數(shù)據(jù)庫(kù)的大小，單位為字節(jié)。如果是2MB，必須寫成2*1024*1024；參數(shù)Callback()表示創(chuàng)建或打開數(shù)據(jù)庫(kù)成功后執(zhí)行的一個(gè)回調(diào)函數(shù)。

調(diào)用openDatabase()方法后如果指定的數(shù)據(jù)庫(kù)名存在，則打開該數(shù)據(jù)庫(kù)；否則新創(chuàng)建一個(gè)指定名稱的空數(shù)據(jù)庫(kù)。9.4.2數(shù)據(jù)庫(kù)操作API

在創(chuàng)建和打開數(shù)據(jù)庫(kù)之后便可以使用HTML5本地?cái)?shù)據(jù)庫(kù)提供的API對(duì)數(shù)據(jù)進(jìn)行管理。其中最常用的是transaction()方法和executeSql()方法。1．transaction()方法transaction()方法用來(lái)執(zhí)行事務(wù)處理。使用事務(wù)處理可以防止在對(duì)數(shù)據(jù)庫(kù)進(jìn)行訪問(wèn)及執(zhí)行有關(guān)操作的時(shí)候受到外界打擾。因?yàn)樵赪eb上，同時(shí)會(huì)有許多用戶都在對(duì)頁(yè)面進(jìn)行訪問(wèn)。如果在訪問(wèn)數(shù)據(jù)庫(kù)的過(guò)程中，正在操作的數(shù)據(jù)被別的用戶給修改的話，會(huì)引起很多意想不到的后果。因此，可以使用事務(wù)來(lái)達(dá)到在操作完成之前，阻止其他用戶訪問(wèn)數(shù)據(jù)庫(kù)的目的。transaction()的使用非常簡(jiǎn)單，直接通過(guò)返回的數(shù)據(jù)庫(kù)對(duì)象調(diào)用即可。其基本語(yǔ)法如下：transaction(callbackFun,errorCallbackFun,successCallbackFun);在上述語(yǔ)法形式中，可以傳入3個(gè)參數(shù)，具體說(shuō)明如下所示。callbackFun回調(diào)函數(shù)，在該函數(shù)中執(zhí)行訪問(wèn)數(shù)據(jù)庫(kù)的SQL語(yǔ)句操作。errorCallbackFun發(fā)生錯(cuò)誤時(shí)調(diào)用的回調(diào)函數(shù)。successCallbackFun執(zhí)行成功時(shí)的回調(diào)函數(shù)。9.4.2數(shù)據(jù)庫(kù)操作API

一般情況下，使用transaction()時(shí)傳入一個(gè)類型事務(wù)的函數(shù)參數(shù)tx最為常用，它可以創(chuàng)建表或者執(zhí)行操作語(yǔ)句。如下代碼創(chuàng)建了一個(gè)數(shù)據(jù)庫(kù)表：db.transaction(function(tx){ tx.executeSql("CREATETABLEIFNOTEXISTSUser(idunique,text)");})2．executeSql()方法executeSql()方法通常用來(lái)執(zhí)行SQL語(yǔ)句，其調(diào)用的格式如下所示：executeSql(sqlString,[Arguments],SuccessCallback,ErrorCallback);其中，參數(shù)sqlString表示需要執(zhí)行的SQL語(yǔ)句；參數(shù)Arguments表示語(yǔ)句需要的實(shí)參；參數(shù)SuccessCallback表示SQL語(yǔ)句執(zhí)行成功時(shí)的回調(diào)函數(shù)；參數(shù)ErrorCallback)表示SQL語(yǔ)句執(zhí)行出錯(cuò)時(shí)的回調(diào)函數(shù)。9.4.3實(shí)戰(zhàn)——實(shí)現(xiàn)基于數(shù)據(jù)庫(kù)的收藏夾管理在9.3節(jié)我們?cè)敿?xì)介紹了客戶端的數(shù)據(jù)存儲(chǔ)機(jī)制，并使用JSON方式制作了一個(gè)收藏夾的案例。在學(xué)習(xí)了前面HTML5本地?cái)?shù)據(jù)庫(kù)的知識(shí)之后，實(shí)現(xiàn)一個(gè)帶數(shù)據(jù)庫(kù)的收藏管理，包括查看收藏夾列表，以及收藏網(wǎng)站的添加、修改和刪除。具體步驟如下：（1）新建一個(gè)HTML頁(yè)面。在頁(yè)面中制作收藏夾的添加表單和結(jié)果顯示表格，（2）上段代碼中，頁(yè)面加載時(shí)調(diào)用函數(shù)showDialyList()。該函數(shù)實(shí)現(xiàn)加載全部日志列表的功能。（3）單擊“保存”按鈕觸發(fā)按鈕的click事件，調(diào)用btnAddDialy()函數(shù)實(shí)現(xiàn)添加收藏夾的功能。（4）單擊某條記錄的“編輯”鏈接，實(shí)現(xiàn)更改數(shù)據(jù)記錄的功能。（5）收藏夾查看、添加和編輯功能實(shí)現(xiàn)以后，我們還需要實(shí)現(xiàn)刪除收藏夾的功能。單擊某條記錄的“刪除”鏈接刪除某條收藏夾的功能。（6）目前為止，基于HTML5本地?cái)?shù)據(jù)庫(kù)實(shí)現(xiàn)收藏夾管理的增、刪、改、查功能已經(jīng)完成。9.5跨文檔傳輸信息

為了代碼的安全性，在JavaScript腳本中不允許跨域訪問(wèn)其他頁(yè)面中的元素，這給不同頁(yè)面數(shù)據(jù)的互訪帶來(lái)了障礙。HTML5解決了這個(gè)問(wèn)題，允許在兩個(gè)不同的域名與端口之間接收發(fā)送數(shù)據(jù)的功能。

首先，需要接收從其他的窗口發(fā)送過(guò)來(lái)的消息，這就必須對(duì)窗口對(duì)象的message事件進(jìn)行監(jiān)視。監(jiān)視代碼如下：window.addEventListener("message",function(){},false);postMessage()方法是HTML為了解決跨域通信特別引入的一個(gè)新的解決辦法，目前許多主流的瀏覽器都支持這一方法。postMessage()方法允許頁(yè)面中的多個(gè)iframe/window的通信，postMessage()方法也可以實(shí)現(xiàn)Ajax直接跨域，而不通過(guò)服務(wù)器端代理。postMessage()方法向其他窗口發(fā)送消息，定義如下所示：9.5跨文檔傳輸信息otherwindow.postMessage(message,targetOrigin);上述語(yǔ)法中，otherwindow表示為接受數(shù)據(jù)頁(yè)面的引用對(duì)象，它可以通過(guò)window.open()方法返回該對(duì)象，也可以通過(guò)下標(biāo)返回window.frames的單個(gè)實(shí)體對(duì)象，還可以是iframe的contentWindow屬性。另外，postMessage()方法包含兩個(gè)參數(shù)，其具體說(shuō)明如下所示。message表示所發(fā)送的消息文本，它可以是JSON對(duì)象轉(zhuǎn)換后的字符內(nèi)容。targetOrigin表示發(fā)送數(shù)據(jù)的URL來(lái)源，可以在URL地址字符串中使用通配符“*”指定全部地址。9.6多線程

在HTML5之前，瀏覽器中的JavaScript腳本代碼都以是單線程方式運(yùn)行的，雖然有多種方式實(shí)現(xiàn)了對(duì)多線程的模擬（如JavaScript中的內(nèi)置函數(shù)setInterval()和setTimeout()等）。但是，在本質(zhì)上程序的運(yùn)行仍然是由JavaScript引擎以單線程調(diào)度的方式進(jìn)行的。HTML5中引入的多線程使得瀏覽器端的JavaScript引擎可以并發(fā)地執(zhí)行JavaScript代碼，從而實(shí)現(xiàn)了對(duì)瀏覽器端多線程編程的良好支持。下面將詳細(xì)介紹如何使用HTML5中的多線程。9.6.1認(rèn)識(shí)HTML5多線程

多線程是HTML5中非常重要的一個(gè)功能，它解決之前版本中腳本耗費(fèi)時(shí)間長(zhǎng)、中斷執(zhí)行的處理及長(zhǎng)時(shí)間無(wú)反應(yīng)的情況。HTML5為多線程提供了Worker對(duì)象。通過(guò)調(diào)用Woker對(duì)象可以將前臺(tái)的JavaScript代碼分割成若干代碼塊，從而分別交給不同后臺(tái)線程處理，避免單線程執(zhí)行緩慢的問(wèn)題。在使用HTML5多線程時(shí)必須建立一個(gè)Worker對(duì)象，并且傳入要被調(diào)用的JavaScript文件的地址，而且必須要把Worker要執(zhí)行的操作寫入到這個(gè)JavaScript文件中。1．創(chuàng)建Worker對(duì)象

創(chuàng)建Worker對(duì)象很簡(jiǎn)單，只需要把在線程中執(zhí)行的JavaScript文件的文件名傳遞給構(gòu)造函數(shù)即可。2．線程通信

在主線程與工作線程間進(jìn)行通信時(shí)，使用的是線程對(duì)象的postMessage()方法和onmessage事件，不管是誰(shuí)向誰(shuí)發(fā)送數(shù)據(jù)，發(fā)送方使用的都是postMessage()方法，接收方使用的都是onmessage事件。postMessage()方法有一個(gè)參數(shù)，即傳遞的參數(shù)；onmessage事件也只有一個(gè)參數(shù)，即通過(guò)event.data獲取收到的數(shù)據(jù)。3．發(fā)送JSON數(shù)據(jù)JSON是JavaScript原生支持的內(nèi)容，比較復(fù)雜的數(shù)據(jù)就可以使用JSON進(jìn)行傳遞。9.6.1認(rèn)識(shí)HTML5多線程4．處理錯(cuò)誤

當(dāng)線程發(fā)生錯(cuò)誤的時(shí)候，它的onerror事件回調(diào)函數(shù)會(huì)被調(diào)用，所以處理錯(cuò)誤的方式很簡(jiǎn)單，就是掛接線程實(shí)例的onerror事件。這個(gè)回調(diào)函數(shù)有一個(gè)參數(shù)對(duì)象error，這個(gè)對(duì)象有3個(gè)常用的屬性。message錯(cuò)誤消息。filename發(fā)生錯(cuò)誤的腳本文件。lineno發(fā)生錯(cuò)誤的行。5．銷毀線程

在線程內(nèi)容可以調(diào)用close()方法銷毀自已的線程，在線程外部的主線程中，使用線程實(shí)例的terminate()方法銷毀線程。9.6.2實(shí)戰(zhàn)——Worker對(duì)象的簡(jiǎn)單應(yīng)用

上節(jié)已經(jīng)簡(jiǎn)單介紹了如何創(chuàng)建和使用Worker對(duì)象，下面主要通過(guò)一個(gè)案例演示如何使用Worker對(duì)象處理線程。

本案例中頁(yè)面加載時(shí)創(chuàng)建一個(gè)Worker后臺(tái)線程，當(dāng)輸入內(nèi)容完成后單擊按鈕向后臺(tái)線程發(fā)送輸入內(nèi)容，后臺(tái)線程將數(shù)據(jù)處理完成后返回前臺(tái)調(diào)用并輸入消息。實(shí)現(xiàn)該功能的具體步驟如下：（1）添加新的HTML頁(yè)面，在頁(yè)面的合適位置添加textarea元素、input元素和div元素元素等。（2）在JavaScript中首先判斷瀏覽器是否支持Worker對(duì)象，如果支持則直接創(chuàng)建該對(duì)象，如果不支持彈出提示。（3）單擊【提交】按鈕時(shí)觸發(fā)該按鈕的onclick事件調(diào)用btnSend()函數(shù)，（4）創(chuàng)建名稱為comments.js文件，在該文件中接收頁(yè)面?zhèn)鬟^(guò)來(lái)的內(nèi)容.（5）調(diào)用postMessage()方法時(shí)會(huì)觸發(fā)onmessage事件，在頁(yè)面中通過(guò)objWorker對(duì)象的該事件來(lái)獲取信息并接收，最后將內(nèi)容顯示到div元素中。（6）運(yùn)行本案例輸入內(nèi)容后單擊【提交】按鈕查看效果，9.7獲取位置信息HTML5中新增加了GeolocationAPI接口獲取地理位置，它允許用戶在Web應(yīng)用程序中共享他們的位置，使其能夠享受位置感知服務(wù)，包括了解周圍情況等。地理位置信息的來(lái)源有經(jīng)度、緯度和其他特性，獲取這些數(shù)據(jù)途徑有GPS、WiFi和蜂窩站點(diǎn)等。

下面詳細(xì)介紹HTML5使用GeolocationAPI接口獲取地理位置的方法。9.7.1認(rèn)識(shí)地圖APIHTML5為window.navigator對(duì)象增加了一個(gè)geolocation屬性，該屬性返回的一個(gè)Geolocation對(duì)象。調(diào)用Geolocation對(duì)象提供的方法，即可實(shí)現(xiàn)獲取位置信息。1．getCurrentPosition()方法getCurrentPosition()方法可以獲取用戶當(dāng)前的地理位置信息，2．watchCurrentPosition()方法watchCur