JQuery - 使用Cookie記住切換狀態

Question

我有以下JQuery切換頁面上的標題。我如何使用JQuery Cookie來記住切換狀態？

$(document).ready(function() { 
    $('#btnToggleHeader').click(function() { 
    $('#Header').slideToggle('slow'); 
    }); 
}); 

非常感謝！

Answer 1

關於javascript和cookies的一個很好的資源是http://www.w3schools.com/JS/js_cookies.asp。

根據這個網站，我們給出3種功能於：（。這給了我們如何使用其他兩個演示）setCookie方法，getCookie方法和checkCookie

要設置切換的初始狀態，這樣的事情作品：

$(document).ready(function(){ 
// The initial load event will try and pull the cookie to see if the toggle is "open" 
var openToggle = getCookie("open") || false; 
if (openToggle) 
    $("#Header").show(); 
else 
    $("#Header").hide(); 

// The click handler will decide whether the toggle should "show"/"hide" and set the cookie. 
$('#btnToggleHeader').click(function() { 
    var closed = $("#Header").is(":hidden"); 
    if (closed) 
     $("#Header").show(); 
    else 
     $("#Header").hide(); 
    setCookie("open", !closed, 365); 
}); 

}); 

注：這只是一個參考，我沒有時間去測試。希望它有幫助。

Answer 2

下面是最終的工作版本：

$(document).ready(function() { 
    $("#btnSearchToggle").click(function() { 
     var closed = $("#Header").is(":hidden"); 
     if (closed) 
      $("#Header").show(); 
     else 
      $("#Header").hide(); 

     setCookie("open", closed, 365); 
    }); 

    var openToggle = getCookie("open");  
    if (openToggle=="true") {   
     $("#Header").show(); 
    } 
    else {   
     $("#Header").hide(); 
    } 

}); 

function setCookie(c_name, value, exdays) { 
    var exdate = new Date(); 
    exdate.setDate(exdate.getDate() + exdays); 
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString()); 
    document.cookie = c_name + "=" + c_value; 
} 

function getCookie(c_name) { 
    var i, x, y, ARRcookies = document.cookie.split(";"); 
    for (i = 0; i < ARRcookies.length; i++) { 
     x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("=")); 
     y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1); 
     x = x.replace(/^\s+|\s+$/g, ""); 
     if (x == c_name) { 
      return unescape(y); 
     } 
    } 
}