How can I set/store cookie when anchor clicked

问题

I am trying to use Cookie so that a default style OR a specific style is applied in reference to the anchor tag clicked, even when the browser is closed/reopen. So if the user clicked the second link, close or refresh the browser and reopen, than the style should still be active, if it is their first time the default should apply. This is 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: (Compliments of StackOverflow)

<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>

回答1:

There is a cookie plugin for jQuery you can use to set and get cookies, but if browsers older than IE8 are'nt an issue, I'd go for local storage instead and just use the default style for the 1% of visitors using older browsers.

If you add a class to your links, you can target all of them in one function, and just set the class based on the ID clicked, here's an example 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

回答2:

Cookies are get and set by manipulating the cookie attribute of the document object (document.cookie). The Mozilla Developer Network has a great article talking about this as well as providing convenience 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 those methods.

Otherwise, you can check for your cookie and handle that logic in the usual way in the ready callback.

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

As for setting that cookie based on a click of an anchor, you can either use the onclick attribute, or set the href attribute to "javascript:yourFunction();", or by using jQuery's click method.

回答3:

like this example

$(document).ready(function()
{
   $('a').click(function(event)
   {

        $.cookie(//set ur cookie name & value);

   });
 });

回答4:

Try this:

// 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

});

来源：https://stackoverflow.com/questions/12774773/how-can-i-set-store-cookie-when-anchor-clicked

标签

javascript

jquery