Cookie && Session && localStorage && sessionstorage && HTTP快取

omnoob 發表於 2019-07-16
Cookie localStorage

什麼是cookie

  1. 伺服器通過 Set-Cookie 頭給客戶端一串字串
  2. 客戶端每次訪問相同域名的網頁時,必須帶上這段字串
  3. 客戶端要在一段時間內儲存這個Cookie(windows C盤某檔案)
  4. Cookie 預設在使用者關閉頁面後就失效,後臺程式碼可以任意設定 Cookie 的過期時間
  5. 設定過期時間:response.setHeader('Cache-Control',' max-age=<seconds>
  6. 大小大概在 4kb 以內
  7. 前端永遠不要 讀/寫 cookie,用localStorage。
  8. 刪除 Cookie: 設定 → 清除瀏覽器資料 → 高階 勾選cookie及其他網站資料,點選清除資料即可

什麼是 session

  1. 將 SessionID(隨機數)通過 Cookie 發給客戶端
  2. 客戶端訪問伺服器時,伺服器讀取 SessionID
  3. 伺服器有一塊記憶體(雜湊表)儲存了所有 session
  4. 通過 SessionID 我們可以得到對應使用者的隱私資訊,如 id、email
  5. 這塊記憶體(雜湊表)就是伺服器上的所有 session
  6. session最大的問題就是 佔記憶體 !
  • 不基於 cookie 的 session :伺服器直接返回 sessionId ,前端直接把 sessionId 放到localStorage,當訪問主頁時,把sessionId當做查詢引數傳遞給伺服器。即 Session 可以用 LocalStorage + 查詢引數實現(超綱)

什麼是 localStorage (持久化儲存)

localStorage 是html5 提供的一個API,實質是一個雜湊表。(session是伺服器的雜湊表,localStorage是瀏覽器的雜湊表)

特點:

  1. LocalStorage 跟 HTTP 無關
  2. HTTP 不會帶上 LocalStorage 的值
  3. 只有相同域名的頁面才能互相讀取 LocalStorage(沒有同源那麼嚴格)
  4. 每個域名 localStorage 最大儲存量為 5Mb 左右(每個瀏覽器不一樣)
  5. 常用場景:記錄有沒有提示過使用者(沒有用的資訊,不能記錄密碼)
  6. LocalStorage 永久有效,除非使用者清理快取(windows C盤某檔案)

方法:

localStorage.clear(): 不接受引數,清空 localStorage
localStorage.getItem('引數1-key'): 接受一個引數,返回該引數對應的值。
localStorage.setItem('引數1-key', '引數2-value'): 接受兩個引數,向 localStorage 記憶體儲資訊。


什麼是 sessionstorage(會話儲存)

1、2、3、4 同
5. SessionStorage 在使用者關閉頁面(會話結束)後就失效。
其他所有特性都與 localStorage 一樣,方法也一樣。


HTTP快取

Cache-Control 是什麼

一般首頁不要設定Cache-Control,尤其是html。
只有相同的URl,瀏覽器才會去讀取Cache。
當頁面升級時,就改變URL,這樣就可以通過首頁這個介面讓瀏覽器下載到最新的內容。

功能:

  1. 可以讓瀏覽器在一定時間內不訪問伺服器,直接用本地記憶體/硬碟響應,加快訪問速度。
  2. 如果要升級,只需要在入口處(html檔案)把URL稍微變一下,瀏覽器就會去下載最新版,並快取下來。

補充:

瀏覽器快取詳解:expires,cache-control,last-modified,etag詳細說明

Expire 是什麼:

Expire 是設定 什麼時候過期,給了一個時間;但是這個時間是本地時間,如果本地時間錯亂就會出錯。
Cache-Control是新的API,取代了Expire,但是面試官會問。

MD5 是什麼

MD5 是一個摘要演算法。它把一個檔案變成一個字串,當這個檔案被篡改,再次計算 MD5 值就會發生變化。比如下載檔案,就可也比較雙方 MD5 值來確定下載的檔案是否正確。 MD5 會將小的差異擴大化,越小的差異,得到的 MD5 字串差異就越大。

MD5 和 HTML 有什麼關係呢? 就要看 ETag 。

ETag 是什麼

ETage可以給一個資源一個內容。

使用Cache-Control 是根本就不發請求;
用ETag是發請求,但是響應沒有第四部分(不下載),且程式碼為304。


面試一: cookie 與 session 有什麼關係?

  1. 一般來說,session 是基於 cookie 實現的,因為 session 必須把 sessionId 放在 cookie 裡,沒有 sessionId ,就沒有 session 。

面試二: cookie 與 localstorage 的區別是什麼?

  1. 每次請求的時候都會把 cookie 帶給伺服器,而 localStorage 不會帶給伺服器。因為 localStorage 與 http 無關。
  2. cookie 一般是 4kb, localStorage 一般是 5mb。

面試三: localStorage 和 sessionstorage 有什麼區別?

  1. SessionStorage 在使用者關閉頁面(會話結束)後就失效,而 LocalStorage 永久有效,除非使用者清理快取。

小知識

  1. ({}).toString() -> '[object, Object]'
    任何一個物件轉換成字串,都是變成這種形式。
    想要存物件,就使用json:
    localStorage.setItem('jsonString, JSON.stringify({name:'obj'}))