Question

我正在构建一个带有3个按钮的弹出窗口！每个按钮需要设置一个cookie，但具有不同的到期时间/日期。我正在使用jquery.cookie！

1个按钮更像是一个会话cookie。因此，当单击此按钮时，弹出窗口需要消失并在我启动新的浏览器屏幕时再次显示。所以，当我在同一个浏览器窗口和同一个网站上打开一个页面时。
1个按钮用于＆＃34;不再显示弹出窗口＆＃34;将cookie设置为7天
在AJAX succes函数中设置了1个cookie，并设置为365天

我无法正确设置不同的到期时间。因此，例如当我单击带有会话cookie的按钮时，当我在网站内打开新页面时，弹出窗口再次显示。

我无法看到我做错了什么！我没有收到任何控制台错误，但饼干只是没有正确设置。

我拥有的是：

 $(document).ready(function(){


    var my_cookie = $.cookie('regNewsletter');

    if (!my_cookie) {
      setTimeout(function(){
        $('#newsletter').modal('show');
      }, 1000);
    }
    $(".close--btn").on("click", function () {
      $.cookie('regNewsletter', true, {
        path: '/',
        domain: ''
      });
    });
    $(".dismiss--btn").on("click", function () {
      $.cookie('regNewsletter', true, {
        path: '/',
        domain: '',
        expires: 7
      });
    });
    console.log(my_cookie);

 // code for removing cookie when session ends //
 window.onbeforeunload = function() {
    $.removeCookie('regNewsletter', { path: '/', domain: '' });
 };


 $("#newsletter .btn").click(function(e){
      e.preventDefault();

       $.ajax({
       ... 

        success: function(txt, status, xhr){
       // some code //

              $.cookie('regNewsletter', true, {
                path: '/',
                expires: 365
              });

        // etc etc //


  });

Answer 1

要设置会话Cookie，您不需要将其删除onbeforeunload，但只需设置一个没有设置到期时间的Cookie。如果默认设置为OK，那么您也不需要设置域名，这是当前网页的域名。

live demo

$(document).ready(function(){
    var my_cookie = $.cookie('regNewsletter');        
    if (my_cookie && my_cookie=="true") {
      alert("Cookie found");
    } else {
      setTimeout(function(){
        //$('#newsletter').modal('show');
        alert("Popup newsletter");
      }, 1000);
    }
    $(".close--btn").on("click", function () {
      // set a session cookie. It'll be automatically deleted
      // when the browser is closed
      $.cookie('regNewsletter', 'true', {
        path: '/'
      });
      alert("session cookie set");
    });
    $(".dismiss--btn").on("click", function () {
      $.cookie('regNewsletter', 'true', {
        path: '/',
        expires: 7
      });
      alert("cookie set for 7 days");
    });
    console.log(my_cookie);
    $("#newsletter .btn").click(function(e){
       e.preventDefault();
       $.ajax({
         url:"setcookie.html",
         success: function(txt, status, xhr){
           $.cookie('regNewsletter', 'true', {
             path: '/',
             expires: 365
           });
           alert("cookie set for 365 days");
         }
       });
     });
 });

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<button class="close--btn">close</button>
<button class="dismiss--btn">dismiss</button>
<span id="newsletter"><button class="btn">ajax</button></span>

Answer 2

您可以使用浏览器开发者工具检查您的Cookie。在谷歌浏览器中，它是F12 - ＆gt;顶部（新打开的框架）的资源，左边的Cookie。

我认为问题可能是您没有为这些Cookie设置正确的domain。

更新：另一个可疑的事情是你删除了窗口unolad上的cookie：

window.onbeforeunload = function() {
    $.removeCookie('regNewsletter', { path: '/', domain: '' });
};

您可以将其设置为7天或365天，但在窗口卸载时会将其删除，因为此处没有3个Cookie，它与使用不同参数配置的Cookie“regNewsletter”相同。

每次设置时，它都会覆盖以前的值（这可能就是你想要的）。但看起来你不应该删除它。

更新2：而不是删除它，尝试在没有过期日期的情况下保留它，根据this question and answer，当用户关闭浏览器时应该自动清除它。根据您的描述，它应该比在onbeforeunload中删除它更好。

Answer 3

为什么你有这段代码？

// code for removing cookie when session ends //
window.onbeforeunload = function() {
   $.removeCookie('regNewsletter', { path: '/', domain: '' });
};

从您的问题中不清楚哪些情况导致了您所看到的问题，但我怀疑这是其中的一部分，如果不是全部的话。

会话cookie的重点是它将在浏览器关闭时自动删除。无需手动删除它。

只要您关闭标签页，窗口或导航到另一个页面，该段代码就会删除您的Cookie。因此，如果您正在执行其中任何一项，然后在同一浏览器会话中重新打开该页面，您将获得您所看到的行为，因为cookie已不再存在。

显然，由于同样的原因，7天和365天的到期也被忽略了。

删除一段代码，然后cookie应该保持适当的长度

Answer 4

jquery-cookie：不再维护，由JS Cookie取代：https://github.com/js-cookie/js-cookie

使用js-cookie

尝试以下操作

$(document).ready(function(){

    var my_cookie = Cookies.get('regNewsletter');

    if (!my_cookie) {
      setTimeout(function(){
      //  $('#newsletter').modal('show');
      }, 1000);
    }
    $(".close--btn").on("click", function () {
        Cookies.set('regNewsletter', true, { path: '' });
    });
    $(".dismiss--btn").on("click", function () {
        Cookies.set('regNewsletter', true, { expires: 7, path: '' });
    });
    //console.log(my_cookie);


 $("#newsletter .btn").click(function(e){
      e.preventDefault();
        $.ajax({
          method: "POST",
          url: ".....",
          data: YourData
        }).done(function( msg ) {
            Cookies.set('regNewsletter', true, { expires: 365, path: '' });
          });

    });

});

Answer 5

您的代码只有几个问题：

您可以使用域的默认值
您不需要 onbeforeunload 方法来删除会话饼干
如果存在cookie，则无需设置侦听器

var my_cookie = $.cookie('regNewsletter');

if (!my_cookie) {

  setTimeout(function() {
    $('#newsletter').modal('show');
  }, 1000);

  // 365 days cookie

  $("#newsletter .btn").click(function(e) {
    e.preventDefault();
    $.cookie('regNewsletter', true, {
      path: '/',
      expires: 365
    });
  });

  // Session cookie

  $(".close--btn").on("click", function() {
    $.cookie('regNewsletter', true, {
      path: '/'
    });
  });

  // 7 days cookie

  $(".dismiss--btn").on("click", function() {
    $.cookie('regNewsletter', true, {
      path: '/',
      expires: 7
    });
  });
}

三通饼干

5 个答案: