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

Posted 2023-03-08

【中文标题】切换状态 Cookie 设置成功，但是没有 cookie 存在时的行为呢？

【英文标题】：Toggle state Cookie set successfully, but what about behaviour when no cookie exists?

【发布时间】：2019-06-27 14:05:24

【问题描述】：

我已成功编码以下行为：

三个 div 用 .toggle() 隐藏/显示； 当用户使用 .toggle();它还设置了一个 cookie 来记住切换状态

这是上面代码的 jQuery，它适用于 cmets：

    <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。这不起作用。

【参考方案1】：

1)

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

2)

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

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

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

您可以通过查看server-side vs. client-side cookies 和jquery cookies 了解有关这些主题的更多信息

【讨论】：

嘿，简 - 我没有使用 node.js，所以我无法按照建议实现。您能否扩展一下使用此代码对用户的妥协？我不知道这会带来安全问题。

Cookie 是包含用户信息（例如用户名）的加密代码。如果我是一名黑客并且知道您如何加密您的 cookie，我可以使用任何人的用户名创建一个 cookie 并访问该站点的任何部分。任何浏览器端客户端都可以看到<script> 标签内的所有内容。

另外，你使用的是什么后端语言？

我只使用 jQuery 和 Vanilla，该网站是一个 phpBB 论坛。有什么关于我可以设置 cookie 的更安全方式的建议吗？顺便说一句，我使用 :visible 而不是 :hidden 来解决我原来的问题。

对不起，我的回答具有误导性，并且略有不正确。我编辑了它。如果您不使用客户端 cookie 进行授权（这是我的假设），那么您应该没问题。