瀏覽器返回時選擇選項丟失

Question

我正在研究可以篩選類別，子類別的搜索表單。這是我的html代碼：

<select id="category" name="category"> 
    <option value="0">-- All Categories --</option> 
    <option value="one">category one</option> 
    <option value="two">category two</option> 
</select> 
<select id="subcategory" name="subcategory"> 
    <option value="0">-- All Sub Categories --</option> 
</select> 

我用jQuery來篩選子類別

$('#category').on("change",function(){ 
    var cat = $(this).find("option:selected").text(); 
    var subCat = ""; 
    switch (cat) { 
     case "category one": 
     subCat = '<option value="sub1">Sub Category One</option>'; 
     break; 
     case "category two": 
     subCat = '<option value="sub2">Sub Category Two</option>'; 
     break; 
    } 

    $("#subcategory").html(subCat); 
}) 

它正常工作與過濾。但是，我提交了搜索表單並轉到了結果頁面，然後當我點擊瀏覽器「返回」按鈕時。子類別再次成爲「 - 所有子類別 - 」，沒有數據被保存。直到我做出另一個選擇才能觸發更改事件，沒有顯示任何內容。我如何改進我的答案？

Answer 1

有這個網頁內存中的緩存方法，我曾經用來保存整個表格：Using_Firefox_1.5_caching。它也緩存JavaScript狀態，但需要牢記很多設置才能使其正常工作。

在你的情況，因爲你只想保存<select>數據只。我想用document.cookie是一個很好的解決方案：

$('#category').on("change", function() { 
    var cat = $(this).val(); 
    var subCat = ""; 
    switch (cat) { 
     case "one": 
      subCat = '<option value="sub1">Sub Category One</option>'; 
      break; 
     case "two": 
      subCat = '<option value="sub2">Sub Category Two</option>'; 
      break; 
    } 
    setCookie('select', cat); 
    $("#subcategory").html(subCat); 
}) 

var sel = getCookie('select'); 
if (sel) { 
    /* if cookie key 'select' is set change the '#category' selected value 
     and trigger the change() event.*/ 
    $('#category').val(sel).trigger('change'); 
} 

//Cookie functions for setting and retrieving, the duration I set is 24hrs only. 
function setCookie(key, value) { 
    var expires = new Date(); 
    expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000)); 
    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString(); 
} 

function getCookie(key) { 
    var key = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)'); 
    return key ? key[2] : null; 
} 

看到這個jsfiddle。