介紹

本文介紹了 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);</script>

?

地理定位

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

//?Check?whether?browser?supports?Geolocation?API?or?notif?(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 ：

<img 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?+?"<br?/>"; };

代碼解釋：??

• 創建一個新的 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)：

<?phpheader('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=-1Response.Write("data:?"?&?now()) Response.Flush()%>

代碼解釋：

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

• 規定不對頁面進行緩存

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

• 向網頁刷新輸出數據

總結

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

本文轉自 powertoolsteam 51CTO博客，原文鏈接：http://blog.51cto.com/powertoolsteam/1892832，如需轉載請自行聯系原作者

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的HTML5 CSS3初学者指南(3) – HTML5新特性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。