前言
本篇介紹HTML5支持的Web存儲（Web Storage）和HTML 5 應用程序緩存。
客戶端存儲數據介紹
HTML5 提供了兩種在客戶端存儲數據的新方法：
- localStorage - 沒有時間限制的數據存儲
- sessionStorage - 針對一個 session 的數據存儲
sessionStorage存儲的數據只有在同一個會話中的頁面才能訪問並且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
以前的客戶端存儲數據都是由cookie完成的，它存在問題是：Cookie的大小是受限的，並且每次請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬；另外cookie還需要指定作用域，不可以跨域調用。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生。
Web Storage存儲和訪問
localStorage 和 sessionStorage 擁有一樣的存取接口，下邊已sessionStorage為例說明
接口
sessionStorage.getItem(key) ---- 獲取指定key的本地存儲的值
sessionStorage.setItem(key,value) ---- 將value存儲到key字段中
sessionStorage.removeItem(key) ---- 刪除指定ke的本地存儲的值
sessionStorage.length ---- sessionStorage的項目數
sessionStorage.clear() ---- 清空sessionStorage的項目
web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通對象一樣用點(.)操作符，及[]的方式進行數據存儲，像如下的代碼：
var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);
sessionStorage和localStorage提供的key()和length可以方便的實現存儲的數據遍歷，例如下面的代碼：
var storage = window.localStorage; for (var i=0, len = storage.length; i < len; i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value); }
示例
<!DOCTYPE HTML> <html> <body> <script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits: " + localStorage.pagecount + " time(s)."); </script> <p>刷新頁面會看到計數器在增長。</p> <p>請關閉瀏覽器窗口，然后再試一次，計數器會繼續計數。</p> </body> </html>
該示例使用localStorage，實現頁面瀏覽次數計數的功能，沒刷新一次頁面即可完成一次計數，關閉標簽頁或瀏覽器之后重新打開，仍然可以連續計數（只限當前機器，和asp.net的application對象是不同的，一個是客戶端存儲，一個服務端存儲）。該示例若將localStorage替換成sessionStorage則可以統計某一個用戶在當前回話中訪問（刷新）頁面的次數（同源頁面是可以共享sessionStorage的）。
HTML 5 應用程序緩存介紹
使用 HTML5，通過創建 cache manifest 文件，可以輕松地創建 web 應用的離線版本。
HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網連接時進行訪問。
應用程序緩存為應用帶來三個優勢：
- 離線瀏覽 - 用戶可在應用離線時使用它們
- 速度 - 已緩存資源加載得更快
- 減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
使用應用程序緩存
1、如需啟用應用程序緩存，請在文檔的 <html> 標簽中包含 manifest 屬性
2、manifest 文件需要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置。
3、創建manifest文件（如manifestDemo.appcache），manifest 文件的建議的文件擴展名是：".appcache"。
Manifest 文件
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。對於瀏覽器來說，manifest的加載是要晚於其他資源的，這就導致check manifest的過程是滯后的，發現manifest改變，所有瀏覽器的實現都是緊隨着做靜默更新資源，以保證下次瀏覽時應用到更新。另外引入manifest的頁面，即使沒有被列入緩存清單中，仍然會被用戶代理緩存。
CACHE MANIFEST
# VERSION 0.3
# 直接緩存的文件
CACHE:
/theme.css
/logo.gif
/main.js
# 在線鏈接的文件
NETWORK:
login.asp
# 替代方案
FALLBACK:
/html5/ /404.html
manifest 文件可分為三個部分：
- CACHE - 在此標題下列出的文件將在首次下載后進行緩存
- NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
- FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
manifest文件中第一行 CACHE MANIFEST是必須的。
CACHE 下定義的資源在網絡斷開的情況下仍然可用。資源列表必須是一行對應一個資源。
而NETWORK下定義的則需要聯網訪問。在定義了CACHE之后，可以使用'*'號定義NETWORK，即排除顯式定義的緩存列表外其他資源都不緩存。
FALLBACK則是一種替代方案，前邊的路徑（文件夾或者路徑）訪問失敗時使用后邊的替補頁展示。
重要的提示：以 "#" 開頭的是注釋行，但也可滿足其他用途。應用的緩存會在其 manifest 文件更改時被更新。如果您編輯了一幅圖片，或者修改了一個 JavaScript 函數，這些改變都不會被重新緩存。更新注釋行中的日期和版本號是一種使瀏覽器重新緩存文件的辦法。
更新緩存
一旦應用被緩存，它就會保持緩存直到發生下列情況：
- 用戶清空瀏覽器緩存
- manifest 文件被修改（參閱下面的提示）
- 由程序來更新應用緩存
LZ在查看這節內容時，搜索到其他很多manifest的相關內容和存在問題，將連接放在這里供園友查看。
小結
關於HTML5客戶端存儲的知識相對要簡要一些。緩存相關內容，LZ僅僅是在w3school上運行了一下范例，網上搜集了一些其他相關信息，因為缺乏離線環境，自己沒有動手實踐。好吧，寫這么一點東西竟然用了兩個半小時。。。今天就到這里吧。