1 小时弹出用于年龄验证的 Cookie

1 hour Cookie for Age Verification pop up

我有一个安装 cookie 的年龄验证弹出窗口,以便记住用户在特定时间段内的操作。我在堆栈溢出时跟随其他 post 完成了此操作,但我有一些疑问。

css

#popup {
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
}

JS 使用 Cookie(不起作用)

$(function() {

  //Check it the user has been accpeted the agreement
  if (!(document.cookie && document.cookie == "accepted")) {
    $("#popup").show();
  }

  $('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

    //Set a cookie to remember the state
    document.cookie = "accepted";

    e.preventDefault();
  });

});

JS 使用本地存储

$(function() {

  //Check it the user has been accpeted the agreement
  if (!localStorage.getItem('accepted')) {
    $("#popup").show();
  }

  $('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

    //Set a cookie to remember the state
    localStorage.setItem('accepted', true);

    e.preventDefault();
  });
});

我的第一个问题是为什么使用 Cookie 不起作用?

第二个是如上所述,我希望将 cookie 保留一段时间。现在使用 localStorage 方法只显示一次弹出窗口,如果我接受并刷新页面不再显示弹出窗口,但我想这不会永远显示它。我已经尝试在函数中使用它来控制 cookie 的活动时间。

$.cookie('accepted','yes', {expires: 7, path: '/'});

我猜 '7' 表示 7 天,但如果输入 '0' 也一样。是否可以将 cookie 放置一小时以查看它是否正常工作?

非常感谢您一如既往的帮助。

Br

天数只是插件中稍后乘以秒数的数字。如果你想让cookie保存1小时,那么你可以试试

$.cookie('accepted','yes', {expires: 1/24, path: '/'});

您可以试试下面的代码

$(function() {

  //Check it the user has been accepted the agreement
  if (!$.cookie('accepted')) {
    $("#popup").show();
  }

  $('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = $(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

    //Set a cookie to remember the state
    $.cookie('accepted','yes', {expires: 1/24, path: '/'});
    e.preventDefault();
  });

});