jQueryのトグルクッキー機能

Question

ここでは簡単なトグル（ボタンスイッチ）機能がありますが、ユーザーがボタンをクリックしたときにクッキーを追加する方法と位置を覚える方法はわかりません。

誰でもここにクッキーを追加できますか？

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

チェックアウトこのpluggin https://github.com/carhartl/jquery-cookieはあなたがそれを含めた後、あなただけのページをロードするときに最後のユーザーを思い出すことができるようにクッキーの値をチェックし

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

のようなフラグを追加することができ、非常に簡単です選択

何について

<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

ウル頭にこれを追加この？これはhttp://www.quirksmode.org/js（ユーザーがボタンの上に偶数か奇数回

$(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; 
}