導語：
開發或者面試程序中，我們總是會看到這三個東西，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簡介
- 2，cookie的作用
- 3，cookie的缺點
- 二，sessionStorage、localStorage
- 1，sessionStorage簡介
- 2，localStorage簡介
- 3，sessionStorage和localStorage特點
一，cookie
1，cookie簡介
cookie是存于用戶硬碟的一個檔案，這個檔案通常存放在我們的C盤中，這個檔案對應于一個域名，當瀏覽器再次訪問這個域名時，這個cookie可以再次使用，
通常我們把它當成全域變數，用于存放用戶在這個域名下的一些資訊（登陸狀態，瀏覽程序中留下的資訊），在每次跟服務端交流的程序中，都要攜帶過去，用于服務端驗證客戶端的身份，
2，cookie的作用
- 保存用戶登錄狀態，例如將用戶id存盤于一個cookie內，這樣當用戶下次訪問該頁面時就不需要重新登錄了，現在很多的網址都是使用這樣的一種方式實作自動登錄，
不但如此，cookie還可以設定過期時間，當時間期限后，cookie就會自動洗掉，所以我們可以設定這個自動登錄可以保存多長時間， - 保存用戶的行為，比如，你用美團定位了一個常用城市，下次登錄使用的時候，一般都會還是那個位置，這就是用cookie設定了你的常用位置，免除了你每用一次都要定位一次的麻煩，
3，cookie的缺點
- cookie可能被用戶禁用，導致網址很多功能失效，
- cookie可能被用戶洗掉，我們再使用電腦管家清理電腦的時候，總是會顯示要不要把某個瀏覽器的cookie洗掉，一些用戶就會把它洗掉了；
- cookie安全性不夠高，一些別有用心的用戶，可能會通過腳本查看自己的cookie，從而推理出別人的，冒充別人的身份，或者在網吧查看cookie，盜取別人的賬號，但是cookie對于一些敏感性的資訊都可以加密儲存，
二，sessionStorage、localStorage
因為兩者比較相似，就一起介紹
1，sessionStorage簡介
它只是在頁面會話期間可用，當你的頁面關閉后，這個儲存就會自動洗掉，下次訪問不能獲取上次的資訊，
2，localStorage簡介
它除非資料被清除，否則將一直存在，所以下次訪問也能夠獲取到上次的資訊，
3，sessionStorage和localStorage特點
- sessionStorage和localStorage不會自動把資料發給服務器，僅在本地保存，這一點跟cookie不一樣，sessionStorage和localStorage雖然也有存盤大小的限制，但比cookie大得多，可以達到5M或更大，
- 它們有效期不同，sessionStorage僅在當前瀏覽器視窗關閉前有效，一關閉就沒有了，localStorage始終有效，瀏覽器關閉也一直保存，所以可以用作持久資料，
補充：
微信搜索【web小館】，回復全堆疊博客專案，即可獲取專案原始碼和后續的實戰文章教程，每天用最簡單樸實的語言，潛移默化的提升你的計算機基礎知識和前端技術，小米粥，一個專注的web全堆疊工程師，我們下期再見！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/166621.html
標籤：其他