走過的坑

[坑]奇怪的瀏覽器快取

Michael

— 2 min read

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

除了本身瀏覽器的快取，也有 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

01

影片一開始所有的控件都是依據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

Read more

[LeetCode] #12 Integer to Roman 解題

題目連結 題型解說 這是一題難度為普通的題目 需要設計一個方法，此方法會傳入一個整數 num 要求是把整數轉換成羅馬字母，轉換清單如下 I => 1 V => 5 X => 10 L => 50 C => 100 D => 500 M => 1000 但羅馬字母有一些特殊規則 4 並非 IIII 而是 IV，9 並非 VIIII 而是 IX 這規則同樣可以套用到 40 90 400 900 解題思路 既然知道特殊規則是一樣的，變得是使用的符號，那麼先從 num 取個位數開始 轉換完成後，把 num 除上 10，消除個位數，

By Michael

[LeetCode] #11 Container With Most Water 解題

題目連結 題型解說 這是一題難度為中等的題目 需要設計一個方法，此方法會傳入一個數字陣列 height 陣列中的元素代表每一個柱子的高度 現在需要計算出，該陣列中以某兩隻柱子為邊界，最多可以裝多少水 以範例來說 height = [1,8,6,2,5,4,8,3,7] 最多可以裝 7 * 7 = 49 單位的水 解題思路 計算面積就是底乘上高 底的計算方式為 「右邊柱子的 index」 減去 「左邊柱子的 index」 高就取最短的那一根柱子高度 拿題目給的例子來當範例 建立三個變數 result、left、right left、right 代表左右兩邊的 index result 代表目前最大容量，初始值 0 第一步，找出最短的柱子高度，

By Michael

[LeetCode] #941 Valid Mountain Array 解題

題目連結 題型解說 這是一題難度為簡單的題目 需要設計一個方法，此方法會傳入一個數字陣列 arr 判斷陣列中的元素是不是由低到高再從高到低(山形)的排序，且不連續一個以上數字 比如說 [1,2,3,2] 就是一個山形陣列，但 [1,2,2,3,2] 不是，因為有兩個 2 [1,2,3,4,5] 和 [5,4,3,2,1] 也不算是山形陣列，前者只有往上沒有往下，後者相反 解題思路 準備一個數字變數(temp)和布林變數(asc)，跑一次迴圈，有可能遇到如下狀況 1. 某個數字與前一個數字相同，這時候直接回傳 false

By Michael

[LeetCode] #944 Delete Columns to Make Sorted 解題

題目連結 題型解說 這是一題難度為簡單的題目 需要設計一個方法，此方法會傳入一個字串陣列 strs 這個陣列中每個字串的長度都相同，字串內容都是小寫英文 需要檢查每個元素的第 N 個字元是不是由小至大排列，並回傳有幾個錯誤排列 比如傳入的陣列長這樣 ["cba","daf","ghi"] 取第一個字元 = cdg 取第二個字元 = bah 取第三個字元 = afi 其中第二組的結果(bah)並不是由小至大排列，故回傳 1 解題思路 這一題就用兩個迴圈各別把字元取出來，並比較是否比上一個字元大(Java 中的字元可以直接比較)，如果不是就將結果+1 程式碼 Java class Solution { public int minDeletionSize(String[] strs) { int result = 0; for (int i = 0,

By Michael