HTML5存儲學習筆記（一）

1.HTML5以前的存儲方式

HTML5以前經常使用的存儲方式爲cookies。

cookies在瀏覽器中的存儲形態，以百度首頁的cookie爲例：

【特別說明】

HttpOnly表示該cookie只能被server端修改，client 端不能對其修改。經過程序(JS腳本、Applet等)將沒法讀取到Cookie信息，這樣能有效的防止XSS攻擊。

Secure表示建立的 Cookie 會被以安全的形式向服務器傳輸，也就是隻能在 HTTPS 鏈接中被瀏覽器傳遞到服務器端進行會話驗證，若是是 HTTP 鏈接則不會傳遞該信息，因此不會被竊取到Cookie 的具體內容。

cookies的缺點：

• http請求頭上會帶着相關的cookies，子域名的請求header上會帶有主域名下的cookie，在請求過程當中顯得比較臃腫，也會有安全上的風險。
• 官方說明對於每個域名，它所能存儲的cookies的大小爲4KB。在容量上有侷限。
• 若是隨意在domain下存儲cookie，會形成主domain的cookies污染。

H5以前另外一個數據存儲方式是UserData，只有IE支持這種方式。最終以XML文件的形式存儲。

總的來說，cookies不適合大量數據的存儲，由於它們由每一個對服務器的請求來傳遞，這使得 cookie 速度很慢並且效率也不高。

2. HTML5提供的存儲方式

HTML5 提供了兩種在客戶端存儲數據的新方法：

• localStorage - 沒有時間限制的數據存儲
• sessionStorage - 針對一個 session 的數據存儲

在 HTML5 中，數據不是由每一個服務器請求傳遞的，而是隻有在請求時使用數據。它使在不影響網站性能的狀況下存儲大量數據成爲可能。

對於不一樣的網站，數據存儲於不一樣的區域，而且一個網站只能訪問其自身的數據。

HTML5 使用 JavaScript 來存儲和訪問數據。

（摘自w3school：http://www.w3school.com.cn/html5/html_5_webstorage.asp）

2.1 本地存儲

• API: Localstorage & sessionstorage
• 存儲形式 key/value
• localStorage 方法存儲的數據沒有時間限制，sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。
• 標準給的建議是每一個域名5M大小
• 瀏覽器支持狀況：IE8以上，其餘經常使用的瀏覽器包括移動端瀏覽器都支持。
• API：getItem(xxx), setItem(xxx,yyy), removeItem(xxx), key(n), clear()。
• 示例代碼：

<script type="text/javascript">

localStorage.lastname="Smith";
document.write("Last name: " + localStorage.lastname);

sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);

</script>

• 能夠存儲的內容：數組，json數據，圖片，腳本，樣式文件等能夠序列化成字符串的東西。存圖片能夠經過canvas加載圖片並轉換成base64的string。
• 注意事項：使用前判斷是否支持，存的時候注意捕獲異常，子域名間沒法共享數據。
• 使用場景舉例：存儲樣式表，減小網絡訪問。