Question

I have created a responsive design that allows the user to switch between the mobile and desktop layouts. My only issue is that if a user wants to view the desktop version and then clicks another link, or refreshes the page, the mobile version is loaded again. I want to create a cookie so that it remember’s the user’s preference on each page load.

Here is the javascript I am using:

$(document).ready(function () {
    $('.full_site').click(function() {
        $('body').removeClass('mobile');
        $('body').addClass('desktop');
        $('.views-row').each(function(i,e) {
            $('.content .body', e).insertAfter($('.content .loc-text', e));
        });
    });

    $('.mobile_site').click(function() {
        $('body').removeClass('desktop');
        $('body').addClass('mobile');
        $('.views-row').each(function(i,e) {
          $('.content .body', e).insertBefore($('.content .field-name-field-image-one', e));
        });

        $('.views-row').each(function(i,e) {
          $('.content .body', e).insertBefore($('.content .field-name-field-image', e));
        });
    });
}); 

Answer 1

Below is a rough draft with comments included to help you through the process:

$(document).ready(function () {
    $('.full_site').click(function() {
        document.cookie = "type=full"; //set/update the cookie
        $('body').removeClass('mobile');
        $('body').addClass('desktop');
        $('.views-row').each(function(i,e) {
            $('.content .body', e).insertAfter($('.content .loc-text', e));
        });
    });

    $('.mobile_site').click(function() {
        document.cookie = "type=mobile"; //set/update cookie
        $('body').removeClass('desktop');
        $('body').addClass('mobile');
        $('.views-row').each(function(i,e) {
          $('.content .body', e).insertBefore($('.content .field-name-field-image-one', e));
        });

        $('.views-row').each(function(i,e) {
          $('.content .body', e).insertBefore($('.content .field-name-field-image', e));
        });
    });
   if(/*check to see what the cookie is...*/) 
     $(".mobile_site").trigger("click"); //trigger the mobile site
   else
     $(".full_site").trigger("click"); //trigger the full site
}); 

More about cookies: https://developer.mozilla.org/en-US/docs/DOM/document.cookie

and: http://www.quirksmode.org/js/cookies.html