select option lost when browser goes back

Question

I am working on a search form that can filter category, sub category. This is my html code:

<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>

I used JQuery to filter sub category

$('#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);
})

It works fine with filtering. However, I submitted the search form and went to a result page, then when I clicked browser "go back" button. Sub category became "-- All Sub Categories --" again, no data was saved. Not until I made another selection to trigger on change event, nothing was displayed. How do I improve my answer?

Answer 1

There is this web page in-memory caching method that I once used before to save the whole form: Using_Firefox_1.5_caching. It caches the JavaScript states as well but there are a lot of setup you need to keep in mind to make it properly working.

In your case, since you only want to save the <select> data only. I think using document.cookie is a good solution:

$('#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;
}

See this jsfiddle.