change class with javascript and store with cookie

Question

I am using this javascript where I can change a class onClick (other class).

$(window).load(function(){
$(".changefontA").click(function () {
    $("body").removeClass("a").addClass("b");
    $(this).hide();
    $(".changefontB").fadeIn();
});
$(".changefontB").click(function () {
    $("body").removeClass("b").addClass("a");
    $(this).hide();
    $(".changefontA").fadeIn();
});
});

Because it's a huge change in the font I want to store it in a cookie so when the visitor goes to another page, the website will remember the change and don't switch back to the original font. I'm completely new to cookies so I hope someone can help me or give me a head start.

Answer 1

If you are going to use the jQuery cookie plugin, you could do something like

$(window).load(function () {
    $(".changefontA").on('click.myfont', function () {
        $("body").removeClass("a").addClass("b");
        $(this).hide();
        $(".changefontB").fadeIn();
        $.cookie('my-font', 'changefontA', {
            path: '/'
        });
    });
    $(".changefontB").on('click.myfont', function () {
        $("body").removeClass("b").addClass("a");
        $(this).hide();
        $(".changefontA").fadeIn();
        $.cookie('my-font', 'changefontB', {
            path: '/'
        });
    });

    //set the class based on the already set cookie
    var font = $.cookie('my-font');
    if (font) {
        $('.' + font).trigger('click.myfont');
    }
});

Demo: Fiddle

Answer 2

Depending on your target environment etc, I'd consider using HTML5 web storage - sessionStorage (exists just for the existing session), or localStorage (permanently stored or until storage is cleared).

$(window).load(function(){
$(".changefontA").click(function () {
    $("body").removeClass("a").addClass("b");
    $(this).hide();
    $(".changefontB").fadeIn();
    sessionStorage['fontClass'] = "b";
});
$(".changefontB").click(function () {
    $("body").removeClass("b").addClass("a");
    $(this).hide();
    $(".changefontA").fadeIn();
    sessionStorage['fontClass'] = "a";
});
});

On each page, you can check if you have a previous setting stored and set the class accordingly

 if ('fontClass' in sessionStorage) {
   // remove any default class setting here first
   $("body").addClass(sessionStorage['fontClass']);
 }