jQuery切换cookie功能

Question

我在这里有简单的切换（按钮切换）功能，但我不知道如何添加cookie以及当用户单击按钮时如何记住位置。

任何人都可以帮助我在这里添加cookie？

$(document).ready(function(){ 
$("a.switch_thumb").toggle(function(){ 
    $(this).addClass("swap"); 
    $("ul.display").fadeOut(100, function() { 
    $(this).fadeIn(100).addClass("thumb_view"); 
    }); 
    }, 

function() { 
$(this).removeClass("swap"); 
$("ul.display").fadeOut(100, function() { 
$(this).fadeIn(110).removeClass("thumb_view"); 
    }); 

}); 
}); 

Answer 1

退房这支撑着https://github.com/carhartl/jquery-cookie是很简单的，你有后，你可以只添加一个标志像

$.cookie('cookie_button', 'pressed'); //when pressed or 
$.cookie('cookie_button', 'not_pressed'); //if is the case 

然后加载页面时，检查Cookie值，这样你就可以记住用户最后选择

一下添加到乌尔头

<script> 
/** 
* jQuery Cookie plugin 
* 
* Copyright (c) 2010 Klaus Hartl (stilbuero.de) 
* Dual licensed under the MIT and GPL licenses: 
* http://www.opensource.org/licenses/mit-license.php 
* http://www.gnu.org/licenses/gpl.html 
* 
*/ 
jQuery.cookie = function (key, value, options) { 

    // key and at least value given, set cookie... 
    if (arguments.length > 1 && String(value) !== "[object Object]") { 
     options = jQuery.extend({}, options); 

     if (value === null || value === undefined) { 
      options.expires = -1; 
     } 

     if (typeof options.expires === 'number') { 
      var days = options.expires, t = options.expires = new Date(); 
      t.setDate(t.getDate() + days); 
     } 

     value = String(value); 

     return (document.cookie = [ 
      encodeURIComponent(key), '=', 
      options.raw ? value : encodeURIComponent(value), 
      options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE 
      options.path ? '; path=' + options.path : '', 
      options.domain ? '; domain=' + options.domain : '', 
      options.secure ? '; secure' : '' 
     ].join('')); 
    } 

    // key and possibly options given, get cookie... 
    options = value || {}; 
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; 
    return (result = new RegExp('(?:^|;)' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; 
}; 
</script> 
<script type="text/javascript"> 
$(document).ready(function(){ 


    if($.cookie("button")=="thumb_view"){ 
    $('ul.display').addClass($.cookie("button")); 
    $("a.switch_thumb").addClass("swap"); 

    }else{ 
    $('ul.display').removeClass($.cookie("button")); 
    $("a.switch_thumb").removeClass("swap"); 

    } 



    $("a.switch_thumb").toggle(function(){ 

     $(this).addClass("swap"); 
     $("ul.display").fadeOut("fast", function() { 
     $(this).fadeIn("fast").addClass("thumb_view");   
     }); 
     $.cookie("button", "thumb_view"); 

     }, function() { 
     $.cookie("button", "not_thumb_view"); 
     $(this).removeClass("swap"); 
     $("ul.display").fadeOut("fast", function() { 
     $(this).fadeIn("fast").removeClass("thumb_view"); 

     }); 
     $.cookie("button", "not_thumb_view"); 

    }); 




}); 
</script> 

Answer 2

什么这个？这将根据事实button_cookie设置为值1或0，用户无论是在按钮偶数或奇数倍

$(document).ready(function(){ 
    $("a.switch_thumb").toggle(
     function(){ 
      $(this).addClass("swap"); 
      $("ul.display").fadeOut(100, function() { 
       $(this).fadeIn(100).addClass("thumb_view"); 
      }); 
      setCookie('button_pressed',!$(this).hasClass("swap")); 
     }, 
     function() { 
      $(this).removeClass("swap"); 
      $("ul.display").fadeOut(100, function() { 
       $(this).fadeIn(110).removeClass("thumb_view"); 
      }); 
      setCookie('button_pressed',$(this).hasClass("swap")); 
     } 
    ); 
}); 

/** 
* implementation of setCookie function 
* this function creates only session cookie, can be amended so to use expires param 
*/ 
function setCookie(name, value){ 
    document.cookie=name+'='+value; 
}