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

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

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!