Cookie、sessionStorage、localStorage的區別

這是我參與更文挑戰的第8天，活動詳情查看：更文挑戰瀏覽器

emmm...固然不是上面的小 cookie 啦安全

客戶端能夠經過 cookie 與服務端進行數據交互，WebStorage 能夠克服由cookie所帶來的一些限制，當數據須要被嚴格控制在客戶端時，不須要持續的將數據發回服務器，提供一種cookie以外存儲大量能夠跨會話存在的數據的方式。服務器

Cookie

cookie 數據始終在同源的http請求中攜帶，即 cookie 在瀏覽器和服務器間來回傳遞。cookie 數據還有路徑（path）的概念，能夠限制 cookie 只屬於某個路徑下，存儲的大小很小隻有4K左右。（key：能夠在瀏覽器和服務器端來回傳遞，存儲容量小，只有大約 4 KB 左右）。markdown

localStorage

localStorage 是 HTML5 標準中新加入的技術，localStorage 不會自動把數據發給服務器，僅在本地保存。數據始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據。cookie

sessionStorage

sessionStorage 與 localStorage 的接口相似，但保存數據的生命週期與 localStorage 不一樣。僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持。session

上圖對比

場景

由於考慮到每一個 HTTP 請求都會帶着 Cookie 的信息，因此 Cookie 固然是能精簡就精簡啦佈局

比較經常使用的一個應用場景就是判斷用戶登陸狀態，例如將用戶id存儲於一個cookie內，服務器端會在他登陸時往 Cookie 中插入一段加密過的惟一辨識單一用戶的辨識碼，這樣當用戶下次只要讀取這個值就能夠判斷當前用戶是否登陸，如今不少論壇和社區都提供這樣的功能。 cookie還能夠設置過時時間，當超過期間期限後，cookie就會自動消失。所以，系統每每能夠提示用戶保持登陸狀態的時間：常見選項有一個月、三個月、一年等。post

還能夠用來跟蹤用戶行爲，例如一個天氣預報網站，可以根據用戶選擇的地區顯示當地的天氣狀況。若是每次都須要選擇所在地是煩瑣的，當利用了cookie後就會顯得很人性化了，系統可以記住上一次訪問的地區，當下次再打開該頁面時，它就會自動顯示上次用戶所在地區的天氣狀況。由於一切都是在後臺完成，因此這樣的頁面就像爲某個用戶所定製的同樣，使用起來很是方便定製頁面。若是網站提供了換膚或更換佈局的功能，那麼可使用cookie來記錄用戶的選項，例如：背景色、分辨率等。當用戶下次訪問時，仍然能夠保存上一次訪問的界面風格。優化

曾經還使用 Cookie 來保存用戶在電商網站的購物車信息，現在有了 localStorage 接替 Cookie 管理購物車的工做，同時也能勝任其餘一些工做。好比HTML5遊戲一般會產生一些本地數據，localStorage 也是很是適用的。若是遇到一些內容特別多的表單，爲了優化用戶體驗，咱們可能要把表單頁面拆分紅多個子頁面，而後按步驟引導用戶填寫。這時候 sessionStorage 的做用就發揮出來了。網站

安全性

須要注意的是，不是什麼數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，須要時刻注意是否有代碼存在 XSS 注入的風險。由於只要打開控制檯，你就隨意修改它們的值，也就是說若是你的網站中有 XSS 的風險，它們就能對你的 localStorage 肆意妄爲。因此千萬不要用它們存儲你係統中的敏感數據。

共同點

Cookie、localStorage 和 sessionStorage 都是保存在瀏覽器端，而且是同源的。