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

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

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

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

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

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

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

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

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

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

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

下面是身份認證相關的：

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

Token Auth的優(yōu)點

Token機制相對于Cookie機制又有什么好處呢？

支持跨域訪問: Cookie是不允許垮域訪問的，這一點對Token機制是不存在的，前提是傳輸的用戶認證信息通過HTTP頭傳輸.

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

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

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

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

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

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

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

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

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

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

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

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

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

參考鏈接：
九種瀏覽器端緩存機制知多少
瀏覽器緩存知識小結及應用
瀏覽器緩存機制剖析