如何使用cookie记忆显示和隐藏div

Question

我可以使用如下HTML：

<div id='mainleft-content'>content is visible</div>
<div id="expand-hidden">Button Expand +</div>

我使用Jquery来显示/隐藏div，例如：

 $(document).ready(function () {
    $("#expand-hidden").click(function () {
        $("#mainleft-content").toggle();
    });
});

我想使用cookie来记住访客操作时div的隐藏或显示状态。您能告诉我如何实现吗？感谢您的帮助。

请参见JSFIDDLE。

- Hai Tien

---

感谢所有的建议。 - Hai Tien

Answer 1

这里是有效的 JSFiddle 示例

您可以使用 is(":visible") 来判断一个 div 是否可见，它会返回 true 或 false：

if ( $("#mainleft-content").is(":visible") ){
   alert('its visible');
}
else{
   alert('div is hidden');
}

如果你仍需要cookies，你可以添加一个函数：

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);
        }
    }
}

并设置cookie：

$(document).ready(function () {
    $("#expand-hidden").click(function () {
        $("#mainleft-content").toggle();
        SetCookie("DivStateVisible", $("#mainleft-content").is(":visible"),5);
    });
});

使用jquery-cookie和jQuery：

function setCookie(c_name, value, exdays) {
    $.cookie(c_name, value, { expires : exdays });
}

function getCookie(c_name) {
    return $.cookie(c_name);
}

- Zaheer Ahmed

---

你还没有回答我的问题。关于cookie怎么样？ - Hai Tien

你能给我关于我的演示的更新吗？我测试了，但它无法保存状态。是我做错了什么吗？:( - Hai Tien

@happi，请现在检查 Fiddle。 - Zaheer Ahmed

Answer 2

使用http://plugins.jquery.com/cookie/插件。

$(document).ready(function () {
    $("#mainleft-content").toggle(!!$.cookie("visible"));
    $("#expand-hidden").click(function () {
        $("#mainleft-content").toggle(function() { 
             $.cookie("visible", $("#mainleft-content").is(':visible') ? 1 : 0);
        });
    });
});

- Sergey

Answer 3

你可以使用插件：https://github.com/carhartl/jquery-cookie，并设置状态如下：

$.cookie("visible", 1);

- Kirill