HTML5 & CSS3初學者指南(3) – HTML5新特性介紹Web存儲本地存儲地理定位拖放伺服器發送事件總結

本文介紹了 HTML5 的一些新特性。主要包含以下幾個方面:

Web 存儲

地理位置

拖放

伺服器發送事件

HTML5 Web 存儲的設計與構想是一個更好的機制來存儲用戶端的網絡資料。它是通過一個網絡浏覽器作為用戶端資料庫實作的，它允許網頁以鍵值對的形式來存儲資料。

它具有以下特征：

每個原始網站/域最多可存儲 5MB 的資料。

你可以通過屬性和方法來使用 JavaScript 操作 web 存儲器中的資料實作通路。

就像 cookies，你可以選擇将保持資料（維持），即使你已經離開了該網站，關閉了浏覽器頁籤，退出了浏覽器或關閉了計算機。

不像 cookies 這種由伺服器端腳本建立的，web存儲是由用戶端腳本如 JavaScript 建立。

不像 cookies，web 存儲中的資料不會自動伴随伺服器端每一次 HTTP 請求。

Web 存儲在主流的 Web 浏覽器中都是原生支援的，如 Chrome，Opera，Firefox，Safari 和 IE8 +。換句話說，不需要第三方插件。

網絡存儲提供了2種不同的存儲區域- 會話存儲和本地存儲 –它們在範圍和時限有所不同，需要在不同情況下使用。

引用：

“如果使用者使用相同的站點在兩個不同的視窗購買了飛機票。如果站點使用 Cookie 來跟蹤使用者已購買的票據，則當使用者從兩個視窗點選頁面跳轉時，目前正在購買的票将會從一個視窗“洩漏”到另一個，進而可能導緻使用者在沒意識到的情況下，為同一個航班夠買了兩張票。

會話存儲必須用于處理機密和敏感資訊的網絡活動，如信用卡号碼，社會保險号碼和登入證書。這些資訊很容易受到“DNS欺騙”的攻擊，是以不應該存儲超過一個單個會話。”

本地存儲，資料以字元串的形式進行存儲，并且會一直持續下去（除非你明确地删除它）。即使浏覽器視窗關閉了資料也會一直存在，同時如果接下來對相同 origin 的通路使用的是相同的浏覽器，那麼資料也是可用的。本地存儲是專為存儲跨越多個浏覽器視窗和持續的時間超過目前會話的資料。

不像桌面系統，Web 應用程式一直缺乏離線工作的能力。現在不一樣了，HTML5 本地存儲的出現，已經使脫機工作成為了可能。試想一下你正在填寫一份多頁的 Web 表單，或者撰寫一篇文章時，截止日期已經迫在眉睫，突然發生網絡故障中斷。你将會失去你精心建立的所有資料。因為有了本地存儲，你就可以繼續離線工作，而 Web 應用程式會使用一些用戶端腳本如 JavaScript 間歇性地将你的工作儲存到本地存儲。

一個網站可以讓使用者自定義網頁的主題和布局，并在本地存儲中儲存這些設定。以這種方式，使用者可以在後續通路中看到自己個人的網頁。

HTML geolocation API 隻有一個對象，就是 navigator.geolocation 對象。你可以将 navigator.geolocation 比作浏覽器中的指南針。浏覽器是否支援這個 API，還有待确認。你可以通過将以下的 if-else 寫入到自己的代碼中，來檢測浏覽器是否支援。

navigator.geolocation 對象公開了3中方法 getCurrentPosition（），watchPosition（），和clearWatch（）。

getCurrentPosition（）方法用來獲得使用者的目前位置。

watchPosition（）方法與 getCurrentPosition（）方法是幾乎相同的。它們都傳回目前位置資訊并具有相同的方法簽名 - 一個成功的回調函數，一個錯誤的回調函數和一個位置選項對象。唯一的差別在于， 一旦激活了點選按鈕，getCurrentPosition（）方法會傳回位置資訊；而 watchPosition（）方法将繼續獲得位置資訊，一旦使用者裝置的位置發生變化并在初始話激活之後。

該 watchPosition（）方法會傳回一個 watch ID，當不再需要擷取位置時，可以用 watch ID 來停止 watchPositon（）方法。

clearWatch（）方法以 watchPosition（）方法的 watch ID 作為參數，用于停止執行 watchPosition（）方法。

我們已經很熟悉拖放電腦桌面上的檔案、檔案夾和圖示了。拖放是一種任何的桌面應用具有的強有力的也是理所當然應該具備的使用者互動。使用像滑鼠這樣的指針裝置，通過拖放來實作拷貝，插入和删除任何電腦桌面上的檔案和對象。

HTML5 Drag and Drop API 提供了對浏覽器拖放操作原生的支援，使得代碼實作拖放變得更容易。

首先，為了使元素可拖動，把 draggable 屬性設定為 true ：

<img draggable="true" />

然後，規定當元素被拖動時，會發生什麼。

在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的資料。

dataTransfer.setData( ) 方法設定被拖資料的資料類型和值：

ondragover 事件規定在何處放置被拖動的資料。

預設地，無法将資料/元素放置到其他元素中。如果需要設定允許放置，我們必須阻止對元素的預設處理方式。

這要通過調用 ondragover 事件的 event.preventDefault() 方法：

當放置被拖資料時，會發生 drop 事件。

在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：

傳統的使用者和網站之間的互動模式是使用者發起的請求和應答類型。使用者通過浏覽器主動發起請求，并且等待伺服器的應答。為了檢查某個特定的網頁上是否有更新，使用者需要通過點選浏覽器上更新/重新登入按鈕來向伺服器發送新的請求。換言之，伺服器必須不間斷的将伺服器側的更新推送出去。當資訊不間斷的無法預測的變化時，通過這種方式來擷取一些關鍵的做決定的資訊，就不是特别有用了。例如股票價格更新，新聞傳遞，天氣預報等。

當資訊到達時，HTML 伺服器發送事件（SSE）使得伺服器能夠将資訊發送（推送）到用戶端，避免了伺服器持續推送的需要。這也使得網站在不需要任何第三方插件的情況下，能夠為用戶端提供推送服務。

Server-Sent 事件指的是網頁自動擷取來自伺服器的更新。

以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過伺服器發送事件，更新能夠自動到達。

EventSource 對象用于接收伺服器發送事件通知：

代碼解釋：  

建立一個新的 EventSource 對象，然後規定發送更新的頁面的 URL（本例中是 "demo_sse.php"）

每接收到一次更新，就會發生 onmessage 事件

當 onmessage 事件發生時，把已接收的資料推入 id 為 "result" 的元素中

在上面的 TIY 執行個體中，我們編寫了一段額外的代碼來檢測伺服器發送事件的浏覽器支援情況：

為了讓上面的例子可以運作，您還需要能夠發送資料更新的伺服器（比如 PHP 和 ASP）。

伺服器端事件流的文法是非常簡單的。把 "Content-Type" 報頭設定為 "text/event-stream"。現在，您可以開始發送事件流了。

PHP 代碼 (demo_sse.php)：

ASP 代碼 (VB) (demo_sse.asp):

代碼解釋：

把報頭 "Content-Type" 設定為 "text/event-stream"

規定不對頁面進行緩存

輸出發送日期（始終以 "data: " 開頭）

向網頁重新整理輸出資料

本文轉自 powertoolsteam 51CTO部落格，原文連結：http://blog.51cto.com/powertoolsteam/1892832，如需轉載請自行聯系原作者