Cookie && Session && localStorage && sessionstorage && HTTP緩存

什麼是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（會話存儲）

一、二、三、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'}))