[坑]奇怪的瀏覽器快取

有時候為了網站的開啟速度，會加入快取這一點其實不奇怪

除了本身瀏覽器的快取，也有 Proxy 或 CDN 之類的快取

簡單來說就是不常變動的內容就不需要跟伺服器端再索取一次

那麼今天要敘述的坑就是

某些瀏覽器連HTML控件狀態也一起幫忙快取了

到底是怎麼回事呢?

來看以下的程式碼

<!DOCTYPE html>
<html>
<head>
    <title>Hole</title>
</head>
<body>
    <input type="checkbox" checked />
    <br />
    <select>
        <option value="1">1</option>
        <option value="2" selected>2</option>
        <option value="3">3</option>
    </select>
    <br />
    <input type="radio" name="r" />
    <input type="radio" name="r" checked />
</body>
</html>

接下來請看以下GIF

影片一開始所有的控件都是依據HTML的狀態 selected 和 checked

使用者更動後一般情況下重新整理(F5)，如果沒有特別處理過，理應恢復到原本的狀態

但影片中的瀏覽器依然會維持住上一次更動的部分，除非強制刷新

下表列出會有此現象的瀏覽器

Chrome	FireFox	IE	Edge Radio控件會有奇怪狀況
X	O	O	O

目前試驗出來有此狀態的前提條件是 html副檔名及沒有副檔名的網址

127.0.0.1/hole.html

127.0.0.1/hole