摘要：一緩存瀏覽器緩存分為強(qiáng)緩存和協(xié)商緩存。然后瀏覽器收到響應(yīng)后，會(huì)把這個(gè)以及響應(yīng)的資源一起緩存下來。語法保存數(shù)據(jù)到從獲取數(shù)據(jù)從刪除保存的數(shù)據(jù)從刪除所有保存的數(shù)據(jù)參考鏈接九種瀏覽器端緩存機(jī)制知多少瀏覽器緩存知識(shí)小結(jié)及應(yīng)用瀏覽器緩存機(jī)制剖析

這篇文章只是對(duì)我覺得常用的緩存方法的學(xué)習(xí)記錄。我是通過參考下面參考資料做的總結(jié)，大家可以直接看參考鏈接里的文章，他們的記錄更全面且?guī)D。

瀏覽器緩存分為：強(qiáng)緩存和協(xié)商緩存。
強(qiáng)緩存和協(xié)商緩存并不是平行關(guān)系，協(xié)商緩存是強(qiáng)緩存的基礎(chǔ)上增強(qiáng)的緩存功能。

強(qiáng)緩存的過程：
第一次請(qǐng)求：瀏覽器第一次發(fā)送請(qǐng)求到服務(wù)器，服務(wù)器會(huì)把response header里加上Expires和Cache-Control:max-age=365000000，這兩個(gè)請(qǐng)求頭中的一個(gè)或兩個(gè)。
然后：瀏覽器收到響應(yīng)后，會(huì)把這個(gè)response header以及響應(yīng)的資源一起緩存下來。

下一次請(qǐng)求時(shí)：瀏覽器根據(jù)這兩個(gè)請(qǐng)求頭的值計(jì)算當(dāng)前時(shí)間這個(gè)緩存是否過期，如果不過期就直接響應(yīng)緩存內(nèi)容而不用向服務(wù)器發(fā)送請(qǐng)求獲取資源。

（Expires，它的值是GMT格式的過期的絕對(duì)時(shí)間，例如是2019年的6月23日 12:00:00 過期，這樣等客戶端的時(shí)間過了這個(gè)時(shí)間，這個(gè)緩存就會(huì)過期。Cache-Control:max-age=365000000，這個(gè)請(qǐng)求頭的max-age的值是一個(gè)時(shí)間段，也就是說，它保存的是相對(duì)時(shí)間，每次請(qǐng)求時(shí)，瀏覽器會(huì)用客戶端時(shí)間減去第一次請(qǐng)求時(shí)的時(shí)間，大于這個(gè)相對(duì)時(shí)間段，則過期，需要重新請(qǐng)求資源）

協(xié)商緩存的過程：
第一次請(qǐng)求：瀏覽器第一次發(fā)送請(qǐng)求到服務(wù)器，服務(wù)器除了會(huì)把response header里加上強(qiáng)緩存的配置項(xiàng)（Expires｜Cache-Control），還會(huì)把協(xié)商緩存的配置項(xiàng)加入（Last-Modified｜ETag）（Last-Modified是資源最后一次更新的時(shí)間。ETag這個(gè)header是服務(wù)器根據(jù)當(dāng)前請(qǐng)求的資源生成的一個(gè)唯一標(biāo)識(shí)，這個(gè)唯一標(biāo)識(shí)是一個(gè)字符串，只要資源有變化這個(gè)串就不同，跟最后修改時(shí)間沒有關(guān)系）
然后：瀏覽器收到響應(yīng)后，會(huì)把這個(gè)response header以及響應(yīng)的資源一起緩存下來。

下一次請(qǐng)求時(shí)：瀏覽器會(huì)先判斷強(qiáng)緩存是否過期，如果沒過期，直接使用緩存資源，過期了則會(huì)向服務(wù)器發(fā)送請(qǐng)求資源，這時(shí)的request header里瀏覽器會(huì)加上If-Modified-Since或If-None-Match （If-Modified-Since的值就是上一次請(qǐng)求時(shí)返回的Last-Modified的值。If-None-Match的值就是上一次請(qǐng)求時(shí)返回的ETag的值）
服務(wù)器再次收到資源請(qǐng)求時(shí)：

If-Modified-Since： 服務(wù)器根據(jù)瀏覽器傳過來If-Modified-Since和資源在服務(wù)器上的最后修改時(shí)間判斷資源是否有變化，如果沒有變化則返回304 Not Modified，但是不會(huì)返回資源內(nèi)容；如果有變化，就正常返回資源內(nèi)容。當(dāng)服務(wù)器返回304 Not Modified的響應(yīng)時(shí)，response header中不會(huì)再添加Last-Modified的header，因?yàn)榧热毁Y源沒有變化，那么Last-Modified也就不會(huì)改變。

If-None-Match： 服務(wù)器根據(jù)瀏覽器傳過來If-None-Match和然后再根據(jù)資源生成一個(gè)新的ETag，如果這兩個(gè)值相同就說明資源沒有變化，否則就是有變化；如果沒有變化則返回304 Not Modified，但是不會(huì)返回資源內(nèi)容；如果有變化，就正常返回資源內(nèi)容。與Last-Modified不一樣的是，當(dāng)服務(wù)器返回304 Not Modified的響應(yīng)時(shí)，由于ETag重新生成過，response header中還會(huì)把這個(gè)ETag返回，即使這個(gè)ETag跟之前的沒有變化
瀏覽器收到304 Not Modified的響應(yīng)：表示資源沒有變化，緩存資源還可以使用。
下圖是流程圖:

Cookie（或者Cookies），指一般網(wǎng)站為了辨別用戶身份、進(jìn)行session跟蹤而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過加密）。cookie一般通過http請(qǐng)求中在頭部一起發(fā)送到服務(wù)器端。一條cookie記錄主要由鍵、值、域、過期時(shí)間、大小組成，一般用戶保存用戶的認(rèn)證信息。
下面是cookies的常用接口：

var setCookie=function (c_name, value, expiredays, path){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) + ((path==null) ? "" : ";path="+path);
}
var getCookie=function (c_name){
    if (document.cookie.length>0){　　//先查詢cookie是否為空，為空就return ""
        c_start=document.cookie.indexOf(c_name + "=")　　//通過String對(duì)象的indexOf()來檢查這個(gè)cookie是否存在，不存在就為 -1　　
        if (c_start!=-1){
            c_start=c_start + c_name.length+1　　//最后這個(gè)+1其實(shí)就是表示"="號(hào)啦，這樣就獲取到了cookie值的開始位置
            c_end=document.cookie.indexOf(";",c_start)　　//其實(shí)我剛看見indexOf()第二個(gè)參數(shù)的時(shí)候猛然有點(diǎn)暈，后來想起來表示指定的開始索引的位置...這句是為了得到值的結(jié)束位置。因?yàn)樾枰紤]是否是最后一項(xiàng)，所以通過";"號(hào)是否存在來判斷
            if (c_end==-1) c_end=document.cookie.length
            return unescape(document.cookie.substring(c_start,c_end))　　//通過substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基礎(chǔ)，想了解的可以搜索下，在文章結(jié)尾處也會(huì)進(jìn)行講解cookie編碼細(xì)節(jié)
        }
    }
    return ""
}

下面是身份認(rèn)證相關(guān)的：

Cookie Auth
Cookie認(rèn)證機(jī)制就是為一次請(qǐng)求認(rèn)證在服務(wù)端創(chuàng)建一個(gè)Session對(duì)象，同時(shí)在客戶端的瀏覽器端創(chuàng)建了一個(gè)Cookie對(duì)象；通過客戶端帶上來Cookie對(duì)象來與服務(wù)器端的session對(duì)象匹配來實(shí)現(xiàn)狀態(tài)管理的。默認(rèn)的，當(dāng)我們關(guān)閉瀏覽器的時(shí)候，cookie會(huì)被刪除。但可以通過修改cookie 的expire time使cookie在一定時(shí)間內(nèi)有效
Token Auth：

Token Auth的優(yōu)點(diǎn)

Token機(jī)制相對(duì)于Cookie機(jī)制又有什么好處呢？

支持跨域訪問: Cookie是不允許垮域訪問的，這一點(diǎn)對(duì)Token機(jī)制是不存在的，前提是傳輸?shù)挠脩粽J(rèn)證信息通過HTTP頭傳輸.

無狀態(tài)(也稱：服務(wù)端可擴(kuò)展行):Token機(jī)制在服務(wù)端不需要存儲(chǔ)session信息，因?yàn)門oken 自身包含了所有登錄用戶的信息，只需要在客戶端的cookie或本地介質(zhì)存儲(chǔ)狀態(tài)信息.

更適用CDN: 可以通過內(nèi)容分發(fā)網(wǎng)絡(luò)請(qǐng)求你服務(wù)端的所有資料（如：javascript，HTML,圖片等），而你的服務(wù)端只要提供API即可.

去耦: 不需要綁定到一個(gè)特定的身份驗(yàn)證方案。Token可以在任何地方生成，只要在你的API被調(diào)用的時(shí)候，你可以進(jìn)行Token生成調(diào)用即可.

更適用于移動(dòng)應(yīng)用: 當(dāng)你的客戶端是一個(gè)原生平臺(tái)（iOS, Android，Windows 8等）時(shí)，Cookie是不被支持的（你需要通過Cookie容器進(jìn)行處理），這時(shí)采用Token認(rèn)證機(jī)制就會(huì)簡單得多。

CSRF:因?yàn)椴辉僖蕾囉贑ookie，所以你就不需要考慮對(duì)CSRF（跨站請(qǐng)求偽造）的防范。

性能: 一次網(wǎng)絡(luò)往返時(shí)間（通過數(shù)據(jù)庫查詢session信息）總比做一次HMACSHA256計(jì)算 的Token驗(yàn)證和解析要費(fèi)時(shí)得多.

localStorage是html5的一種新的本地緩存方案，目前用的比較多，一般用來存儲(chǔ)ajax返回的數(shù)據(jù)，加快下次頁面打開時(shí)的渲染速度。沒有過期時(shí)間設(shè)置。一般可以在里面存一個(gè)時(shí)間戳，每次從里面取出這個(gè)時(shí)間進(jìn)行人工判斷是否過期。

API：
localStorage.setItem()
localStorage.getItem()
localStorage.removeItem()
localStorage.clear()

sessionStorage屬性允許你訪問一個(gè)session storage對(duì)象。它與localStorage相似，不同之處在于localStorage里面存儲(chǔ)的數(shù)據(jù)沒有過期時(shí)間設(shè)置，而存儲(chǔ)在sessionStorage里的數(shù)據(jù)會(huì)在頁面會(huì)話結(jié)束時(shí)被清除。頁面會(huì)話在瀏覽器打開期間一直保持，并且重新加載或恢復(fù)頁面仍會(huì)保持原來的頁面會(huì)話。在新標(biāo)簽或窗口打開一個(gè)頁面會(huì)初始化一個(gè)新的會(huì)話，這點(diǎn)和session cookies的運(yùn)行方式不同。
應(yīng)該注意的是：無論是sessionStorage還是localStorage中保存的數(shù)據(jù)都僅限于該頁面的協(xié)議，簡單來說就是不允許跨域。
語法：

// 保存數(shù)據(jù)到sessionStorage
sessionStorage.setItem("key", "value");

// 從sessionStorage獲取數(shù)據(jù)
var data = sessionStorage.getItem("key");

// 從sessionStorage刪除保存的數(shù)據(jù)
sessionStorage.removeItem("key");

// 從sessionStorage刪除所有保存的數(shù)據(jù)
sessionStorage.clear();

參考鏈接：
九種瀏覽器端緩存機(jī)制知多少
瀏覽器緩存知識(shí)小結(jié)及應(yīng)用
瀏覽器緩存機(jī)制剖析