現代瀏覽器主要有8中緩存機制： HTTP文件緩存、LocalStorage、SessionStorage、indexDB、Web SQL、Cookie、CacheStorage、Application Cache
一、HTTP文件緩存
HTTP文件緩存是基於HTTP協議的瀏覽器端文件及緩存機制。在文件重復請求的情況下，瀏覽器可以根據HTTP相應的協議頭信息判斷是從服務器端請求文件還會從本地讀取文件。
1、瀏覽器會先查詢Cache-Control（這里用Expires批判斷也是可以的，但是Expires一般設置的是絕對過期時間，Cache-Control設置的是相對過期時間）來判斷內容是否過期，如果未過期，則直接讀取瀏覽器端緩存文件，不發送HTTP請求，否則進入下一步。
2、在瀏覽器端判斷上次文件返回頭中是否含有Etag信息，有則聯If-None-Match一起想服務器發送請求，服務端判斷Etag未修改則返回狀態304，修改則返回200，否則進入下一步。
3、在瀏覽器端判斷上次文件返回頭中是否含有Last-Modified信息，有則連同If-Modified-Since一起向服務器發送請求，服務端判斷Last-Modified是否失效，失效則返回200，未失效則返回304。
4．如果Etag和Last-Modified都不存在，直接向服務器請求內容。
HTTP緩存可以在文件緩存生效的情況下讓瀏覽器從本地讀取文件，不僅加快了頁曲資源加載，同時節省網絡流量，所以在Web站點配置中要盡可能利用緩存來優化請求過程。在HTML中，我們可以添加<meta>中的Expires或Cache-Control來設置，需要注意的是，一般這里Cache-Control設置max-age的時間單位是秒，如果同時設置了Expires和Cache-Control,則只有Cache-Control的設置生效。
<meta http—eguiv="Expires"content="Mon,20 Jul 2016 23：00：00 GMT"/>
<meta http—equiv="Cache—ControI“ content—"max-age=72OO"/>
當然服務端也需要進行對應設置，Node.js服務器可以使用中間件來這樣設置靜態資源文件的緩存時間。
localsrorage.setltem(key,value〕
localStorage·getltem(key)
localStorage·removeltem(key)
IocalStorage·clear()
localStorage基本支持目前的主流瀏覽器，在lnternetExplorer8以上最大限
制為5MB,在Chrome或Safari瀏覽器里面的大小限制約為2.6MB。另值得注意的是，這里的大小限制指的是單個域名下localStorage的大小，所以
localStorage中不適合存放過多的數據，如果數據存放超過最大限制可能會讀取報錯，因此在使
用之后最好移除不再使用的數據。
三、sessionStorage
sessionStorage和localStorage的功能類似，但是sessionStorage在瀏覽器關閉時會自動清空。sessionStorage的API與localStorage完全相同，由於不能進行客戶端持久化緩存，使用較少。
四、Cookie
Cookie（或Cookies），指網站為了辨別用戶身份或Session跟蹤而儲存在用戶瀏覽器端的數據。cookie信息一般會通過HTTP清求發送到服務器端。一條Cookie記錄主要中鍵、值、域、過期時間和大小組成，一般用於保存用戶的網站認證信息。瀏覽器中Cookie的最大長度和單個域支持的Cookie個數由瀏覽器的不同來決定。而且我們通常認為Cookie的最大長度限制為4KB lnternetExplorer7以上和localStorage類似，不同域名之間的Cookie信息也是獨立的，如果需要設置共享，則可以在被共享域名的服務器端設置Cookie的path和domain來實現。
瀏覽器端也可以通過document.ccokie來獲取Cookie，並通過JavaScript來處理解析。但是需要注意的是，Cookie分為兩種：SessionCookie和持久型Cookie。SessionCookie一般不設置過期時間，表示該Cookie的生命周期為瀏覽器會話期間，只要關閉瀏覽器窗口，Cookie就會消失，而且SessionCookie一般不保存在硬盤上而是保存在內存里；持久型Cookie一般會設置過期時間，而且瀏覽器會將持久型的信息保存到硬盤上，關閉后再次打開瀏覽器，這些Cookie依然有效，直到超過設定的過期時間或被清空才失效。Cookie設置中有個HttpOnly參數，前端瀏覽器使用document.cookie是讀取不到HttpOnly類型Cookie的，被設置為HttpOnly的Cookie記錄只能通過HTTP請求頭發送到服務器端進行讀寫操作，這樣就避免了服務器端的Cookie記錄被前端JavaScript修改，保證了服務端驗證Cookie的安全性。
五、WebSQL
WebSQl是瀏覽器端用於存儲較大量數據的緩存機制
1． WebSQL數據庫API實際上不是HTML5規范的組成部分，目前只是一種特定的瀏覽器特性，而且WebSQL在HTML5之前就己經存在，是單獨的規范。
2．WebSQL將數據以數據庫二維表的形式存儲在客戶端，可以根據需要使用JavaScnpt去讀取。
3．WebSQL與其他存儲方式的區別：localStorage和Cookie以鍵值對的形式存在，WebSQL為了更便於檢索，允許SQL語句的查詢。
4．WebSQL可以讓瀏覽器實現小型數據庫存儲功能，而且使用的數據庫是集成在瀏覽器里面的。
WebSQLAPI主要包含三個核心方法：openDatabase0、transaction()和executesql。
openDatabase()方法可以打開已存在的數據庫，並默認創建不存在的數據庫。openDatabase0中的五個參數分別為數據庫名、版本號、描述、數據庫大小、創建回調，即使創建回調為null也可以創建數據庫，transaction()方法允許我們根據情況控制執行事務提交或回滾，executesql（）則用羊執行真實的SQL查詢語句。
六、indexDB
lndexDB也是一個可在客戶端存儲大量結構化數據並且能在這些數據上使用索引進行高性能檢索的一套API。由於WebSQL不是HTML5規范，不支持lnternetExplorer10、Chrome12及Firefox5以上版本的瀏覽器，所以一般推薦使用lndexDB來進行大量數據的存儲，其基本實現和WebSQL類似，只是使用的API規范不一樣，WebSQL使用類似NoSQL（NotOnlySQL，非關系型數據庫）數據庫的設計實現，讀取效率更高。瀏覽器對IndexDB的大小限制通常約為50MB，這樣就可以將大量的應用數據保存到本地，和WebSQL類似，目前使用lndexDB的實際應用場景也不是很多，而且將大量數據保存到本地也會造成數據泄露，所以我們了解即可，無須在實際項目中使用。
七、ApplicationCache
ApplicationCache是一種允許瀏覽器通過manifest配置文件在本地有選擇性地存鍺JavaScript、CSS、圖片等靜態資源的文件級緩存機制。當頁面不是首次打開時，通過一個特定的manifest文件配置描述來選擇讀取本地ApplicationCache里面的文件。所以使用ApplicationCache來實現瀏覽器應用具有以下三個優勢。
1、離線瀏覽。通過manifest配置描述來讀取本地文件，用戶可在離線時瀏覽完整的頁面內容。
2、快速加載。由於緩存資源為本地資源，因此頁面加載速度較快。
3、服務器負載小。只有在文件資源新時，瀏覽器才會從服務器端下載，這樣就減小了服務器資源請求的壓力
Application Cache在頁面第2次被訪問時開始生效。頁面打開時優先從Application Cache中訪問資源，讀取資源加載后同時會去請求檢查服務端的manifest文件是否己更新，如果沒有更新，則整個訪問過程結束。否則瀏覽器會去檢查manifest列表，將更新的內容重新拉取到Application Cache中，這樣頁面第3次被訪問時就可以加載到更新后的內容了。所以前端頁面開發完成后更新的內容將在用戶再一次訪問時才會生效，而不是馬上就能生效。通常一個基本的Application Cache離線頁面應用至少應該包括HTML頁面的manifest配置引用與被引用的manifest文件。
ApplicationCache己經開始被標准棄用，漸漸將會由serviceworkers來代替，所以現在不建議使用Application來實現離線應用，僅作為一種技術了解即可。
八、cacheStorage
cacheStorage是在ServiceWorker規范中定義的，可用於保存每個ServiceWorker聲明的Cache對象，是未來可能用來代替ApplicationCache的離線方案。cacheStorage有open()、match()、has()、delete()、keys()五個核心API方法，可以對Cache對象的不同匹配內容進行不同的響應，cacheStorage在瀏覽器端為window下的全局內置對象caches。