jquery - Keeping toggled class after page refresh

Question

I think this has been done many times before but despite reading some posts about cookies couldn't get my head round it.

I have a second body class with different fonts for the whole site which is accessed when the client clicks a link to change font. Ideally, instead of this being on a page-by-page basis, the new class would 'stick' after a new page is visited. My change class code via jQuery looks like this:

$(document).ready(function() {
    $("a#switcher").click(function() {
        $("body").toggleClass("alternate_body");
    });
});

Is there a relatively simple way of achieving this? Thanks in advance.

Answer 1

Cookie approach

You can use a jQuery plugin such as jquery-cookie to simplify cookie access. So your code would become something like this to save the class setting:

$(document).ready(function() {
    var body_class = $.cookie('body_class');
    if(body_class) {
        $('body').attr('class', body_class);
    }
    $("a#switcher").click(function() {
        $("body").toggleClass("alternate_body");
        $.cookie('body_class', $('body').attr('class'));
    });
});

URL Parameters

Another option would be to set a URL parameter on all the links the page when they click #switcher to maintain the state without setting a cookie.