如果存在 cookie，则显示 div

Question

所以...我一直在尝试为我网站的经常访问者展示一个元素。

我就是这样做的：（你也可以 see this JSfiddle）

$(document).ready(function() {
  // If the 'show cookie is set we show the message
  if (!readCookie('show')) {
    $('#hide').show();
  }
  else {
    $("#hide").hide();
    createCookie("show", true, 1);
  }
  return false;
});

而且我还使用了我从 w3schools

获取的 cookie 功能

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function eraseCookie(name) {
  createCookie(name,"",-1);
}

但是，它不起作用，我很确定它与我的 JQuery 尝试有关，只是不确定我的错误在哪里。

感谢您的帮助！

---编辑更新--- 根据一些建议，这就是我现在得到的：

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
    <script>
      $(function(){
        if(Cookies.get('previsitor')) {
          $('#atc').show(1000);
        }
      });
    </script>
  </head>
  <body>
    <div id="atc" style="display: none">
      <a href="#">Something I want to hide</a>
    </div>
    <script>
      Cookies.set ("previsitor","true",{ expires: 1 });
      alert(document.cookie);
    </script>
  </body>
</html>

我正在使用这个库进行 cookie 管理：https://github.com/js-cookie/js-cookie

但是，它仍然没有按照我的要求执行，我正在使用 alert(document.cookie); 并且看起来 cookie 根本没有被创建...但是为什么！？ :(

Answer 1

您只需要在 if/else 块后创建您的 cookie

$(document).ready(function() {
  // If the 'show cookie is set we show the message
  if (!readCookie('show')) {
    $('#hide').show();
  }
  else {
    $("#hide").hide();
  }
  createCookie("show", true, 1);
});

之前，createCookie 函数根本没有被调用，因为它嵌套在 false 条件中。

Answer 2

更改呼叫

if (readCookie('show')) {
$('#hide').show();
 }
else {
$("#hide").hide();
createCookie("show", true, 1);
}
return false;
});

更改此功能

function readCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) 
{alert(nameEQ.length,c.length);
return c.substring(nameEQ.length,c.length);}
}
return false;
}

这应该有效！

Answer 3

试试这个。这应该可以解决问题。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
  <script type="text/javascript">
    //pass cookie name 
    if(checkCookie('the_cookies')){
      $('#atc').show();  
    }
    else{
      $('#atc').hide();
    }

    function checkCookie($name)
    {
      if (typeof $.cookie($name) === 'undefined'){
        // set cookie if not exists
        $.cookie($name, 'the_value');
        return false;
      } else {
        return true;
      }
    }
  </script>

如果存在 cookie，则显示 div

Show a div if a cookie exists

javascript

cookies

jquery

hide