﻿# 簡易克服 CSS 被瀏覽器快取(Cache)的問題

我們建置網站完成後，接下來就是將網站上線了，但當發現網站有問題要修改的時候，可能會遇到一個問題，就是當我們修改 JavaScript 或 CSS 的時候，預設的情況下 `*.js` 或 `*.css` 這類靜態網頁通常會被 Browser 快取(Cache)起來，除非你先主動清除這些快取資料，或人工將頁面重新整理才能讀到新的資料。但這個「人工手動」的動作客戶可無法接受！因為大部分網友不會知道需要做這個「重新整理」的步驟，看到的可能是錯誤的畫面、或 JavaScript 的問題。

一個最簡單的方法就是將 css 載入的地方加上「日期」或「版本編號」，請看下圖：

這是原本擺在 `<head>` 裡面的 CSS 與 JavaScript 宣告：

> ![尚未修改前的 CSS, JavaScript](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/62ac3d6b8b082be72800-Screenshot-080201-160036.png "尚未修改前的 CSS, JavaScript")

加上版本編號就會變成這樣：

> ![加上版本編號就會變成這樣](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/7af6960e43ffa9af3da7-Screenshot-080201-160143.png "加上版本編號就會變成這樣")

這兩個語法對 Web Server 來說是一樣的，因為這兩個檔都是「靜態頁面」；但是對 Browser 來說就不一樣了，因為 Browser 才不管你抓的是不是同一個檔案，對 Browser 來說唯一個依據就只有「網址」而已，所以只要是不同的網址就會重新向 Web Service 抓取新的檔案內容！

所以當修改網站的 CSS 或 JavaScript 後，你可以直接修改 ASP.NET 的 MasterPage 將檔案後面加上「日期」或「版本編號」就可以啦，一個最簡單、實用、好用又很少人知道的技巧喔！

### 相關連結

-   如何才能克服 JS / CSS 在更新後，被用戶端的瀏覽器快取的問題 - Felo Search
