How can I set / save a cookie when clicking the link button

Question

I'm trying to use a cookie so that the default style or a specific style applies to the anchor anchor tag, even when the browser is closed / reopened. Therefore, if the user clicks the second link, close or refresh the browser and reopen what the style should be active if this is the first time that it should be applied by default. It's a little over my turf.

Here is the HTML:

<a id="default" href="#/">Default Style</a> <a id="style2" href="#/">Style 2</a> <a id="style3" href="#/">Style 3</a> <ol> <li><span>Hello World</span></li> </ol> 

JQuery: (StackOverflow compliments)

 <script type="text/javascript"> $('#default').on('click',function(){ $('ol li span').removeClass(function() { return $(this).attr('class'); }).addClass('default'); }); $('#style2').click(function(){ $('ol li span').removeClass(function() { return $(this).attr('class'); }).addClass('style2'); }); $('#style3').click(function(){ $('ol li span').removeClass(function() { return $(this).attr('class'); }).addClass('style3'); }); </script> 

CSS

 <style type="text/css"> .default{ color: #333; } .style2{ color: #999; } .style3{ color: #800; } </style> 

Answer 1

There is a cookie plugin for jQuery that you can use to set and receive cookies, but if browsers older than IE8 are not a problem, I would choose local storage and just use the default style for 1% of visitors using older browsers.

If you add a class to your links, you can target all of them to one function and simply set the class based on the specified identifier, here is an example of using local storage:

 $(function() { if (localStorage.getItem('style')) { $('ol li span').addClass(localStorage.getItem('style')); }else{ $('ol li span').addClass('default'); } $('.styles').on('click', function(e) { e.preventDefault(); var styles = ['default', 'style2', 'style3'], currStyle = this.id; $('ol li span').removeClass(styles.join(' ')).addClass(currStyle); localStorage.setItem('style', currStyle); }); });​ 

Fiddle

Answer 2

Cookies are set and configured by manipulating the cookie attribute of the document object (document.cookie). The Mozilla Developer Network has a great article on this, as well as providing convenient methods for getting and setting cookies. https://developer.mozilla.org/en-US/docs/DOM/document.cookie

NOTE. jQuery does not come with any cookie related methods, but plugins are available that put syntactic sugar ($ .cookie) around these methods.

Otherwise, you can check your cookie and process this logic in the usual way in a ready-made callback.

  $(body).ready(function(){ if (document.cookie.match("cookie_name")) { // Handle logic here } }); 

Regarding setting this cookie based on the snap click, you can either use the onclick attribute or set the href attribute to "javascript: yourFunction ();" or using the jQuery click method.

Answer 3

like this example

 $(document).ready(function() { $('a').click(function(event) { $.cookie(//set ur cookie name & value); }); }); 

Answer 4

Try the following:

 // You can set all your default, style2, style3 css code inside this active.css function appendStyleSheet() { $('head').append('<link rel="stylesheet" href="css/active.css" type="text/css" id="active_stylesheet"/>'); } // append the style sheet on load if the cookie is set to true if ($.cookie('active') == 'true') { appendStyleSheet(); } else { $('ol li span').addClass("default"); } $("a").click(function () { var styles = ['default', 'style2', 'style3'], currStyle = this.id; $('ol li span').removeClass(styles.join(' ')).addClass(currStyle); appendStyleSheet(); $.cookie('active', 'true'); // set the cookie to true });