詳細解析cookie，sessionStroage和localStroage的區別
前面我們說到了JavaScript中的緩存對象，主要是cookie,sessionStroage和localStroage，今天我們來講一下這三者之間的區別。
共同點
- 都是保存在瀏覽器端，且同源的。(所謂同源就是協議，域名，端口號相同)。
- 都是字符串類型的鍵值對。
區別
1.cookie
-
HTTP Cookie簡稱cookie,在HTTP請求發送Set-Cookie HTTP頭作爲響應的一部分。通過name=value的形式存儲
-
cookie的構成：
名稱：name(不區分大小寫,但最好認爲它是區分的)
值:value(通過URL編碼:encodeURIComponent)
域
路徑
失效時間:一般默認是瀏覽器關閉失效,可以自己設置失效時間
安全標誌:設置安全標誌後只有SSL連接的時候才發送到服務器。 -
cookie的作用:主要用於保存登錄信息。
-
生命期爲只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。 存放數據大小爲4K左右 。有個數限制（各瀏覽器不同），一般不能超過20個。與服務器端通信：每次都會攜帶在HTTP頭中，如果使用cookie保存過多數據會帶來性能問題。
-
cookie的優點：具有極高的擴展性和可用性
通過良好的編程，控制保存在cookie中的session對象的大小
通過加密和安全傳輸技術，減少cookie被破解的可能性
只有在cookie中存放不敏感的數據，即使被盜取也不會有很大的損失
控制cookie的生命期，使之不會永遠有效。這樣的話偷盜者很可能拿到的就 是一個過期的cookie。 -
cookie的缺點：
cookie的長度和數量的限制。每個domain最多隻能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉
安全性問題。如果cookie被人攔掉了，那個人就可以獲取到所有session信息。加密的話也不起什麼作用
有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，我們需要在服務端保存一個計數器。若吧計數器保存在客戶端，則起不到什麼作用。
2.sessionStorage
-
sessionStorage是Storage類型的一個對象，擁有clear(),getItem(name),key(index),removeItem(name),setItem(name,value)方法。
-
sessionStorage對象存儲特定於某個會話的數據,也就是該數據只保持到瀏覽器關閉。
-
將數據保存在session對象中。所謂session，是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，也就是用戶瀏覽這個網站所花費的時間。session對象可以用來保存在這段時間內所要求保存的任何數據。
-
sessionStorage爲臨時保存。
3.localStorage
-
localStorage也是Storage類型的一個對象。
-
在HTML5中localStorage作爲持久保存在客戶端數據的方案取代了globalStorage(globalStorage必須指定域名)。
-
localStorage會永久存儲會話數據，除非removeItem,否則會話數據一直存在。
-
將數據保存在客戶端本地的硬件設備(通常指硬盤，也可以是其他硬件設備)中，即使瀏覽器被關閉了，該數據仍然存在，下次打開瀏覽器訪問網站時仍然可以繼續使用。
-
localStorage爲永久保存。
總結 :簡單區別如圖。
