上一篇文章介紹的是《瀏覽器快取機制》，瀏覽器快取是瀏覽器儲存資料用於快速讀取或避免請求重複資源，提升網頁載入速度。快取的資料到底放哪了呢？作為開發者，有時也需要檢查一下快取中的內容。所以介紹下快取方法以及快取內容在哪查詢？

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的，所以基本不用。