Session

cookie

1. 服務(wù)器通過(guò) Set-Cookie 頭給客戶(hù)端一串字符串
2. 客戶(hù)端每次訪(fǎng)問(wèn)相同域名的網(wǎng)頁(yè)時(shí)，必須帶上字符串
3. 客戶(hù)端需要在yi一段時(shí)間內(nèi)保存這個(gè) cookie
4. 默認(rèn)用戶(hù)關(guān)閉頁(yè)面之后就失效了，后臺(tái)代碼可以任意設(shè)置 Cookie 的過(guò)期時(shí)間

session

1. 將 SessionId（隨機(jī)數(shù)） 通過(guò) Cookie 發(fā)給客戶(hù)端
2. 客戶(hù)端訪(fǎng)問(wèn)服務(wù)器時(shí)，服務(wù)器讀取 SessionId
3. 服務(wù)器有一塊內(nèi)存（對(duì)象）保存了所有 session
4. 通過(guò) SessionId 我們可以得到對(duì)應(yīng)用戶(hù)的隱私信息，如 id、email...
5. 這塊內(nèi)存（哈希表）就是服務(wù)器上的所有 session

LocalStorage

html5 提供的一個(gè) api
localStorage.setItem(key,value) 添加數(shù)據(jù)
localStorage.getItem(key) 獲取數(shù)據(jù)
localStorage.clear() 清除數(shù)據(jù)

1. 持久化存儲(chǔ)

let a = localStorage.getItem('a')
if(!a){
  a = 0
}else{
  a = parseInt(a,10) + 1
}
console.log('a')
console.log(a)
localStorage.setItem('a',a)

每次刷新 a 的值會(huì)加1

2. 第一次進(jìn)入網(wǎng)站提示，之后不再提示

let already = localStorage.getItem('已經(jīng)提示')
if(!already){
  alert('網(wǎng)站改版了，添加了新功能:...')
  localStorage.setItem('已經(jīng)提示', true)
}

LocalStorage 特點(diǎn):

• LocalStorage 很 HTTP 無(wú)關(guān)
• HTTP 不會(huì)帶上 LocalStorage 的值
• 只有相同域名的頁(yè)面才能互相讀取 LocalStorage （沒(méi)有同源那么嚴(yán)格）
• 每個(gè) LocalStorage 的最大存儲(chǔ)量為 5MB 左右 （每個(gè)瀏覽器會(huì)有不同）
• 常用場(chǎng)景：記錄有沒(méi)有提示過(guò)用戶(hù)，記錄一些沒(méi)有用的記錄，不能記錄密碼
• LocalStorage 永久有效，除非用戶(hù)清除緩存

SessionStorage 特點(diǎn):
前四條同上，
SessionStorage 在用戶(hù)關(guān)閉后就失效了

cookie 和 session 的區(qū)別和聯(lián)系
一般來(lái)說(shuō)，Session是基于 Cookie 實(shí)現(xiàn)的，Session 必須將 SessionId 放到 Cookie里面，再發(fā)給客戶(hù)

1. cookie數(shù)據(jù)存放在客戶(hù)的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。
2. cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙
   考慮到安全應(yīng)當(dāng)使用session。
3. session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪(fǎng)問(wèn)增多，會(huì)比較占用你服務(wù)器的性能考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。
4. 單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。

LocalStorage 和 Cookie 的區(qū)別
HTTP 不會(huì)帶上 LocalStorage 的值，而 Cookie 會(huì)被帶上。單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K，LocalStorage 最大存儲(chǔ)量為 5MB 左右

LocalStorage 和 SessionStorage 的區(qū)別
SessionStorage 在用戶(hù)關(guān)閉（會(huì)話(huà)結(jié)束）后就失效了

HTTP緩存

Cache-Control
指明當(dāng)前資源的有效期，控制瀏覽器是否直接從瀏覽器緩存取數(shù)據(jù)還是重新發(fā)請(qǐng)求到服務(wù)器取數(shù)據(jù)。
值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age各個(gè)消息中的指令含義如下：

• Public指示響應(yīng)可被任何緩存區(qū)緩存。
• Private指示對(duì)于單個(gè)用戶(hù)的整個(gè)或部分響應(yīng)消息，不能被共享緩存處理。這允許服務(wù)器僅僅描述當(dāng)用戶(hù)的部分響應(yīng)消息，此響應(yīng)消息對(duì)于其他用戶(hù)的請(qǐng)求無(wú)效。
• no-cache指示請(qǐng)求或響應(yīng)消息不能緩存，該選項(xiàng)并不是說(shuō)可以設(shè)置”不緩存“，容易望文生義
• no-store用于防止重要的信息被無(wú)意的發(fā)布。在請(qǐng)求消息中發(fā)送將使得請(qǐng)求和響應(yīng)消息都不使用緩存，完全不存下來(lái)。
• max-age指示客戶(hù)機(jī)可以接收生存期不大于指定時(shí)間（以秒為單位）的響應(yīng)。
• min-fresh指示客戶(hù)機(jī)可以接收響應(yīng)時(shí)間小于當(dāng)前時(shí)間加上指定時(shí)間的響應(yīng)。
• max-stale指示客戶(hù)機(jī)可以接收超出超時(shí)期間的響應(yīng)消息。如果指定max-stale消息的值，那么客戶(hù)機(jī)可以接收超出超時(shí)期指定值之內(nèi)的響應(yīng)消息。

可以在后端設(shè)置，如：

response.setHeader('Cache-Control', 'max-age=30')

告知客戶(hù)端該資源在 30s 內(nèi)是新鮮的，無(wú)需向服務(wù)器發(fā)送請(qǐng)求。
如果需要更新緩存的話(huà)，只需要更改下請(qǐng)求的 url，只要不一樣就會(huì)重新請(qǐng)求。

和 Expires 區(qū)別
Expires 設(shè)置表示到什么時(shí)候過(guò)期，Cache-Control 表示多久過(guò)期。
同時(shí)設(shè)置的時(shí)候，Expire 會(huì)被忽略。

response.setHeader('Expires', 'Wed, 21 Oct 2015 07:28:00 GMT')
// 設(shè)置的是本地時(shí)間，容易混亂，所以?xún)?yōu)先用 Cache-Control

Cache-Control緩存 與 ETag 的「緩存」有什么區(qū)別
Cache-Control 設(shè)置時(shí)間段，在設(shè)置的時(shí)間段之內(nèi)不會(huì)向服務(wù)器發(fā)送請(qǐng)求
ETag 會(huì)請(qǐng)求，但是響應(yīng)體是空的