Cookie、Session和LocalStorage

前記

前面我已經寫了一篇關於Cookie的文章，可是那時候我其實理解的並非很深入，會有些搞不懂的地方，今天我就再寫一次，博客也是個人學習筆記

Cookie

Cookie是服務器發送到用戶瀏覽器並保存在本地的一小塊數據，它會在瀏覽器下次向同一服務器再發起請求時被攜帶併發送到服務器上。一般，它用於告知服務端兩個請求是否來自同一瀏覽器，如保持用戶的登陸狀態。Cookie使基於無狀態的HTTP協議記錄穩定的狀態信息成爲了可能。

Cookie如何設置

Cookie的設置是在服務端來操做的，用戶訪問服務器，服務器響應中響應頭帶上

response.setHeader('Cookie', 'Max-Age=<non-zero-digit> ')//設置過時時間

Cookie的特性

1. Cookie的默認是隨着用戶關閉時過時，可是服務器能夠設置Cookie的使用時間還有過時時間
2. Cookie能夠設置HttpOnly來使用戶不能經過JS來操做Cookie，HttpOnly類型的Cookie在必定程度上緩解XSS類攻擊。
3. 標記爲 Secure 的Cookie只應經過被HTTPS協議加密過的請求發送給服務端。

Cookie的缺陷

就像上面Cookie的特性中的二、3條說的，Cookie並不安全，由於Cookie若是包含着重要信息被人記錄或者篡改，那就能夠對用戶的帳戶進行操做，因此爲了改善這一個問題，就要用到接下來講的Session

Cookie總結

一、服務器經過Set-Cookie頭給客戶端一串字符串
二、客戶端每次訪問相同域名的網頁時必須帶上這段字符串
三、客戶端要在一段時間內保存這個Cookie
四、Cookie默認在用戶關閉時過時，後臺能夠設置Cookie存在時間
五、能夠在控制檯的Application中強制刪除Cookie

Session

Session並非HTTP協議中的一部分，Session是一個抽象的概念，是用來解決Cookie來標識用戶而泄漏隱祕信息的一種方法，而且由於實現了中斷和繼續操做而叫‘會話’

Session的實現

1. 服務器經過Cookie給用戶一個SessionId
2. SessionId對應着服務器中的一小塊內存，這塊內存存着用戶的隱祕信息
3. 每次用戶訪問服務器的時候，服務期就經過SessionId去讀取對應的內存，就知道了用戶的隱祕信息

Session的缺陷

從上面能夠看出，Session最大的缺陷就是佔服務器的內存

Session的總結

一、將SessionId（通常就是一個隨機數）經過Cookie發給客戶端
二、客戶端訪問服務器時，服務器讀取SessionId
三、服務器有一塊內存（對象）保存了全部的Session
四、痛毆SessionId咱們能夠獲得對應用戶的隱私信息，如id，email
五、這塊內存（哈希）就是服務器上的Session

Session不使用Cookie的實現方法

1. 不寫Cookie，將SessionId返回給JS，經過JSON返回給前端
2. 前端拿到這個響應將其變成對象
3. 將這個SessionId存到LocalStorage中
4. 頁面跳轉登陸後，將SessionId寫到查詢參數中，後臺經過查詢參數知道當前的SessionId
5. 而後經過SessionId去Session中查找出用戶的信息

Session和Cookie的區別

從上面的內容中就能夠發現，Session和Cookie的區別很大
首先Cookie是HTTP協議中的一部分，而Session是一個抽象的概念
而後Session是存放在服務器的內存中，而Cookie是存放在本地
最後Session通常是依賴於Cookie的，SessionId是經過 Cookie 發送給客戶端的

LocalStorage

LocalStorage是HTML5提供的新的API，LocalStorage也是一個哈希，是一個存在瀏覽器上的哈希

LocalStorage的使用方法

用戶設置的使用方法

localStorage.setItem('a', '1')

用戶如何獲取存的對象

localStorage.getItem('a')

用戶如何清理

localStorage.clear()

LocalStorage的總結

1. LocalStorage跟HTTP無關
2. 只有相同域名的頁面才能互相讀取LocalStorage（沒有同源那麼嚴格）
3. 每一個域名的LocalStorage最大存儲量爲5M左右（由瀏覽器決定）
4. 經常使用場景：記錄有沒有提示過用戶（沒有用的信息，不能記錄密碼）
5. LocalStorage存儲的信息永遠有效，除非用戶清除

SessionStorage和LocalStorage的區別

一、二、三、4條同上，可是SessionStorage在用戶關閉頁面後就失效了

LocalStorage和Cookie的區別

從上面也能夠看出

1. LocalStorage 不會隨 HTTP 發給 Server
2. LocalStorage 的大小限制比 Cookie（4K） 大多了

LocalStorage存在的緣由

因爲歷史遺留問題，之前全部信息都放到Cookie中，可是每次請求都要帶上Cookie，所以會上傳不少無用的東西，影響速度，所以做爲一個前端不要讀寫Cookie

想說的話

正式學習前端已經快三個月了，一步步深刻就總感受本身學的不夠，本身很垃圾，可是幸虧我能感受到我有東西能夠學，因此，在沒學完的那一刻，我是不會停下來的，加油