使用 jquery cookie 保存 div 切换状态答案

【问题标题】：Save div toggle state with jquery cookie使用 jquery cookie 保存 div 切换状态
【发布时间】：2013-08-16 19:52:27
【问题描述】：

我知道如何实现这一点，但似乎在所有类似的帖子中，没有人能够给出一个简单的例子。我想简单地将“marketing-message-global”的切换状态的值存储在 cookie 中。如果用户单击“hide-marketing-message-btn”，则切换状态将存储在 cookie 中。当用户刷新页面时，将使用存储的切换状态，并隐藏被切换的 div。

<div id="marketing-message-global">
</div>
<div id="hide-marketing-message-btn">
</div>

$(document).ready(function() {
 if $('#hide-marketing-message-btn").clicked()
 {
    $("#marketing-message-global").hide();
    $.cookie("toggle-state") == true;
 }

if ($.cookie("toggle-state") == true)
{
    $("#marketing-message-global").hide();
}
else if ($.cookie("toggle-state") == false)
{
$("#marketing-message-global").show();
}
 });
</script>

【问题讨论】：

标签： jquery jquery-cookie

【解决方案1】：

我使用了 jquery cookie 插件 (https://github.com/carhartl/jquery-cookie)

    $(function(){
       if($.cookie){
           //By default, if no cookie, just display.
           $("#marketing-message-global").toggle(!(!!$.cookie("toggle-state")) || $.cookie("toggle-state") === 'true');
    }

    $('#hide-marketing-message-btn').on('click', function(){
        $("#marketing-message-global").toggle();
        //Save the value to the cookie for 1 day; and cookie domain is whole site, if ignore "path", it will save this cookie for current page only;
        $.cookie("toggle-state", $("#marketing-message-global").is(':visible'), {expires: 1, path:'/'}); 
});

});

【讨论】：

我试过你的版本，我的页面有 jquery cookie 插件，但它没有保存 div 的切换关闭状态。

【解决方案2】：

我认为这应该可行：

1) 如果你想通过其他一些事件来设置cookie：

$(document).ready(function() {
    if ($("#hide-marketing-message-btn").prop("hidden") == "hidden")
    {
        $("#marketing-message-global").hide();
        $.cookie("toggle-state") == true;
    }
    else
    {
        // ... 
    }
});

2) 通过点击 div 并立即执行切换来设置 cookie：

$(document).ready(function() {
    $("#hide-marketing-message-btn").click(function() { 
        if ($("#hide-marketing-message-btn").prop("hidden") == "hidden")
        {
            $("#marketing-message-global").hide();
            $.cookie("toggle-state") == true;
        }
        else
        {
            // ... 
        }
    });
});

【讨论】：