Change Background Image in Body Tag and Remain Throughout Site

I'm using jQuery successfully to change the background image of the tag upon clicking a button. However, the change is not setup to stay upon changing pages. How would I set that up?Here's the code:

HTML:

body class="blue"

jQuery:

$("#triangle").click( function(){ 
    $("body").removeClass('green , pink , red').addClass("green");
    $('li#circle').removeClass('selected');
    $('li#x').removeClass('selected');
    $('li#square').removeClass('selected');
  开发者_Go百科  $('li#triangle').addClass('selected');
});
$("#circle").click( function(){ 
    $("body").removeClass('blue , green , pink').addClass("red");
    $('li#triangle').removeClass('selected');
    $('li#x').removeClass('selected');
    $('li#square').removeClass('selected');
    $('li#circle').addClass('selected');
});

$("#x").click( function(){ 
    $("body").removeClass('red , green , pink').addClass("blue");
    $('li#triangle').removeClass('selected');
    $('li#circle').removeClass('selected');
    $('li#square').removeClass('selected');
    $('li#x').addClass('selected');
});

$("#square").click( function(){ 
    $("body").removeClass('blue , green , red').addClass("pink");
    $('li#triangle').removeClass('selected');
    $('li#circle').removeClass('selected');
    $('li#x').removeClass('selected');
    $('li#square').addClass('selected');
});

---

You'll need to set a cookie if you want changes made via JavaScript to persist from page to page. I would recommend the jQuery cookie plugin for setting and reading cookies: http://plugins.jquery.com/project/Cookie

Your code may look something like this (quick sketch, so may not be free of syntax errors):

    //On Window Load
        if ($.cookie('bodyclass')) {
          var bodyClass = $.cookie('bodyclass');
          $('body').addClass(bodyClass);
        }

        //On element click, set your body class
       //eg:
        $('#square')click(function(){
         $.cookie('bodyclass','pink');
        });