1.web storage
html5除了canvas元素之外，還有一個非常重要的功能那就是用戶端本地儲存資料的web storage功能。
以前都是用cookies儲存使用者名等簡單資訊。
但是cookie有下面幾個問題：
a:大小：cookies的大小被限制在4kb
b:帶寬：cookies随http事務一起被發送，是以會浪費一部分發送的cookies時使用的帶寬。
c:複雜性：要正确的操縱cookies是很困難的。
web storage分為兩種：
<1>sessionstorage
将資料儲存在session對象中。浏覽器關閉資料消失。
儲存資料：sessionstorage.setitem(key,value);
讀取資料：變量=sessionstorage.getitem(key);
<2>localstorage
将資料儲存在哭護短本地的硬體裝置中。浏覽器關閉資料依舊存在。（分浏覽器的，如果儲存在
在谷歌浏覽器，下次打開ie是不會有的）
儲存資料：localstorage.setitem(key,value);
讀取資料：變量=localstorage.getitem(key);
儲存時不允許重負儲存相同的鍵名。儲存後可以修改鍵值，但不允許修改鍵名。
<3>儲存少量資料
js:
html:
結果：
<4>作為簡易的資料庫來用
使用json作為鍵值。
2.本地資料庫
<1>兩個必要步驟：
a: 建立通路資料庫的對象
b: 使用事務處理
首先必須用opendatabase方法建立一個通路資料庫的對象：
第一個參數：資料庫名
第二個參數：版本号
第三個參數：資料庫的描述
第四個參數：資料庫的大小
如果該資料不存在，則建立它。
<2>executesql
第一個參數：需要執行的sql語句
第二個參數：sql語句中使用到的參數數組
如：
第三個參數：執行sql語句成功時候的回調函數
該函數的第一個參數為transaction對象，第二個為執行查詢操作時傳回的查詢到的結果資料集對象。
第四個參數：執行sql語句錯誤時調用的回調函數
如：
3.本地緩存api（離線web應用程式）
->離線web應用程式：當哭護短本地與web應用程式沒有建立連接配接時，也能正常在用戶端本地使用該web應用。
程式進行有關操作。
<1>本地緩存與浏覽器網頁緩存的差別
開發出更為強大的離線應用程式。
<2>manifest檔案
第一行必須是"cache manifest"文字。當然運作離線web應用程式的時候，需要對伺服器進行配置，讓伺服器支援text/cache-manifest這個mime類型。apache伺服器和iis伺服器都有相應的配置。manifest檔案中的注釋以”#“開頭。
<3>applicationcache對象
該對象代表了本地緩存，可以使用它來通知使用者本地緩存中已經被更新，也允許使用者手工更新本地緩存。
當浏覽器對本地緩存進行更新時，會觸發applicationcache的updateready事件。
<4>swapcache方法
該方法用來手動執行本地緩存的更新，他隻能在applicationcache對象的updateready事件被觸發時調用。
如：
如果不加applicationcache.swapcache();會怎麼樣？
不加的話，本地緩存也會被更新，但是更新的時間是在下次打開本頁面時被更新。
加上的話，本地緩存會立即被更新。
看個具體的例子：
<5>applicationcache事件
4.跨文檔消息傳輸
html5提供了跨域，跨文檔的通信。
首先必須監視message事件。
使用window對象的postmessage方法向其他視窗發送消息。
otherwindow為要發送視窗對象的引用。
第一個參數：要發送的消息文本
第二個參數：接受消息的對象視窗url位址
5.web sockets api
web sockets是html5提供的在web應用程式中用戶端與伺服器斷之間進行的非http的通信機制。
建立的這種通信機制是實時的，永久的，除非被顯式的關閉。
web sockets api不僅僅可以發送文本，而且還可以使用json對象來發送一切js中的對象。
另外通過讀取readystate的屬性值來擷取websocket的狀态。
connecting(數字0)，表示正在連接配接。
open(數字1)，表示已建立連接配接。
closing(數字2)，表示正在關閉連接配接。
closed(數字2)，表示已關閉連接配接。
6.web workers api
web workers是在html5中新增的，用來在web應用程式中實作背景處理的一項技術。
在使用html4與javascript建立的web程式中，因為所有的處理都是在單線程内執行的，是以話費的事件比較長。
程式界面長期處于沒有響應的狀态。最糟糕的是可能直接崩潰。
是以web workers就誕生了。web workersapi，使用者可以用它建立一個在背景運作的線程。将可能耗費時間較長的處理交給背景去執行。
這樣對使用者在前台界面的執行操作就完全沒有影響了。實作了一種多線程的功能。
首頁面js:
首頁面html:
單獨的sum.js
7.geolocation api（地理位置資訊）
<1>取得目前地理位置
onsuccess:擷取目前地理位置成功時的回調函數
用法：
onerror:擷取目前地理位置失敗時的回調函數
用法：該回調使用error對象作為參數，有兩個屬性
code:
使用者拒絕了位置服務（屬性值為1）
擷取不到位置資訊（屬性值為2）
擷取資訊逾時錯誤（屬性值為3）
message
例子：
options：可選屬性清單
a:enablehighaccuracy:是否要求高精度的地理位置資訊。
b:timeout:對地理位置資訊的擷取做一個逾時限制。
c:maximumage:對地理位置資訊進行緩存的有效時間。
<2>在頁面時使用google地圖
轉載：<b>http://www.cnblogs.com/zqzjs/p/4855922.htm</b>