如何设置 cookie 以在第二页加载时隐藏通知栏？答案

【问题标题】：How to set a cookie to hide a notice bar on second page load?如何设置 cookie 以在第二页加载时隐藏通知栏？
【发布时间】：2017-12-12 20:59:53
【问题描述】：

这是我不想要的：

一个新用户访问了我的网站。固定在视口底部的通知栏可见。
然后用户单击一个菜单项以转到另一个页面。在第二个页面加载时设置了一个 cookie，它将通知栏隐藏 60 天（必须 100% 隐藏，并且在页面加载时不会闪烁，因为 javascript 正在异步加载）。
用户也可以点击“确定”按钮关闭通知栏并设置相同的cookie。

这是我的 HTML：

<div id="cookie-message">
    <span>Cookie notice here <a href="#">Read more</a> <a href="#" id="cookie-message-close">Ok</a></span>
</div>

如何用 jQuery 做到这一点？

谢谢！

【问题讨论】：

第二页加载时是否必须设置 cookie？您可以在第一页加载时删除 cookie，但由于 cookie 起初不存在，因此该栏仍会显示。您只需要确保该栏在开始时始终处于隐藏状态，并且仅在没有 cookie 的情况下显示。这将在第一页加载而不是后续页面加载时显示。您删除的 cookie 应该有 60 天的有效期。
那也行。就是不知道怎么编码，也找不到类似的解决方案。

标签： javascript jquery html css cookies

【解决方案1】：

您可以使用 API 来处理 cookie，让事情变得更简单。

首先，您将display: none; 放入 div cookie 消息中。

关于隐藏或不通知的逻辑，可以在窗口的第一次加载中放置一个监听器：

window.addEventListener('load', function(){...});

通过这种方式，您可以获得加载窗口的时刻。如果此时没有用于通知读取的 cookie，则显示 div ($('#cookie-message').show()，然后设置 cookie。如果已经设置了 cookie，则什么也不做。

关于OK点击，在链接中设置点击监听隐藏通知div（$('#cookie-message').show()）。

为了帮助你，我做了一个simple example 我所说的例子。

【讨论】：

感谢您的帮助！通过以下回复中提到的一些调整，我设法修复了它。 :)
请记住，您还可以在 PHP 中检查 cookie，如果设置了 cookie，则完全省略呈现 cookie 通知，如 in_array("your-cookie-name", array_keys($_COOKIE)) 之类的检查。

【解决方案2】：

非常感谢您的回复，Henrique。但是，由于“jQuery $.cookie 不是函数”错误，我无法让它工作。

我发现“jQuery Cookie”已被弃用，js-cookie 是新版本。通过包含它并将旧 cookie 功能更改为新功能，它现在可以完美运行！

这是我最后的 jQuery 代码，使用“js-cookie”：

window.addEventListener('load', function(){
    jQuery('#cookie-message-close').click(function(){
        jQuery('#cookie-message').hide();
    });

    if (!Cookies.get("cookie-message-bar"))
    {
        jQuery('#cookie-message').show();
        Cookies.set('cookie-message-bar', true, { expires: 60 });
    }
});

请注意，由于 Wordpress 的 noConflict() 模式，我已将 $ 更改为 jQuery，因为我正在使用 Wordpress 进行开发。

【讨论】：

这不是真的。 expires 值应该是一个整数，以天为单位。检查github.com/js-cookie/js-cookie
对不起。意识到您正在使用 Cookies 对象和内置库为时已晚。