Question

I have the following jQuery code:

<script type="text/javascript">
    $(document).ready(function() {
        var color = ['none', 'green', 'yellow', 'red'];
        $('table').on('change','select', function() {
            $(this).parents('td').css('background', color[$(':selected', this).index()]);
        });​
    });
</script>

Which highlights all table cells on a row when an option in a select box is chosen. I have downloaded and implemented the jQuery cookie plugin. My Question is how can I implement functionality (additional code) so that the row of table cells will remain highlighted when the page is refreshed or when a user logs out.

Answer 1

All you need is to store selected color in the cookie and then read it back. You can use jquery cookie plugin. Sample usage here:

$(document).ready(function() {

    if ($.cookie("yourname")) {
        // applying color from cookie
        var color = $.cookie("yourname");
        $('div').css('background', color);
        $('select').val(color);
    }

    $('div').on('change', 'select', function() {
        // applying selected color, storing it in the cookie
        var color = $(this).val();
        $.cookie("yourname", color);
        $('div').css('background', color);
    });

});​

DEMO

PS: For the demo I use slightly modified script, since you haven’t provided your HTML markup.