出處 《 HTML5中文教程》 page 69
HTML5引入了兩種機制，類似於HTTP 的會話cookie，用於在客戶端存儲結構化數據以及克服以下缺點。
- 每個HTTP請求中都包含Cookies,從而導致傳輸相同的數據減緩我們的Web應用程序。
- 每個HTTP請求中都包含Cookies,從而導致發送未加密的數據到互聯網上
- Cookies只能存儲有限的4KB數據，不足以存儲所有的數據。
這兩種存儲方式是session storage和local storage，他們將用於處理不同的情況。
幾乎所有最新版的瀏覽器都支持HTML5存儲，包括IE瀏覽器。
1）會話存儲 Session Storage
會話存儲被設計用於用戶執行單一事務的場景，但是同時可以在不同的窗口中執行多個事務。
示例：
比如，如果用戶在同一個網站的不同窗口中購買機票。如果該網站使用cookie跟蹤用戶購買的機票，當用戶在窗口中點擊頁面時，從一個窗口到另一個窗口時已經購買的機票會"泄漏“，這可能導致用戶購買同一個航班的兩張機票而沒有注意到。
HTML5引進了sessionStorage屬性，這個網站可以用來把數據添加到會話存儲中，用戶仍然可以在打開的持有該會話的窗口中訪問同一個站點的任意頁面，當關閉窗口時，會話也會丟失。
下面的代碼將會設置一個會話變量，然後訪問該變量。
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( sessionStorage.hits ){
sessionStorage.hits = Number( sessionStorage.hits ) + 1;
}else{
sessionStorage.hits = 1;
}
document.write( "Total Hits:"+sessionStorage.hits );
</script>
<P>Refresh the page to increase number of hits.</P>
<P>Close the window and open it again and check the result.</P>
</body>
</html>2）本地存儲 Local Storage
本地存儲被設計用於跨多個窗口進行存儲，並持續處在當前會話上。尤其是出於性能的原因Web應用程序可能希望在客戶端存儲百萬字節的用戶數據，比如用戶撰寫的整個文檔或是用戶的郵箱。
Cookies並不能很好的處理這種情況，因爲每個請求都會傳輸。
HTML5 引入了localStorage屬性，可以用於訪問頁面的本地存儲區域而沒有時間限制，無論何時我們使用這個頁面的時候本地存儲都是可用的。
下面的代碼設置了一個本地存儲變量，每次訪問這個頁面時都可以訪問該變量，甚至是下次打開窗口時。
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) + 1;
}else{
localStorage.hits = 1;
}
document.write("Total hits:" + localStorage.hits );
</script>
<p>Refersh the page to increase number of hits</p>
<p>Close the window and open it again and check the result</p>
</body>
</html>
