JS每日一題: 前端的快取有哪些？都適用什麼場景？區別是什麼？

摘要： 強快取 強快取主要是採用響應頭中的Cache-Control和Expires兩個欄位進行控制的 Cache-Control 值理解: max-age 指定設定快取最大的有效時間(單位為s) public 指定響應會被快取，並且在多使用者間共享 ...

• 強快取

強快取主要是採用響應頭中的Cache-Control和Expires兩個欄位進行控制的

Cache-Control 值理解:

max-age 指定設定快取最大的有效時間(單位為s)

public 指定響應會被快取，並且在多使用者間共享

private 響應只作為私有的快取，不能在使用者間共享

no-cache 指定不快取響應，表明資源不進行快取

no-store 絕對禁止快取

Expires 理解:

快取過期時間，用來指定資源到期的時間，是伺服器端的具體的時間點, 需要和Last-modified結合使用

Last-modified理解

伺服器端檔案的最後修改時間，需要和cache-control共同使用，是檢查伺服器端資源是否更新的一種方式

ETag 理解

根據實體內容生成一段hash字串，標識資源的狀態，由服務端產生。瀏覽器會將這串字串傳回伺服器，驗證資源是否已經修改

• 協商快取(304)

協商快取是指當強快取機制如果檢測到快取失效，就需要進行伺服器再驗證

瀏覽器快取

• Cookie
• LocalStorage
• SessionStorage
• Service Worker

Cookie

Cookie主要用於使用者資訊的儲存, 容量為4KB

LocalStorage

LocalStorage的資料將一直儲存在瀏覽器內，直到使用者清除瀏覽器快取資料為止, 容量為5MB

SessionStorage

SessionStorage的其他屬性同LocalStorage, 不同是的當頁面關閉時會隨之清除

Service Worker

主要是為了提高web app的使用者體驗，可以實現離線應用訊息推送等等一系列的功能, 可以看做是一個獨立於瀏覽器的Javascript代理指令碼, 在離線狀態下也能提供基本的功能。 出於安全性的考慮，Service Worker 只能在https協議下使用