javascript - 广告横幅仅在浏览器会话中显示一次

Question

如何在网站中使用 JavaScript 或 jQuery 在浏览器会话期间仅显示一次广告横幅？一旦会话关闭并关闭浏览器，当我再次在浏览器中打开网站时，广告必须再次显示。当我浏览网站横幅时，还有一件事必须显示，除非它没有关闭。

Answer 1

您可以使用 cookie 来记住广告是否显示。

你可以使用这个插件：https ://github.com/carhartl/jquery-cookie

制作显示广告的方法：

showAd() {
 // cookie not set, display the ad and set the cookie
 if($.cookie('adDisplayed') === 'undefined') {
   // code to display the add
   // .....
   // set cookie
   $.cookie('adDisplayed', '1', { expires: 7 }); // set the cookie

 }
} 

要在用户离开页面时销毁 cookie，请绑定 beforeunload 事件

$(window).bind("beforeunload", function() { 
    $.removeCookie('adDisplayed'); 
})

Answer 2

利用sessionStorage

该sessionStorage属性允许您访问session Storage object. sessionStorage 和 sessionStorage 类似Window.localStorage，唯一的区别是存储的数据localStorage没有设置过期时间，当页面会话结束时，存储的数据sessionStorage会被清除。只要浏览器打开并在页面重新加载和恢复后仍然存在，页面会话就会持续。

在新选项卡或窗口中打开页面将导致启动新会话，这与会话 cookie 的工作方式不同。

var banner = document.getElementById('banner');
if (sessionStorage.getItem('set') === 'set') {
  banner.style.display = 'none';
} else {
  sessionStorage.setItem('set', 'set');
}

#banner {
  width: 320;
  height: 50px;
  background: green;
  text-align: center;
}

<div id="banner">Banner</div>

小提琴演示

Answer 3

您可以使用此处解释的fadeIn()和fadeOut()方法

像这样 ：

var myVar = setInterval(myTimer, 1000);

function myTimer() {
    $("#banner").fadeOut();
}

https://jsfiddle.net/bc8jgoga/

Answer 4

您可以使用 JavaScript 设置 cookie 以记住访问。

例子

<div id="banner"></div>
<script>
  if(typeof $.cookie("banner") === 'undefined' || $.cookie("banner") != "1") {
      $("#banner").html("My Banner");
      $.cookie("banner", "1");
  }
  window.addEventListener("beforeunload", function (e) {
      $.removeCookie("banner");
  });
</script>