這是WebStorage原文
這是HTTP緩存原文
圖解 HTTP 緩存
WebStorage：
localStorage在本地永久性存儲(chǔ)數(shù)據(jù)脱衙，除非顯式將其刪除或清空
sessionStorage存儲(chǔ)的數(shù)據(jù)只在會(huì)話期間有效胃夏，關(guān)閉瀏覽器則自動(dòng)刪除
API
length:唯一的屬性，只讀淑蔚，用來(lái)獲取storage內(nèi)的鍵值對(duì)數(shù)量琴庵。
key：根據(jù)index獲取storage的鍵名
getItem：根據(jù)key獲取storage內(nèi)的對(duì)應(yīng)value
setItem：為storage內(nèi)添加鍵值對(duì)
removeItem：根據(jù)鍵名肢扯，刪除鍵值對(duì)
clear：清空storage對(duì)象
var ls=localStorage;
console.log(ls.length);//0
ls.setItem('name','Byron');
ls.key(0)
ls.getItem(key)
ls.removeItem('age');
ls.clear();
事件
/*key:鍵值對(duì)的鍵
oldValue：修改之前的value
newValue：修改之后的value
url：觸發(fā)改動(dòng)的頁(yè)面url
StorageArea：發(fā)生改變的Storage*/
window.addEventListener('storage',function(e){
console.log(e.key+' is changed form '+e.oldValue+' to '+e.newValue+' by '+e.url );
console.log(e.storageArea ==localStorage);
},false);
HTTP緩存
瀏覽器向服務(wù)器請(qǐng)求數(shù)據(jù)妒茬，發(fā)送請(qǐng)求(request)報(bào)文；
服務(wù)器向?yàn)g覽器返回?cái)?shù)據(jù)蔚晨，返回響應(yīng)(response)報(bào)文
報(bào)文信息主要分為兩部分
| 包含屬性的首部(header) | 附加信息（cookie乍钻，緩存信息等）與緩存相關(guān)的規(guī)則信息，均包含在header中 |
|---|---|
| 包含數(shù)據(jù)的主體部分(body) | HTTP請(qǐng)求真正想要傳輸?shù)牟糠?/td> |
HTTP緩存規(guī)則
強(qiáng)制緩存優(yōu)先級(jí)高于對(duì)比緩存
-
強(qiáng)制緩存
強(qiáng)制緩存 -
對(duì)比緩存,協(xié)商緩存
對(duì)比緩存
HTTP緩存圖示
header強(qiáng)緩存
- Expires
Expires 的值是一個(gè) HTTP 日期铭腕。
在瀏覽器發(fā)起請(qǐng)求時(shí)银择，會(huì)根據(jù)系統(tǒng)時(shí)間和 Expires 的值進(jìn)行比較，如果系統(tǒng)時(shí)間超過(guò)了 Expires 的值累舷，緩存失效浩考。
由于和系統(tǒng)時(shí)間進(jìn)行比較，所以當(dāng)系統(tǒng)時(shí)間和服務(wù)器時(shí)間不一致的時(shí)候被盈，會(huì)有緩存有效期不準(zhǔn)的問(wèn)題析孽。
Expires 的優(yōu)先級(jí)在三個(gè) Header 屬性中是最低的搭伤。
- Cache-Control
Cache-Control 是最重要的規(guī)則。
常見(jiàn)的取值有private袜瞬、public怜俐、no-cache、max-age邓尤，no-store拍鲤，默認(rèn)為private。
private: 客戶端可以緩存
public: 客戶端和代理服務(wù)器都可緩存（前端的同學(xué)汞扎，可以認(rèn)為public和private是一樣的）
max-age=xxx: 緩存的內(nèi)容將在 xxx 秒后失效
no-cache: 需要使用對(duì)比緩存來(lái)驗(yàn)證緩存數(shù)據(jù)（后面介紹）
no-store: 所有內(nèi)容都不會(huì)緩存季稳，強(qiáng)制緩存，對(duì)比緩存都不會(huì)觸發(fā)（對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)澈魄，緩存越多越好景鼠，so...基本上和它說(shuō)886）
- Pragma
Pragma 只有一個(gè)屬性值，就是 no-cache 一忱，效果和 Cache-Control 中的 no-cache 一致莲蜘，不使用強(qiáng)緩存，需要與服務(wù)器驗(yàn)證緩存是否新鮮帘营，在 3 個(gè)頭部屬性中的優(yōu)先級(jí)最高。
header協(xié)商緩存
- Etag / If-None-Match（優(yōu)先級(jí)高于
Last-Modified / If-Modified-Since）
ETag/If-None-Match 的值是一串 hash 碼逐哈，代表的是一個(gè)資源的標(biāo)識(shí)符芬迄。
當(dāng)服務(wù)端的文件變化的時(shí)候，它的 hash碼會(huì)隨之改變昂秃，通過(guò)請(qǐng)求頭中的 If-None-Match 和當(dāng)前文件的 hash 值進(jìn)行比較禀梳，如果相等則表示命中協(xié)商緩存。
ETag 又有強(qiáng)弱校驗(yàn)之分肠骆，如果 hash 碼是以 "W/" 開(kāi)頭的一串字符串算途，說(shuō)明此時(shí)協(xié)商緩存的校驗(yàn)是弱校驗(yàn)的，只有服務(wù)器上的文件差異（根據(jù) ETag 計(jì)算方式來(lái)決定）達(dá)到能夠觸發(fā) hash 值后綴變化的時(shí)候蚀腿，才會(huì)真正地請(qǐng)求資源嘴瓤，否則返回 304 并加載瀏覽器緩存。
- Last-Modified / If-Modified-Since
Last-Modified/If-Modified-Since 的值代表的是文件的最后修改時(shí)間莉钙。
第一次請(qǐng)求服務(wù)端會(huì)把資源的最后修改時(shí)間放到 Last-Modified 響應(yīng)頭中廓脆，第二次發(fā)起請(qǐng)求的時(shí)候，請(qǐng)求頭會(huì)帶上上一次響應(yīng)頭中的 Last-Modified 的時(shí)間磁玉，并放到 If-Modified-Since 請(qǐng)求頭屬性中停忿。
服務(wù)端根據(jù)文件最后一次修改時(shí)間和 If-Modified-Since 的值進(jìn)行比較，如果相等蚊伞，返回 304 席赂，并加載瀏覽器緩存吮铭。
