cookie，session和localstorage，sessionStorage的區別
阿新 • • 發佈：2018-11-01
cookie
cookie 是儲存於訪問者的計算機中的變數。每當同一臺計算機通過瀏覽器請求某個頁面時，就會發送這個 cookie。你可以使用 JavaScript 來建立和取回 cookie 的值。
當訪問者首次訪問頁面時，他或她也許會填寫他/她們的名字。名字會儲存於 cookie 中。當訪問者再次訪問網站時，他們會收到類似 "Welcome Jacob!" 的歡迎詞。而名字則是從 cookie 中取回的。這通常就是通過在 cookie 中存入一段辨別使用者身份的資料來實現的。
在HTML5之前，這些都是由 cookie 完成的。但是 cookie 不適合大量資料的儲存，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在HTML5中提供了兩種在客戶端儲存資料的新方法：
sessionStorage
為每一個給定的源（given origin）維持一個獨立的儲存區域，該儲存區域在頁面會話期間可用（即只要瀏覽器處於開啟狀態，包括頁面重新載入和恢復）。
localStorage
同樣的功能，但是在瀏覽器關閉，然後重新開啟後，除非資料被清除，否則仍然存在。
區別
| 特性 | cookie | sessionStorage | localStorage |
|---|---|---|---|
| 資料生命期 | 生成時就會被指定一個maxAge值，這就是cookie的生存週期，在這個週期內cookie有效，預設關閉瀏覽器失效 | 頁面會話期間可用 | 除非資料被清除，否則一直存在 |
| 存放資料大小 | 4K左右（因為每次http請求都會攜帶cookie） | 一般5M | |
| 與伺服器通訊 | 由對伺服器的請求來傳遞，每次都會攜帶在HTTP頭中，如果使用cookie儲存過多資料會帶來效能問題 | 資料不是由每個伺服器請求傳遞的，而是隻有在請求時使用資料，不參與和伺服器的通訊 | |
| 易用性 | cookie需要自己封裝setCookie，getCookie | 可以用源生介面，也可再次封裝來對Object和Array有更好的支援 | |
| 共同點 | 都是儲存在瀏覽器端，和伺服器端的session機制不同 | ||
> 安全性問題
無論是cookie還是HTML5的本地儲存，都是相對不安全的，很容易受到各種各樣的攻擊，特別是HTML5的儲存空間大，給了攻擊者更大的發揮平臺，所以都不能用來儲存敏感資訊。登入資訊等重要資訊還是存放到伺服器裡比較好。