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

如何在网站中使用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

你可以使用这里解释的fadeIn（）和fadeOut（）方法

像这样 ：

 var myVar = setInterval(myTimer, 1000); function myTimer() { $("#banner").fadeOut(); } 

https://jsfiddle.net/bc8jgoga/

Answer 3

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

例

Answer 4

使用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; } 

 
Banner