如何指定Cookie在整个网站上显示直到关闭?

时间:2019-05-21 09:26:36

标签: javascript jquery cookies jquery-cookie

我制作了一个div,每天向用户显示一次,直到他关闭为止,但是我遇到的问题是,在购物并返回开始站点后,它会自动关闭。

我想要一些有关解决此问题的建议。

我尝试使用document.cookie = 'hidecookiehinweisheader=1; domain=; expires=...代替document.cookie ='hidecookiehinweisheader=1; path=/; expires=...,而将domain=代替path=之后,我无法再关闭div,它会一直停留在那里直到页面刷新或直到购物并返回开始站点。

$(function() {
  $('#hinweis_header').trigger('onload');
});

function setCookieHinweisHeaderCounter() {
  if (document.cookie.indexOf('cookiehinweisheaderCounter=2') === -1) {
    if (document.cookie.indexOf('cookiehinweisheaderCounter=1') === -1) {
      document.cookie = 'cookiehinweisheaderCounter=1; path=/;';

    } else if (document.cookie.indexOf('cookiehinweisheaderCounter=1') !== -1) {
      document.cookie = 'cookiehinweisheaderCounter=2; path=/;';
    }
  }
}

function setCookieHinweisHeader() {
  var ablauf = new Date();
  var inXTagen = ablauf.getTime() + (24 * 60 * 60 * 1000); // 1 Tage
  ablauf.setTime(inXTagen);
  document.cookie = 'hidecookiehinweisheader=1; domain=; expires=' + ablauf.toGMTString();
}

if (document.cookie.indexOf('hidecookiehinweisheader=1') !== -1 || document.cookie.indexOf('cookiehinweisheaderCounter=2') !== -1) {
  jQuery('#hinweis_header').hide();
} else {
  jQuery('#hinweis_header').prependTo('meta_navi');
  jQuery('.hinweis-header').show();
}
<div id="hinweis_header" onload="setCookieHinweisHeaderCounter()">
  <span style="font-weight: bold;"><a class="hinweis-header" href="<?=SHOP_URL_HTTPS?>/<?=$param["links"]["service"]?>/<?=$sprachdatei["links"]["link_hinweis"]?>"><b>Nur heute: 10 % auf alle Jersey Stoffe >><?=$sprachdatei['header']['hinweis_header']?></b></a></span>
  <div class="close-btn"><span id="hinweis-close" class="rwd-buttinette-icon rwd-icon-remove-circle-1" onclick="setCookieHinweisHeader();jQuery('#hinweis_header').slideUp" style="margin-top: -8px; float: right; color: #fff; font-size: 23px;"></span></div>
</div>

要清楚一点,我想在整个站点上显示div #hinweis_header,直到有人用跨度#hinweis-close将其关闭为止。刷新后可以消失,没关系。

1 个答案:

答案 0 :(得分:0)

  1. 通过添加<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>

  2. 使用https://github.com/js-cookie/js-cookie
  3. 使用此代码DEMO

$(function() {
  var closed = Cookies.get('hinweis');
  if (!closed) {
    $('#hinweis_header').show();
  } 

  $('#hinweis-close').on('click',function() {
    Cookies.set('hinweis', 'seen');
    $('#hinweis_header').slideUp();
  });
});
#hinweis-close {
  margin-top: -8px;
  float: right;
  color: #fff;
  font-size: 23px;
}
#hinweis_header { display:none }
<div id="hinweis_header">
  <b><a class="hinweis-header" href="<?=SHOP_URL_HTTPS?>/<?=$param["links"]["service"]?>/<?=$sprachdatei["links"]["link_hinweis"]?>">Nur heute: 10 % auf alle Jersey Stoffe >><?=$sprachdatei['header']['hinweis_header']?></a></b>

  <div class="close-btn"><span id="hinweis-close" class="rwd-buttinette-icon rwd-icon-remove-circle-1"></span></div>
</div>