时间戳

首页 > 解决方案 > 切换状态 Cookie 设置成功，但是没有 cookie 存在时的行为呢？

javascript - 切换状态 Cookie 设置成功，但是没有 cookie 存在时的行为呢？

问题描述

我已成功编码以下行为：

这是上面代码的 jQuery，它可以工作，带有注释：

    <script>
    $(document).ready(function () {

    // If user clicks the toggle it hides/shows the divs

    $(" .togglediv ").click(function () {
        var closed = $(" .siemaholder, .c_l_off, .c_r_off ").is(":hidden");
        if (closed)
            $(" .siemaholder, .c_l_off, .c_r_off ").show();
        else
            $(" .siemaholder, .c_l_off, .c_r_off ").hide();

    // If user uses the toggle it sets a cookie to remember the toggle state

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

    var openToggle = getCookie("open");

    if (openToggle=="true") {        
        $(" .siemaholder, .c_l_off, .c_r_off ").show();
    }
    else {        
        $(" .siemaholder, .c_l_off, .c_r_off ").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);
        }
    }
}
</script>

我遇到的问题是，当不存在 cookie 时（当用户第一次访问该页面并且尚未生成任何 cookie 时），默认情况下隐藏div 。我不希望这样 - 我希望它们默认显示。

我的意图是默认显示它们，直到使用 .toggle(); 设置 cookie；我之前提到的。这样当用户第一次访问页面时，内容正在显示，然后可以由用户手动“隐藏”（从那里开始记住）。

谁能帮帮我？

到目前为止，我已经尝试$(" .siemaholder, .c_l_off, .c_r_off ").show();在脚本的开头使用，因此默认情况下会显示 div，直到涉及到 cookie。这没有用。

标签： javascriptcookies

解决方案

1)

有用于授权用户的服务器端 cookie。这些 cookie永远不应在客户端脚本中设置，因为它们会导致安全问题（在我的原始答案中有所描述）。

2)

如果客户端 cookie不用于授权用户，则它们可以用于默认用户设置（如您的情况）。

你应该做的是让jquery设置一个cookie，$(document).ready(如下所示：

$(document).ready(function () {
if (!$.cookie('open') || !$.cookie('closed')) {
    $.cookie('open', 1, {expires: 10});
}
$(" .togglediv ").click(function () {
    var closed = $(" .siemaholder, .c_l_off, .c_r_off ").is(":hidden");
    if (closed)
        $(" .siemaholder, .c_l_off, .c_r_off ").show();
        $.removeCookie('closed');
        $.cookie('open', 1, {expires: 10});
    else
        $(" .siemaholder, .c_l_off, .c_r_off ").hide();
        $.removeCookie('open');
        $.cookie('closed', 1, {expires: 10});

您可以通过查看服务器端与客户端 cookie和jquery cookie来了解有关这些主题的更多信息

推荐阅读