導語：
開發或者面試過程中，我們總是會看到這三個東西，cookie，localstorage，sessionstorage，那他們到底是什麼呢？有有什麼區別呢？別急一分鐘教會你。

我們先看看對比表，然後再詳細分析。

特性	cookie	sessionStorage	localStorage
資料生命期	生成時就會被指定一個maxAge值，這就是cookie的生存週期，在這個週期內cookie有效，預設關閉瀏覽器失效	頁面對談期間可用	除非資料被清除，否則一直存在
存放資料大小	4K左右（因為每次http請求都會攜帶cookie）	一般5M或更大	一般5M或更大
與伺服器通訊	由對伺服器的請求來傳遞，每次都會攜帶在HTTP頭中，如果使用cookie儲存過多資料會帶來效能問題	資料不是由每個伺服器請求傳遞的，而是隻有在請求時使用資料，不參與和伺服器的通訊	資料不是由每個伺服器請求傳遞的，而是隻有在請求時使用資料，不參與和伺服器的通訊
易用性	cookie需要自己封裝setCookie，getCookie	可以用源生介面，也可再次封裝來對Object和Array有更好的支援	可以用源生介面，也可再次封裝來對Object和Array有更好的支援
共同點	都是儲存在瀏覽器端，和伺服器端的session機制不同	都是儲存在瀏覽器端，和伺服器端的session機制不同	都是儲存在瀏覽器端，和伺服器端的session機制不同

一，cookie

1，cookie簡介

cookie是存於使用者硬碟的一個檔案，這個檔案通常存放在我們的C槽中，這個檔案對應於一個域名，當瀏覽器再次存取這個域名時，這個cookie可以再次使用。

通常我們把它當成全域性變數，用於存放使用者在這個域名下的一些資訊（登陸狀態，瀏覽過程中留下的資訊），在每次跟伺服器端交流的過程中，都要攜帶過去，用於伺服器端驗證使用者端的身份。

2，cookie的作用

1. 儲存使用者登入狀態。例如將使用者id儲存於一個cookie內，這樣當使用者下次存取該頁面時就不需要重新登入了，現在很多的網址都是使用這樣的一種方式實現自動登入。
   不但如此，cookie還可以設定過期時間，當時間期限後，cookie就會自動刪除。所以我們可以設定這個自動登入可以儲存多長時間。
2. 儲存使用者的行為。比如，你用美團定位了一個常用城市，下次登入使用的時候，一般都會還是那個位置，這就是用cookie設定了你的常用位置，免除了你每用一次都要定位一次的麻煩。

3，cookie的缺點

1. cookie可能被使用者禁用，導致網址很多功能失效。
2. cookie可能被使用者刪除。我們再使用電腦管家清理電腦的時候，總是會顯示要不要把某個瀏覽器的cookie刪除，一些使用者就會把它刪除了；
3. cookie安全性不夠高。一些別有用心的使用者，可能會通過指令碼檢視自己的cookie，從而推理出別人的，冒充別人的身份，或者在網咖檢視cookie，盜取別人的賬號，但是cookie對於一些敏感性的資訊都可以加密儲存。

二，sessionStorage、localStorage

因為兩者比較相似，就一起介紹

1，sessionStorage簡介

它只是在頁面對談期間可用，當你的頁面關閉後，這個儲存就會自動刪除，下次存取不能獲取上次的資訊。

2，localStorage簡介

它除非資料被清除，否則將一直存在，所以下次存取也能夠獲取到上次的資訊。

3，sessionStorage和localStorage特點

1. sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。這一點跟cookie不一樣，sessionStorage和localStorage雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。
2. 它們有效期不同，sessionStorage僅在當前瀏覽器視窗關閉前有效，一關閉就沒有了。localStorage始終有效，瀏覽器關閉也一直儲存，所以可以用作持久資料。

補充：

微信搜尋【web小館】，回覆全棧部落格專案，即可獲取專案原始碼和後續的實戰文章教學。每天用最簡單樸實的語言，潛移默化的提升你的計算機基礎知識和前端技術。小米粥，一個專注的web全棧工程師，我們下期再見！