淺析cookie、session、localStorage、sessionStorage之不一樣

基本概念

Cookie

• Cookie顧名思義，小甜餅，小餅乾的意思，它的小主要定義在數據大小限制爲4KB左右，它的做用可謂是十分的強大了。Cookie是網站爲了標識用戶身份而存儲在客戶端的一個存儲技術，同時它還能作用戶的身份驗證。

Session

• Session翻譯過來的意思是會話，它在先後端中的意思能夠理解爲數據的存儲形式，它可以配合cookie實現用戶身份的驗證，而在本篇文章的後面說起到的sessionStroage，是一個前端概念，它能夠將一部分數據在當前的會話窗口中保存下來，刷新頁面數據依舊存在。但當頁面關閉後，sessionStorage中的數據會被清空的，能夠理解爲當前會話窗口已關閉。

聊一聊cookie和session的區別

Cookie

cookie一般用於先後端進行身份驗證的時候，標記用戶的身份不同凡響。說到cookie的做用，爲何要使用cookie，那就可能會說到http了，由於http是一種無狀態的協議，無狀態(你們能夠理解爲我上一秒登錄完網站，下一秒服務器再次收到訪問網站請求的時候，它不認識你了，須要再次登錄，也能夠說是不知道哪一個客戶端向服務器發送了請求)這就會致使一種狀況出現：某個同窗剛登錄完淘寶，跳轉到購物車界面，加入完購物車的時候，須要再次登錄，想一想這種用戶體驗真的是太差了~因此Cookie誕生了。

Cookie的缺點

可是cookie不是很安全，由於別人能夠分析存放在本地的cookie並進行惡意使用，天然而然咱們想到了網站漏洞XSS攻擊(跨站腳本攻擊)，它的原理：攻擊者往web頁面裏插入惡意的腳本代碼(css,js)當用戶瀏覽該頁面時，嵌入其中的腳本代碼會執行，從而達到惡意攻擊用戶的目的，從而盜取cookie，破壞頁面結構,這就須要咱們在cookie字段中加入HttpOnly屬性，保護好cookie，或者咱們能夠利用session，在服務器端用session去管理cookie

session是什麼哇

session是由cookie進行標記的，將cookie裏的數據保存在服務器端,當須要記住用戶時，好比前面說的登錄，在服務器端會設置一個響應頭Set-Cookie，返回給客戶端，例如：Set-Cooki:SESSIONID=654321；客戶端接收到這個響應後，此後每次發送一個請求，瀏覽器都會自動帶上Cookie請求頭這個小餅乾，小印記，對應內容則是Cookie:ESSIONID=654321,在服務器端存有session，之後每次客戶端發送請求的時候都會與服務器端的session進行對比，若是對上了，就能夠識別是哪一個客戶端發來的請求了。

session的缺點

由於session在服務器端存儲，會出現什麼的狀況呢？當一年一度的淘寶雙11來臨時，淘寶官網無疑會被大量訪問，當同一個域名被大量訪問時，一個域名下的衆多服務器保存着一樣的session，這樣session所佔的內存不可思議，這樣會下降服務器的性能，考慮到服務器的性能優化

解決辦法：
(1)共享session
將session提取出來，集中存放管理
(2)token令牌驗證
客戶端與服務器端的通訊服務不須要存儲，當進行通訊交互時，能夠經過解析token裏面的信息來判斷是否登錄。token裏面能夠攜帶cookie解析出來的信息，這樣每次請求時添加一個token驗證，就能夠達到優化服務器性能的效果了。

安全性的考慮

須要注意的是，不是什麼數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，須要時刻注意是否有代碼存在 XSS 注入的風險。

我的建議：

• 像登錄註冊這樣的重要、敏感信息應當保存在session中
  
• 其次臨時須要信息能夠存儲在cookie中

localStorage、sessionStorage的異同

特性	Cookie	LocalStorage	sessionStorage
數據的生命週期	通常由服務器端生成 可設置失效時間。如 果在瀏覽器生成,默認 是關閉瀏覽器以後失效	一旦存入， 除非清除， 不然永久保存	僅在當前會話有效， 關閉頁面或瀏覽器後被清除
存放數據大小	4KB	通常爲5MB	通常爲5MB
與服務器端通訊	每次都會攜帶在同源 的http請求頭中,若是 使用cookie保存過多 數據會帶來性能問題的	僅在客戶端中保存 不參與服務器之間的通訊	僅在客戶端中保存 不參與服務器之間的通訊
用途	服務器端生成， 用於標識用戶身份	用於瀏覽器緩存數據	用於瀏覽器緩存數據

localStorage、sessionStorage的操做方法

setItem存儲value

用途：將value存儲到key字段

{  sessionStorage.setItem("key", "value");       localStorage.setItem("site", "lsh");  }

getItem獲取value

用途：獲取指定key本地存儲的值

{  var value = sessionStorage.getItem("key");      var site = localStorage.getItem("site");  }

removeItem刪除key

用途：刪除指定key本地存儲的值

{  sessionStorage.removeItem("key");     localStorage.removeItem("site");  }

clear清除全部的key/value

用途：清除全部的key/value

{  sessionStorage.clear();     localStorage.clear();  }

---

做者：大三前端小白一枚，由於本身正在準備面試，因此本身參考別處整理了一些關於本地存儲和身份驗證的知識；歡迎掘金裏的前端大牛，前輩們，老師們前來指導，我會虛心學習和繼續努力探索前端技術奧祕的~~

出處：

• blog.csdn.net/justlpf/art… blog.csdn.net/qq_35585701…