Question

I have this javascript code that changes the style of the website. but this code changes the style only when you click on it. and after you refresh the page it returns to default. I want it to save the users prefrences. I really like the code and I do not want to change it with another one. can you please help.

<script type="text/javascript">
    $(document).ready(function() {
        $("#fullswitch").click(function() {
            $("#chpheader").removeClass("compact");
               $("#imgg").removeClass("compact");
               $("#chpheader").removeClass("original");
            $("#imgg").removeClass("original");
                            $("#chpheader").addClass("normal");
            $("#imgg").addClass("normal");

        });
        $("#compactswitch").click(function() {
            $("#chpheader").addClass("compact");
            $("#imgg").addClass("compact");
            $("#chpheader").removeClass("original");
            $("#imgg").removeClass("original");
            $("#chpheader").removeClass("normal");
            $("#imgg").removeClass("normal");

        });
          $("#originalswitch").click(function() {
            $("#chpheader").addClass("original");
            $("#imgg").addClass("original");
            $("#chpheader").removeClass("compact");
               $("#imgg").removeClass("compact");
                            $("#chpheader").removeClass("normal");
            $("#imgg").removeClass("normal");

        });

    });
</script>

Answer 1

There is a jQuery cookie plugin there are examples on that page as well so you can see how you can set and read a value from the cookie.

Once the value is read it’s just a simple matter of loading the right theme.

var theme = $.cookie('name_of_selected_theme');
setTheme(theme);

function setTheme(themeName){
   if(themeName == "One"){
     ...
   }else...
}

However cookies only allow for 4KB of data and are passed in every HTTP call. A better idea many be localStorage. You can use YUI Storage Lite library which is < 3KB in size and you can easily use it to save data in browser localStorage and load from it. You can save at least 5MB of data using localStorage.

Example code from the link above:

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.12.01-21-32'
}).use('gallery-storage-lite', function (Y) {

    // For full compatibility with IE 6-7 and Safari 3.x, you should listen for
    // the storage-lite:ready event before making storage calls. If you're not
    // targeting those browsers, you can safely ignore this step.
    Y.StorageLite.on('storage-lite:ready', function () {

        // To store an item, pass a key and a value (both strings) to setItem().
        Y.StorageLite.setItem('kittens', 'fluffy and cute');

        // If you set the optional third parameter to true, you can use any
        // serializable object as the value and it will automatically be stored
        // as a JSON string.
        Y.StorageLite.setItem('pies', ['apple', 'pumpkin', 'pecan'], true);

        // To retrieve an item, pass the key to getItem().
        Y.StorageLite.getItem('kittens');    // => 'fluffy and cute'

        // To retrieve and automatically parse a JSON value, set the optional
        // second parameter to true.
        Y.StorageLite.getItem('pies', true); // => ['apple', 'pumpkin', 'pecan']

        // The length() method returns a count of how many items are currently
        // stored.
        Y.StorageLite.length(); // => 2

        // To remove a single item, pass its key to removeItem().
        Y.StorageLite.removeItem('kittens');

        // To remove all items in storage, call clear().
        Y.StorageLite.clear();

    });

});