JQuery - 使用 Cookie 记住切换状态答案

【问题标题】：JQuery - Remember Toggle State with CookieJQuery - 使用 Cookie 记住切换状态
【发布时间】：2013-06-18 18:34:35
【问题描述】：

我有以下 JQuery 来切换页面上的标题。如何使用 JQuery Cookie 记住切换状态？

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

非常感谢！

【问题讨论】：

标签： jquery jquery-cookie

【解决方案1】：

关于 javascript 和 cookie 的一个很好的资源是 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 );
});

});

注意：这只是一个参考，我没有时间测试。希望对您有所帮助。

【讨论】：

哇，嘘！逻辑就在那里，请发布您的最终代码 - 保持干净，这很有帮助！

【解决方案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);
        }
    }
}

【讨论】：