Session, LocalStorage ,Cache-Control

code_susu 發表於 2018-07-29
localStorage

Session

伺服器通過 Set-Cookie給使用者一個sessionId
sessionId對應伺服器內的一小塊記憶體
每次使用者訪問伺服器的時候,伺服器就聽過SessionId去讀取對應的session
從而知道使用者的資訊

sessionId的篡改就很難了,因為使用者得到的只是一個隨機數而已

session其實就是一塊記憶體
複製程式碼
  1. 為什麼要使用Session?
我們在登入成功之後,後端會將使用者資訊存入到資料庫,然後在迴應裡面會寫入一個欄位:
"Set-Cookie:'這裡是使用者名稱+密碼或者其他使用者資訊'"

自此之後,客戶端的每一次請求都會自動帶上這段cookie資訊
但是,會有一個問題就是,cookie有可能會被篡改,如果被篡改了的話,資訊就亂了,
比如,使用者只要改下cookie中的使用者名稱,就可以以另外一個身份登入了。

複製程式碼
  1. 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發給客戶端
複製程式碼
  1. Cookie與LocalStorage的區別?
最大的區別就是Http每次請求不會帶上LocalStorage的值,但是會帶上Cookie的值
複製程式碼
  1. LocalStorage 與 SessionStorage的區別?

也可以不基於Cookie的Session

Session是基於Cookie實現的,那麼有沒有不基於Cookie的Session呢?

後端在使用者登入之後,伺服器就為它生成一個SessionId ,然後以迴應的內容返回給客戶端,
然後客戶端每次傳送請求的時候,把獲取到的SessionId放在請求引數中,

複製程式碼

Http快取(Cache-Control)

Session, LocalStorage ,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 你就是不會讀取快取了,每次都會去請求資源
複製程式碼

Session, LocalStorage ,Cache-Control

注意:頁面的首頁最好不要設定Cache-Control: max-age=30,

為什麼呢?

首頁設定了快取,使用者沒辦法獲取到最新的程式碼,

如果想要更新快取的話,給js或者css的請求地址後加一個隨機的查詢引數,這樣每次請求的url就不一樣了,就可以就可以更新快取了

如下圖所示:

Session, LocalStorage ,Cache-Control

Exipres

如果設定了Cache-Control,那麼exipres就失效了 ,
以前設定快取用Expires現在用Cache-Control
複製程式碼

Session, LocalStorage ,Cache-Control

Cache-Control表示多久之後過期,Expires:代表什麼時候過期

但是Expires表示的是本地時間,所以如果使用者更改本地時間的話,那你設定的快取很可能就無用了,不靠譜了。

Last-Modified

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

MD5

摘要演演算法

檔案差異越小,md5算出來的值得差異越大

Session, LocalStorage ,Cache-Control

Etag

Session, LocalStorage ,Cache-Control
如果瀏覽器發現上一次的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要更優,因為它直接就不請求了

相關文章