How to Keep Cookie Value after page refresh

Question

I'm creating a demo panel for users to change the layout of a Wordpress theme when they arrive at my demo site. The user changes value via a select drop-down box, and a cookie is set at that time.

I'm having trouble showing the ACTIONS that I want implement after the page is refreshed. So the cookie is saving it's value, but after page refresh my CSS actions will not stay in place. I'm not very good with jQuery so any help would be appreciated. Here's the code:

$('#montage-demo-panel select.body-style-layout').change(function () {

        // Apply cookie
        $.cookie('body-style-layout', $(this).val(), { path: '/' });

                    var value = $(this).val();
                    if (value == 'fixed') {
                    var wrapper = $('#wrapper');
                    var header = $('#header');
                    var masthead = $('#masthead');
                    var branding = $('#branding');

                    wrapper.removeAttr('style');
                    header.removeAttr('style');
                    masthead.removeAttr('style');
                    branding.removeAttr('style');

                    wrapper.removeClass('wrapper-full purple-header-full');
                    header.removeClass('header-full');
                    masthead.removeClass('masthead-full');
                    branding.removeClass('branding-full');
                    location.reload();

                   } else {

                    var wrapper = $('#wrapper');
                    var header = $('#header');
                    var masthead = $('#masthead');
                    var branding = $('#branding');
                    var mainbg = $('#main-bg');
                    var access = $('#access');

                    wrapper.removeClass('purple-header');

                    wrapper.addClass('wrapper-full purple-header-full');
                    header.addClass('header-full');
                    masthead.addClass('masthead-full');
                    branding.addClass('branding-full');
                    mainbg.addClass('main-bg-full');
                    access.addClass('access-full');

        // Re-fresh page
        location.reload();
                }
    });

Answer 1

... if you're just applying the style on change(); event, it's definitely wont affect on page refresh. I suggest check the cookie value everytime page refresh, like:

$(function(){
   var cookieval = $.cookie('cookie-key');
   if (cookieval === 'something'){
      //here implement style according to 'something'
   } else {
      //here implement another style
   }
});

good luck !!

UPDATE :

1. place the code above anywhere in your page;

2. just only do set cookie and reload on select change; like:

    $('#montage-demo-panel select.body-style-layout').change(function () {
       $.cookie('body-style-layout', $(this).val(), { path: '/' });
       location.reload();
    }
   

3. done.