HTMl5存儲分爲三部分：
本地存儲(localStorage && sessionStorage)
離線存儲(application cache)
IndexedDB 和 Web SQL
1. 本地存儲(localStorage && sessionStorage)
localStorage
對象和 sessionStorage 對象使用方法基本相同，它們的區別在於作用的範圍不同。sessionStorage 用來存儲與頁面相關的數據，它在頁面關閉後無法使用。而 localStorage 則持久存在，在頁面關閉後也可以使用。
API:
length：返回當前存儲在 Storage 對象中的鍵值對數量。
key(index)：返回列表中第 n 個鍵的名字。Index 從 0 開始。
getItem(key)：返回指定鍵對應的值。
setItem(key, value)：存入一個鍵值對。
removeItem(key) ：刪除指定的鍵值對。
clear()：刪除 Storage 對象中的所有鍵值對。
以 sessionStorage 爲例：
存儲鍵值對：
sessionStorage.setItem(“key1”, value1);
通過鍵名來讀取值：
var value1 = sessionStorage.getItem(“key1”);
存儲形式:
key->value 的形式。下圖是百度首頁的localStorage
存儲大小：
官方給出的是5M。
使用 HTML5 Storage 需要注意的幾點
1. 保存在 Storage 對象的數據類型當使用
DOM Storage 進行本地存儲時，任何數據格式在 Storage 對象中都以字符串類型保存，所以如果保存的數據不是字符串，在讀取的時候需要自己進行類型的轉換。
2. 空間大小
HTML5
的建議是每個網站提供給 Storage 的空間是 5MB，一般來說足夠存字符串。如果存入的數據太大，有些瀏覽器如 Chrome 會拋出 QUOTA_EXCEEDED_ERR 異常。所以雖然HTML 5 Storage
提供的空間比 cookie 要大很多，但在使用需要注意限制。
3. 安全性
一般不要在客戶端存儲敏感的信息，使用
localStorage、sessionStorage 等在客戶端存儲的信息都非常容易暴露。應該在完成數據存儲後使用 clear 或者 removeItem 方法清除保存在 Storage 對象中的數據。
4. 存儲事件驅動
如果想在存儲成功或修改存儲的值時執行一些操作，可以用 DOM Storage 接口提供的事件。可以使用如下方法註冊事件：
window.addEventListener(“storage”, handleStorageEvent, false);
註冊完存儲事件後，當 sessionStorage 或者 localStorage 對象的值發生改變時，會觸發 handleStorageEvent 函數，在頁面顯示發生改變的鍵和改變之前與之後的值。
// 顯示存儲事件的相關內容
function handleStorageEvent(e) {
document.write(“key” + e.key + “oldValue” + e.oldValue + “newValue” + e.newValue);
}
// 添加存儲事件監聽
window.addEventListener(“storage”, handleStorageEvent, false);
