上一篇文章介紹的是《瀏覽器緩存機制》，瀏覽器緩存是瀏覽器保存數據用於快速讀取或避免請求重復資源，提升網頁加載速度。緩存的數據到底放哪了呢？作為開發者，有時也需要檢查一下緩存中的內容。所以介紹下緩存方法以及緩存內容在哪查找？
1、http 緩存
http緩存是存在於服務器與瀏覽器之間，是一種保存資源副本並在下次請求時直接使用該副本的技術。web緩存發現請求資源已經被存儲，它會攔截請求，返回資源副本，而不會去服務器重新請求資源。
具體的緩存設置，如何判斷是否有緩存？等，上一篇文章以詳細介紹，可點擊《瀏覽器緩存機制》查看。
打開瀏覽器調試模式，在 Application 右側就會有瀏覽器的 8 種緩存方式，具體如下：
2、websql
websql是較新的chrome瀏覽器支持，並以獨立規范形式出現，引入了一組使用 SQL 操作客戶端數據庫的 APIs。websql主要特點：
- Web Sql數據庫 API 不是HTML5的一部分，在H5之前就已經存在了。
- 將數據以數據庫的形式存儲在客戶端，按需讀取。
- 數據便於檢索，允許使用sql語句。
- 可以使瀏覽器實現小型數據庫存儲功能。
websql常用的API如下：
openDatabase - 打開已存在的數據庫，如果不存在，則會新建一個新的數據庫。 transaction - 控制一個事物，以及這種情況執行提交或者回滾。 executeSql - 執行 SQL 語句。3、indexDB
indexDB 是為了能夠在客戶端存儲客觀數量的結構化數據，並且在這些數據上使用索引進行高性能的檢索。DOM存儲對於少量數據是非常友好的，但不適合存儲大量結構化數據，indexDB就是為了解決這個問題而生的。
indexDB 分別為同步和異步訪問提供了單獨的API，同步API本打算供Web Worker內部使用，但目前還未實現。異步API在Web Worker內部和外部都可以使用，另外瀏覽器對indexDB有50M大小限制。
indexDB主要特點有：
- indexDB大小取決於你的硬盤，存儲的數據量非常大。
- 可以直接存儲任何類型的數據，如 js任何類型的數據 、blob流。
- 可以創建索引，提供高性能搜索功能。
- 采用事務，保證數據的准確性和一致性。
4、cookie
cookie指的就是會話跟蹤技術。一般指網站為了辨別用戶身份，進行session跟蹤而而存儲在用戶本地終端上的數據，cookie一般通過http請求頭發送到服務器。cookie主要特點有：
- 跨域限制，同一個域名下可多個網頁內使用。
- cookie可以設置有效期，超出有效期自動清除。
- cookie存儲大小在4K以內。
- cookie的存儲不能超過50個cookie。
- 只能存儲字符串類型。
cookie常用操作：
setMaxAge - 設置cookie的有效期，時間單位是秒，負值時表示關閉瀏覽器后就失效，默認值為-1。 setDomain - 用於指定，只有請求指定域名才會帶上該cookie。 setPath - 只有訪問該域名下的cookieDemo的這個路徑地址才會帶cookie。 setValue - 重置 value 。5、localstorage
localStorage 是HTML5的一種新的本地緩存方案，目前使用比較多，一般存儲ajax返回的數據，存儲特點主要有：
- 數據可以長久保存，沒有有效期，直到手動刪除為止。
- 存儲的數據量大，一般5M以內。
- 存儲的數據可以在同一個瀏覽器的多個窗口使用。
- 存儲的數據不會發送到服務器。
localStroage常用API如下：
localStorage.setItem(key,value) // 保存數據 localStorage.getItem(key) // 獲取數據 localStorage.removeItem(key) // 刪除單個數據 localStorage.clear() // 刪除全部6、sessionstorage
sessionStorage與上述localStroage類似，它的特點主要有：
- 存儲的數據在瀏覽器關閉后刪除，與網頁窗口具有相同的生命周期。
- 可以存儲的數據大小5M。
- 存儲的數據不會發送到服務器。
sessionStorage常用API如下：
sessionStorage.setItem(key,value) // 保存數據 sessionStorage.getItem(key) // 獲取數據 sessionStorage.removeItem(key) // 刪除單個數據 sessionStorage.clear() // 刪除全部7、application cache
application cache是離線緩存技術，將大部分的圖片、js、css等資源放在mainfest文件配置中，頁面打開時通過mainfest文件讀取本地文件或請求服務器資源。通常用於靜態頁面的緩存。
application cache特點：
- mainfest文件必須有變化時才會更新。
- 一次必須更新mainfest文件中的所有文件才能生效。
- 當網絡斷開時，可以繼續訪問頁面。
- 文件緩存到本地，不需要每次都從網絡上請求。
- 穩定性比較好，遇網絡故障或服務器故障可以繼續訪問本地緩存。
- 加載速度快，緩存資源為本地資源，因此加載速度較快。
8、cacheStorage
cacheStorage 表示 cache對象的存儲。該接口提供 serviceWorker 或其他類型的工作線程或window范圍訪問的所有命名緩存的主目錄。
CacheStorage常見方法：
- CacheStorage.match() - 檢查給定的 Request 對象是否是 CacheStorage 對象跟蹤的 Cache 對象中的鍵，返回Promise
- CacheStorage.has() - 返回一個 Promise，它解析為與 cacheName 相匹配的 Cache 對象。
- CacheStorage.delete() - 刪除cache對象
- CacheStorage.keys() - 含有keys中字符串的任意一個，則返回一個promise對象。
- cacheStorage.has() - 如果包含cache對象，則返回一個promise對象。
9、flash緩存
flash緩存也是頁面通過js調用flash讀寫特定的磁盤目錄，達到本地數據緩存的目的。這是要基於flash的，所以基本不用。