怎樣實現每次頁面開啟時都清除本頁快取？

王铁柱6發表於2024-11-30
快取

要確保每次開啟頁面時都清除快取，沒有萬無一失的純前端解決方案。瀏覽器快取機制是為了提高效能，完全繞過它很困難。不過，可以結合幾種前端技術最大程度地減少快取的影響，讓瀏覽器儘可能載入最新版本：

1. Meta標籤（效果有限）：

雖然這些meta標籤旨在防止快取，但現代瀏覽器對它們的解釋可能有所不同，並不總是有效。

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

2. URL 引數（推薦）：

這是最可靠的前端方法之一。每次載入頁面時，在 URL 後面新增一個動態引數，例如時間戳或隨機數。這會欺騙瀏覽器認為這是一個新的 URL，從而強制它重新載入資源。

// 使用時間戳
const url = new URL(window.location.href);
url.searchParams.set('t', Date.now());
window.location.href = url.toString();

// 或使用隨機數
const url = new URL(window.location.href);
url.searchParams.set('r', Math.random());
window.location.href = url.toString();


//  更簡潔的版本 (時間戳)
window.location.href = window.location.href + (window.location.search ? '&' : '?') + 't=' + Date.now();

// 更簡潔的版本 (隨機數)
window.location.href = window.location.href + (window.location.search ? '&' : '?') + 'r=' + Math.random();

將這段 JavaScript 程式碼放在 <head> 部分的 <script> 標籤中，或者在頁面載入時立即執行。

3. Service Worker Cache API (需要更復雜的設定):

Service Worker 可以攔截網路請求，並決定是否使用快取。你可以配置 Service Worker 來繞過快取，或者實現更精細的快取策略。但這需要更復雜的設定和編碼，對於簡單的快取清除需求來說可能有些 overkill。

4. HTTP Headers (後端控制，最有效):

最有效的解決方案是在伺服器端設定正確的 HTTP 頭資訊。以下是一些常用的頭部：

  • Cache-Control: no-cache, no-store, must-revalidate
  • Pragma: no-cache
  • Expires: 0 或 Expires: -1

如果您可以控制伺服器端，這是推薦的解決方案。

總結:

  • 前端最佳實踐: 使用 URL 引數方法，簡單有效。
  • 最有效方法: 後端設定 HTTP Headers。
  • Meta 標籤: 效果有限，不推薦單獨使用。
  • Service Worker: 功能強大，但對於簡單的需求來說過於複雜。

選擇哪種方法取決於你的具體情況和對控制級別的需求。 如果可以控制伺服器端，強烈建議使用 HTTP Headers。 如果只能控制前端，URL 引數方法是最可靠的。

希望這些資訊對您有所幫助!

相關文章