how to save class name in cookies by using jquery?

Question

I don't want to change current choose class after page loaded. So, how to save class name in cookies? HTML

<a href="javascript:" class="red-btn">red</a>
<a href="javascript:" class="green-btn">green</a>
<!-- Result -->
<div class="red" >Testing Text1</div>
<div class="red" >Testing Text2</div>

CSS

.red {
  color: red;
}
.green {
  color: green;
}

Javascript

jQuery(document).ready(function(){
    jQuery(document).on('click',".red-btn",function (){
        alert("red color");
        jQuery(".green").removeClass("green").addClass("red");
    });
    jQuery(document).on('click',".green-btn",function (){
        alert("green color");
        jQuery(".red").removeClass("red").addClass("green");
    });
});

My Project DEMO

http://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery — jaynp, Nov 20 '14 at 07:53
possible duplicate of [How to remove existing class name and add a new one with jQuery and Cookies?](http://stackoverflow.com/questions/804584/how-to-remove-existing-class-name-and-add-a-new-one-with-jquery-and-cookies) — happyvirus, Nov 20 '14 at 08:06

derMrich · Accepted Answer · 2014-11-20T08:39:18.650

0

You could use the jQuery cookie plugin: https://github.com/carhartl/jquery-cookie

The usage in your example is as follows:

jQuery(document).ready(function(){

    //check if cookie has been set
    var cookieColor = $.cookie("selected_class");
    if (cookieColor) {
          //remove default "red" class and add cookie class
          $(".red").removeClass("red").addClass(cookieColor);
    }

    jQuery(document).on('click',".red-btn",function (){
        alert("red color");
         //store the value
         $.cookie("selected_class", "red");

        jQuery(".green").removeClass("green").addClass("red");
    });
    jQuery(document).on('click',".green-btn",function (){
        alert("green color");

         //store the value
         $.cookie("selected_class", "green");
        jQuery(".red").removeClass("red").addClass("green");
    });
});

edited Nov 20 '14 at 08:39

answered Nov 20 '14 at 08:07

derMrich

296
4
10

When i choose green class, red class is to change green class but green class not remain after page loaded. http://jsfiddle.net/h5mk2dsb/1/ – Jurina Nov 20 '14 at 08:25
Sorry, I had a mistake in the first line.... It must be var cookieColor = $.cookie("selected_class"); Instead of "selected_color" – derMrich Nov 20 '14 at 08:32
Ok. I get it by removing extra code (') beside selected_class. – Jurina Nov 20 '14 at 08:42
Plz Suggest !. I not get it chrome , safari and opera browser. I get is firefox only.Why ? – Jurina Nov 20 '14 at 10:55
Are you testing on your own machine i.e. on localhost? Because some browsers won't accept cookies from localhost. See e.g. http://stackoverflow.com/questions/335244/why-does-chrome-ignore-local-jquery-cookies – derMrich Nov 20 '14 at 11:22
Yes, I test my project on localhost? – Jurina Nov 20 '14 at 11:28
At least for Chrome, the easiest workaround is using "127.0.0.1" instead of "localhost" as host name. – derMrich Nov 20 '14 at 12:24

score 0 · Answer 2 · answered Nov 20 '14 at 08:11

$('a[class*=btn]').click(function(){
    if($(this).hasClass('.red-btn'))
    {
        $(".green").removeClass("green").addClass("red");
        $.cookie("color-class", "red");
    }
    else if($(this).hasClass('.green-btn'))
    {
        $(".red").removeClass("red").addClass("green");
        $.cookie("color-class", "green");
    }
});

how to save class name in cookies by using jquery?

2 Answers2