广告横幅只显示一次浏览器会话

advertisement banner show only once in browser session

本文关键字：一次 浏览器 会话 显示      更新时间：2023-09-26

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

您可以使用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'); 
})

使用 sessionStorage

sessionStorage属性允许访问session Storage object。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>

<

小提琴演示/h2>

您可以使用这里解释的fadeIn()和fadeOut()方法

像这样:

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    $("#banner").fadeOut();
}
https://jsfiddle.net/bc8jgoga/

您可以使用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>
相关文章：