文章目錄

• 1瀏覽器緩存
• • 1.1緩存的目的
  • 1.2瀏覽器緩存機制
  • 1.2瀏覽器緩存大小
• 2.瀏覽器緩存機制
• • 2.1瀏覽器緩存機制
  • 2.2常說的瀏覽器緩存機制
  • 2.3 HTTP Cache
• 3.相關API：

1瀏覽器緩存

• 瀏覽器緩存是為了提升頁面訪問的速度，瀏覽器對一些已經訪問過的網絡資源（JS、css、image等等）會先存儲在本地磁盤，當瀏覽器需要再次引用這些資源的時候，從本地加載，不從網絡請求。

1.1緩存的目的

• 提升頁面訪問的速度，提升用戶訪問網站的體驗。

1.2瀏覽器緩存機制

• 瀏覽器第一次訪問網站的時候，會請求所有的靜態資源，并根據HTTP協議頭存儲.

• 瀏覽器第二次訪問網站及后面的請求，都會考慮到緩存機制。

1.2瀏覽器緩存大小

• 存儲內容大小一般支持5MB左右（不同瀏覽器可能還不一樣）

• 瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實現本地存儲機制。

2.瀏覽器緩存機制

2.1瀏覽器緩存機制

• 有四個方面，按照獲取資源時請求的優先級依次排列為：Memory Cache、Service Worker Cache、HTTP Cache、Push Cache。

2.2常說的瀏覽器緩存機制

• 常說的瀏覽器緩存機制主要就是HTTP協議定義的緩存機制.
  HTTP協議定義的緩存策略包括Expires策略、Cache-control策略、用戶行為與緩存三部分。

2.3 HTTP Cache

• 可分為強緩存和協商緩存。優先級較高的是強緩存，在命中強緩存失敗的情況下，才會走協商緩存。對一條http get報文的基本緩存處理過程包括7個步驟：接收、解析、查詢、新鮮度檢測、創建響應、發送、日志。

3.相關API：

• xxStorage.setItem(‘key’, ‘value’);
  該方法接受一個鍵和值作為參數，會把鍵值對添加到存儲中，如果鍵名存在，則更新其對應的值。

• xxStorage.getItem(‘person’);

該方法接受一個鍵名作為參數，返回鍵名對應的值。

• xxStorage.removeItem(‘key’);
  該方法接受一個鍵名作為參數，并把該鍵名從存儲中刪除。

• xxStorage.clear()
  該方法會清空存儲中的所有數據。

PS：

SessionStorage存儲的內容會隨著瀏覽器窗口關閉而消失。

LocalStorage存儲的內容，需要手動清除才會消失。

xxStorage.getItem(xxx)如果xxx對應的value獲取不到，那么getItem的返回值是null。

JSON.parse(null)的結果依然是null。

總結

以上是生活随笔為你收集整理的前端学习之浏览器缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。