Session, LocalStorage ,Cache-Control

Session

服務器經過 Set-Cookie給用戶一個sessionId
sessionId對應服務器內的一小塊內存
每次用戶訪問服務器的時候，服務器就聽過SessionId去讀取對應的session
從而知道用戶的信息

sessionId的篡改就很難了，由於用戶獲得的只是一個隨機數而已

session其實就是一塊內存
複製代碼

1. 爲何要使用Session？

咱們在登陸成功以後，後端會將用戶信息存入到數據庫，而後在迴應裏面會寫入一個字段：
"Set-Cookie:'這裏是用戶名+密碼或者其餘用戶信息'"

自此以後，客戶端的每一次請求都會自動帶上這段cookie信息
可是，會有一個問題就是，cookie有可能會被篡改，若是被篡改了的話，信息就亂了，
好比，用戶只要改下cookie中的用戶名，就能夠以另一個身份登陸了。

複製代碼

2. Session的使用？

在用戶登陸成功以後，服務器會在內存中寫入一個sessionId，是一個隨機數
而後這個sessionId 對應的就是用戶的登陸信息。
而後再將這個sessionId以迴應信息回傳給客戶端，
經過Set-Cookie: sessionId('2678613863'),寫入瀏覽器。

之後，瀏覽器再次請求的時候 就是帶上這個sessionId給服務器，服務器通
過查看客戶端帶上來的cookie裏面的這個sessionId
去尋找該用戶的登陸信息，若是找到的話，就是已是登陸成功了，若是沒有找到的話
那就是沒有這個用戶須要註冊的了
複製代碼

總結Cookie與Session：

Cookie

1. 服務器經過Set-Cookie頭給客戶端一段字符串
2. 客戶端每次訪問相同域名的網頁的時候，必須帶上這段字符串
3. 客戶端要在一段時間內保存這個Cookie
注意：前端不要寫Cookie,影響性能
複製代碼

Session

1. 將SessionId經過Cookie發給客戶端
2. 客戶端訪問服務器時，服務器讀取SessionId
3. 服務器中有一塊內存（哈希表）保存了全部session
4. 經過SessionId咱們能夠獲得對應用戶的隱私信息，如用戶名密碼等
複製代碼

LocalStorage

localStorage是html5提供的一個API,localStorage的實質是一個哈希

Session是服務器的哈希表

localStorage是瀏覽器的哈希表

localStorage只能存字符串

localStorage的值實際上是存在c盤的文件裏面

1. LocalStorage與Http無關
2. Http每次請求不會帶上LocalStorage的值
3. 只有相同域名的頁面才能互相讀取LocalStorage（這個功能由瀏覽器完）
4. 每一個域名LocalStorage最大存儲量爲5MB左右，每一個瀏覽器不同
5. LocalStorage永久有效，除非清楚
複製代碼

SessionStorage

1,2,3,4同localStorage，

不一樣的是，SessionStorage在用戶關閉頁面後就失效

面試相關

1. Cookie與Session有什麼關係？

通常來講，Session是基於Cookie實現的，Session依賴於Cookie將SessionId發給客戶端
複製代碼

2. Cookie與LocalStorage的區別？

最大的區別就是Http每次請求不會帶上LocalStorage的值，可是會帶上Cookie的值
複製代碼

3. LocalStorage 與 SessionStorage的區別？

也能夠不基於Cookie的Session

Session是基於Cookie實現的，那麼有沒有不基於Cookie的Session呢？

後端在用戶登陸以後，服務器就爲它生成一個SessionId ,而後以迴應的內容返回給客戶端，
而後客戶端每次發送請求的時候，把獲取到的SessionId放在請求參數中，

複製代碼

Http緩存（Cache-Control）

(上圖爲後端返回值)

Cache-Control: max-age=3600 意思是：3600s內不要再次請求，即緩存3600s
(大部分是設置了一年)
Cache-Control是http寫入客戶端的，這個能夠加快頁面下載速度

例子：
好比咱們要請求一個main.js，客戶端第一次去請求的時候，大概花了1s鐘的時間，
而後服務器接受到請求以後，經過 將Cache-Control: 30 （默認單位爲s），
傳回給瀏覽器，那麼在30s內，咱們再刷新頁面時，瀏覽器就會阻隔請求，
會直接從緩存中讀取這個js,過了30s以後纔會去從新發起請求
咱們能夠看到下圖，第二次請求的時候只有0s，這將會極大地提高頁面打開速度

若是勾選了 Disable cache 你就是不會讀取緩存了，每次都會去請求資源
複製代碼

注意：頁面的首頁最好不要設置Cache-Control: max-age=30，

爲何呢？

首頁設置了緩存，用戶沒辦法獲取到最新的代碼，

若是想要更新緩存的話，給js或者css的請求地址後加一個隨機的查詢參數，這樣每次請求的url就不同了，就能夠就能夠更新緩存了

以下圖所示：

Exipres

若是設置了Cache-Control,那麼exipres就失效了 ，
之前設置緩存用Expires如今用Cache-Control
複製代碼

Cache-Control表示多久以後過時，Expires:表明何時過時

可是Expires表示的是本地時間，因此若是用戶更改本地時間的話，那你設置的緩存極可能就無用了，不靠譜了。

Last-Modified

上一次的修改時間 Last-Modified: Thu, 26 Jul 2018 09:10:00 GMT

MD5

摘要演算法

文件差別越小，md5算出來的值得差別越大

Etag

若是瀏覽器發現上一次的md5與這一次傳過來的Md5一致，那麼就會返回一個響應頭 'if-none-match=MD5(string)'

Etag與Cache-Control的區別

Cache-Control是緩存了以後，在緩存時間以內就再也不請求，

然而Etag是請求了以後，發現MD5同樣，就返回一個'if-none-match=MD5(string)'這個響應頭，若是存在這個，就直接不下載內容（好比js或者css等）

總結一下就是用Cache-Control後直接不請求，用了Etag就不下載可是仍是會下載的

Cache-Control要更優，由於它直接就不請求了