弹出1个小时的年龄验证Cookie

时间:2018-11-07 19:58:15

标签: jquery cookies popup jquery-cookie

我弹出一个年龄验证窗口,该窗口会安装一个cookie,以便在一段时间内记住用户的操作。我已经在堆栈溢出的其他文章中做了此操作,但是我有一些疑问。

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);
}

使用Cookies的JS(无效)

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

我的第一个问题是为什么不能使用Cookies?

第二个是我想在上述一段时间内保留cookie。现在,使用localStorage方法仅显示一次弹出窗口,如果我接受并刷新该页面,则不再显示该弹出窗口,但我想那将永远不会显示。我尝试在函数内部使用此控件来控制cookie激活的时间。

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

我猜'7'表示7天,但是如果输入'0'则表示7天。可以让Cookie停留一小时,以查看其是否正常工作?

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

Br

1 个答案:

答案 0 :(得分:1)

天数只是在插件中乘以秒后的数字。如果您希望将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();
  });

});