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

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

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

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

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

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

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

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

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

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

Cookie（或者Cookies），指一般網(wǎng)站為了辨別用戶身份、進(jìn)行session跟蹤而儲存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過加密）。cookie一般通過http請求中在頭部一起發(fā)送到服務(wù)器端。一條cookie記錄主要由鍵、值、域、過期時間、大小組成，一般用戶保存用戶的認(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對象的indexOf()來檢查這個cookie是否存在，不存在就為 -1　　
        if (c_start!=-1){
            c_start=c_start + c_name.length+1　　//最后這個+1其實就是表示"="號啦，這樣就獲取到了cookie值的開始位置
            c_end=document.cookie.indexOf(";",c_start)　　//其實我剛看見indexOf()第二個參數(shù)的時候猛然有點暈，后來想起來表示指定的開始索引的位置...這句是為了得到值的結(jié)束位置。因為需要考慮是否是最后一項，所以通過";"號是否存在來判斷
            if (c_end==-1) c_end=document.cookie.length
            return unescape(document.cookie.substring(c_start,c_end))　　//通過substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基礎(chǔ)，想了解的可以搜索下，在文章結(jié)尾處也會進(jìn)行講解cookie編碼細(xì)節(jié)
        }
    }
    return ""
}

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

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

Token Auth的優(yōu)點

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

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

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

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

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

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

CSRF:因為不再依賴于Cookie，所以你就不需要考慮對CSRF（跨站請求偽造）的防范。

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

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

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

sessionStorage屬性允許你訪問一個session storage對象。它與localStorage相似，不同之處在于localStorage里面存儲的數(shù)據(jù)沒有過期時間設(shè)置，而存儲在sessionStorage里的數(shù)據(jù)會在頁面會話結(jié)束時被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復(fù)頁面仍會保持原來的頁面會話。在新標(biāo)簽或窗口打開一個頁面會初始化一個新的會話，這點和session cookies的運行方式不同。
應(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ī)制知多少
瀏覽器緩存知識小結(jié)及應(yīng)用
瀏覽器緩存機(jī)制剖析