save .addClass with jQuery cookie or local storage

Question

I'm trying to save the .addClass every time I save a stylesheet so that the button remembers

The user can toggle the option on/off.

My simple html:

<div id="btn-switch" class="btn-group" data-toggle="buttons">
    <button class="btn btn-default" type="radio" name="options" id="option1" data-color="{T_THEME_PATH}/normal.css" autocomplete="off">off</button>
    <button class="btn btn-default" type="radio" name="options" id="option2" data-color="{T_THEME_PATH}/inverse.css" autocomplete="off">on</button>
</div>

This is my code:

<script>
$(document).ready(function() {

    if ($.cookie("css")) {
        $("#bg").attr("href", $.cookie("css"));
    }

    $("#btn-switch button").click(function() {
        $("#bg").attr("href", $(this).attr('data-color'));
        $("#btn-switch .active").removeClass("active");
        $(this).addClass("active");
        $.cookie("css", $(this).attr('data-color'), {
            expires: 365,
            path: '/'
        });
        return false;
    });
});
</script>

How can use the same cookie to save the .active class? I would also use local storage for all of this but I dont know how to even start the code snippet I achieved above

Answer 1

Here is a way to use localstorage:

Given this markup (I am using input type="radio" for this example):

<div class="btn-group" data-toggle="buttons" id="btn-switch">
  <label class="btn btn-default">
    <input type="radio" id="option1" name="options" value="1" data-color="{T_THEME_PATH}/normal.css" autocomplete="off"> off
  </label> 
  <label class="btn btn-default">
    <input type="radio" id="option2" name="options" value="2" data-color="{T_THEME_PATH}/inverse.css" autocomplete="off"> on
  </label> 
</div>
<br><br>
<a id="bg" href="{T_THEME_PATH}/normal.css">Background</a>

In the script, listen for the change event on the radio buttons. This is fired for any radio that is checked. First set the #bg href to the clicked radio's color data-attribute (Use jQuery .data()). Then store this href to localstorage. Additionally store the ID of the clicked option to localstorage. Then on subsequent page loads use the items in localstorage to set the correct href and activate the correct radio button:

$(document).ready(function() {
    var csshref = localStorage["css"];
    if (csshref) {
        $("#bg").prop("href", csshref);
    }
    var activeid = localStorage["activeid"];
    if (activeid) {
        $("#" + activeid).prop("checked", true).closest("label").addClass("active");
    }

    $('#btn-switch [type="radio"]').on("change", function() {
        $("#bg").attr("href", $(this).data('color'));        
        localStorage.setItem('css', $(this).data('color'));        
        localStorage.setItem('activeid', $(this).prop('id'));        
        return false;
    });
});

Here is a DEMO

In the demo, try checking on and off and then hittin RUN again. You will see that subsequent runs remember which item was checked and set the href appropriately.

Answer 2

Here is a simple way to do it:

    $(document).ready(function () {
        //on page load check for cookie value and add active class
        if($.cookie("isButtonActive") == 1)
        {
            $("#btn-switch button").addClass("active");
        }

        $("#btn-switch button").click(function() { 
           //your previous code here
           if($("#btn-swtich button").hasClass("active") == true)
           {
               //button was active, de-activate it and update cookie
               $.("#btn-switch button").removeClass("active");
               $.cookie("isButtonActive", "0");
           }
           else
           {
               //button is not active. add active class and update cookie.
               $.("#btn-switch button").addClass("active");
               $.cookie("isButtonActive", "1");

           }
        });
    });