一、什麼是瀏覽器緩存？
瀏覽器緩存就是把一個已經請求過得web資源（如HTML頁面，圖片，js，數據）拷貝一份副本儲存在瀏覽器中。緩存會根據進來的請求保存輸出內容的副本。當下一個請求來到的時候，如果是相同的URL，緩存會根據緩存機制決定是直接使用副本響應訪問請求，還是向源服務器再次發送請求。比較常見的就是瀏覽器會緩存訪問過網站的網頁，當再次訪問這個URL地址的時候，如果網頁沒有更新，就不會再次下載網頁，而是直接使用本地緩存的網頁。只有當網站明確標識資源已經更新，瀏覽器纔會再次下載網頁。
二、爲什麼使用緩存？
（1）減少網絡帶寬消耗
（2）降低服務器壓力
（3）減少網絡延遲，加快頁面打開速度
三、瀏覽器緩存的控制：
（1）使用meta標籤：<meta http-equiv="Pragma" content="no-cache">
<!- Pragma是http1.0版本中給客戶端設定緩存方式之一，具體作用會在後面詳細介紹 -->
上述代碼告訴瀏覽器當前頁面不被緩存，每次訪問都需要去服務器拉取。
<meta http-equiv="cache-control" content="no-cache">
常見的取值有private、no-cache、max-age、must-revalidate等，默認爲private。
no-cache表示客戶端緩存內容，是否使用緩存則需要經過協商緩存來驗證決定。表示不使用 Cache-Control的緩存控制方式做前置驗證，而是使用 Etag 或者Last-Modified字段來控制緩存。需要注意的是，no-cache這個名字有一點誤導。設置了no-cache之後，並不是說瀏覽器就不再緩存數據，只是瀏覽器在使用緩存數據時，需要先確認一下數據是否還跟服務器保持一致。
<meta http-equiv="Expires" content="0">
指定Expires值爲一個早已過去的時間，那麼訪問此網時若重複在地址欄按回車，那麼每次都會重複訪問。
（2）cdn緩存
cdn（Content Delivery Network），即就是內容分發網絡，就相當於是在客戶端和服務端之間加一個cdn層，用戶在瀏覽網站的時候，cdn會選擇一個離用戶最近的cdn邊緣節點來響應用戶的請求，這不但加快了用戶體驗速度也減輕了源服務器的負載。
cdn緩存工作原理：用戶通過輸入域名來訪問頁面，首先進行dns處理，dns解析服務器會將用戶訪問請求定位到離用戶最近、負載最輕的cdn緩存服務器上，返回該cdn節點的ip地址，緩存服務器拿到數據後，一方面將數據返回瀏覽器，另一方面進行本地保存，之後再次訪問，數據將從cdn緩存服務器中被返回。
（3）本地存儲
二者都是針對數據進行本地存儲的，區別是：
localstorage是永久存儲，而sessionstorage當窗口關閉的時候失效。
localstorage對於同源窗口來說是可以共享的，但是sessionstorage在不同的窗口不共享。
感覺常見的區別就這兩個吧，它們的操作也很簡單，web storage擁有像getItem，setItem，clear等方法，不像cookie存儲還得自己去封裝一個，比較方便。
localStorage、sessionStorage、cookie區別
共同點：都是保存在瀏覽器端，且同源的。
區別：
Cookie：存儲在用戶本地終端上的數據，cookie數據始終在同源的http請求中攜帶，即cookie在瀏覽器和服務器端來回傳遞；cookie數據還有路徑（path）的限制，可以限制cookie只屬於某個路徑下；存儲大小限制也不同，cookie數據不能超過4k，同時因爲每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。一般應用案例就是判斷註冊用戶是否已經登錄過該網站。
|
|
Cookie |
sessionStorage |
localStorage |
|
數據有效期 |
只在cookie設置的過期時間之前一直有效，即使窗口或瀏覽器關閉。 |
僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持 |
始終有效，窗口或瀏覽器關閉也一直保存，因此被用作持久數據 |
|
數據存儲大小 |
cookie數據不能超過4k |
可以達到5M或者更大 |
可以達到5M或者更大 |
|
作用域 |
在所有同源窗口中都是共享的。 |
不在不同的瀏覽器窗口中共享，即使是同一個頁面。 |
在所有同源窗口中都是共享的。 |
|
數據存儲位置 |
客戶端瀏覽器 |
本地保存 |
本地保存 |
|
webStorage支持事件通知機制，可以將數據更新的通知發送給監聽者。 |
|||
清空一個頁面的sessionStorage，另一個頁面依舊有，而localStorage則不同。