介紹

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

• Web 儲存

• 地理位置

• 拖放

• 伺服器傳送事件

Web儲存

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

它具有以下特徵：

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

• 你可以透過屬性和方法來使用 JavaScript 操作 web 儲存器中的資料實現訪問。

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

• 不像 cookies 這種由伺服器端指令碼建立的，web儲存是由客戶端指令碼如 JavaScript 建立。

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

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

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

會話儲存

會話儲存，資料以字串的形式進行儲存，只會持續在當前的會話。當瀏覽器視窗關閉時，資料將會被刪除。會話儲存是專門用於同一個使用者在不同的瀏覽器中使用相同的網站同時進行多個事務的情況。每一個瀏覽器視窗中的事務會獲取它們自己會話儲存的備份，這些會話備份是和其它瀏覽器視窗中的另一個事務不同的。當使用者關閉瀏覽器視窗時，隸屬於這個視窗的會話儲存資料將會繼續存在。以這種方式，事務資料不會從一個瀏覽器視窗洩露到另一個視窗。會話儲存就是cookies確定的解決方案，正如 HTML5 Web儲存規格 陳述的：

引用：

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

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

如何建立並訪問一個 sessionStorage：

<script type="text/javascript"> sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname); <!--script>

本地儲存

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

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

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

如何建立和訪問 localStorage：

<script type="text/javascript"> localStorage.lastname="Smith";

document.write(localStorage.lastname); 

地理定位

HTML geolocation API 只有一個物件，就是 navigator.geolocation 物件。你可以將 navigator.geolocation 比作瀏覽器中的指南針。瀏覽器是否支援這個 API，還有待確認。你可以透過將以下的 if-else 寫入到自己的程式碼中，來檢測瀏覽器是否支援。

// Check whether browser supports Geolocation API or not if (navigator.geolocation) // Supported { // place the geolocation code here } else // Not supported {
    alert("Oop! This browser does not support HTML5 Geolocation.");
}

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

• getCurrentPosition（）

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

navigator.geolocation.getCurrentPosition(getPosition);

• watchPosition（）

watchPosition（）方法與 getCurrentPosition（）方法是幾乎相同的。它們都返回當前位置資訊並具有相同的方法簽名 - 一個成功的回撥函式，一個錯誤的回撥函式和一個位置選項物件。唯一的區別在於， 一旦啟用了點選按鈕，getCurrentPosition（）方法會返回位置資訊；而 watchPosition（）方法將繼續獲得位置資訊，一旦使用者裝置的位置發生變化並在初始話啟用之後。

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

• clearWatch（）

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

拖放

我們已經很熟悉拖放電腦桌面上的檔案、資料夾和圖示了。拖放是一種任何的桌面應用具有的強有力的也是理所當然應該具備的使用者互動。使用像滑鼠這樣的指標裝置，透過拖放來實現複製，插入和刪除任何電腦桌面上的檔案和物件。

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

• 設定元素為可拖放

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

• 拖動什麼

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

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

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

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

• 放到何處

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

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

這要透過呼叫 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

• 進行放置

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

在上面的例子中，ondrop 屬性呼叫了一個函式，drop(event)：

function drop(ev)
{
    ev.preventDefault(); var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

伺服器傳送事件

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

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

• Server-Sent 事件 - 單向訊息傳遞

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

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

• 接收 Server-Sent 事件通知

EventSource 物件用於接收伺服器傳送事件通知：

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
   document.getElementById("result").innerHTML+=event.data + " ";
};

程式碼解釋：  

• 建立一個新的 EventSource 物件，然後規定傳送更新的頁面的 URL（本例中是 "demo_sse.php"）
• 每接收到一次更新，就會發生 onmessage 事件
• 當 onmessage 事件發生時，把已接收的資料推入 id 為 "result" 的元素中

• 檢測 Server-Sent 事件支援

在上面的 TIY 例項中，我們編寫了一段額外的程式碼來檢測伺服器傳送事件的瀏覽器支援情況：

if(typeof(EventSource)!=="undefined")
{ // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. }

• 伺服器端程式碼例項

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

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

PHP 程式碼 (demo_sse.php)：

<!--?header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?>

ASP 程式碼 (VB) (demo_sse.asp):

<% Response.ContentType="text/event-stream" Response.Expires=-1 Response.Write("data: " & now())
Response.Flush() %>

程式碼解釋：

• 把報頭 "Content-Type" 設定為 "text/event-stream"
• 規定不對頁面進行快取
• 輸出傳送日期（始終以 "data: " 開頭）
• 向網頁重新整理輸出資料

總結

本文介紹的 HTML5 一些新特性就到這裡，在後面一篇文章中，我們將會學習到 HTML5 的 Canvas 知識。。學習了 HTML5 的新特性，能夠幫助我們在進行前端開發時更加順利，同時也可以藉助一些前端開發工具。 是一款大而全面的前端 HTML5 / JavaScript UI控制元件集，能為企業應用提供更加靈活的操作體驗，現已全面支援Angular 2。