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

omnoob發表於2019-07-16
CookieSessionHTTP快取

什麼是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'}))

相關文章