瀏覽器緩存總結

這篇文章只是對我以爲經常使用的緩存方法的學習記錄。我是經過參考下面參考資料作的總結，你們能夠直接看參考連接裏的文章，他們的記錄更全面且帶圖。

1、http緩存

瀏覽器緩存分爲：強緩存和協商緩存。
強緩存和協商緩存並非平行關係，協商緩存是強緩存的基礎上加強的緩存功能。

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

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

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

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

下一次請求時：瀏覽器會先判斷強緩存是否過時，若是沒過時，直接使用緩存資源，過時了則會向服務器發送請求資源，這時的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的響應：表示資源沒有變化，緩存資源還可使用。
下圖是流程圖:

2、cookie

Cookie（或者Cookies），指通常網站爲了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端上的數據（一般通過加密）。cookie通常經過http請求中在頭部一塊兒發送到服務器端。一條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編碼細節
        }
    }
    return ""
}

下面是身份認證相關的：

Cookie Auth
Cookie認證機制就是爲一次請求認證在服務端建立一個Session對象，同時在客戶端的瀏覽器端建立了一個Cookie對象；經過客戶端帶上來Cookie對象來與服務器端的session對象匹配來實現狀態管理的。默認的，當咱們關閉瀏覽器的時候，cookie會被刪除。但能夠經過修改cookie 的expire time使cookie在必定時間內有效
Token Auth：

Token Auth的優勢

Token機制相對於Cookie機制又有什麼好處呢？

• 支持跨域訪問: Cookie是不容許垮域訪問的，這一點對Token機制是不存在的，前提是傳輸的用戶認證信息經過HTTP頭傳輸.
• 無狀態(也稱：服務端可擴展行):Token機制在服務端不須要存儲session信息，由於Token 自身包含了全部登陸用戶的信息，只須要在客戶端的cookie或本地介質存儲狀態信息.
• 更適用CDN: 能夠經過內容分發網絡請求你服務端的全部資料（如：javascript，HTML,圖片等），而你的服務端只要提供API便可.
• 去耦: 不須要綁定到一個特定的身份驗證方案。Token能夠在任何地方生成，只要在你的API被調用的時候，你能夠進行Token生成調用便可.
• 更適用於移動應用: 當你的客戶端是一個原平生臺（iOS, Android，Windows 8等）時，Cookie是不被支持的（你須要經過Cookie容器進行處理），這時採用Token認證機制就會簡單得多。
• CSRF:由於再也不依賴於Cookie，因此你就不須要考慮對CSRF（跨站請求僞造）的防範。
• 性能: 一次網絡往返時間（經過數據庫查詢session信息）總比作一次HMACSHA256計算 的Token驗證和解析要費時得多.

3、local storage

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

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

4、session storage

sessionStorage屬性容許你訪問一個session storage對象。它與localStorage類似，不一樣之處在於localStorage裏面存儲的數據沒有過時時間設置，而存儲在sessionStorage裏的數據會在頁面會話結束時被清除。頁面會話在瀏覽器打開期間一直保持，而且從新加載或恢復頁面仍會保持原來的頁面會話。在新標籤或窗口打開一個頁面會初始化一個新的會話，這點和session cookies的運行方式不一樣。
應該注意的是：不管是sessionStorage仍是localStorage中保存的數據都僅限於該頁面的協議，簡單來講就是不容許跨域。
語法：

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

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

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

// 從sessionStorage刪除全部保存的數據
sessionStorage.clear();

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