1

How do you show an advertisement banner only once during a browser session using JavaScript or jQuery in a website? Once the session is closed and the browser is closed, the ad must be shown again when I open the website in the browser again. One more thing when i navigate across website banner must display unless it is not closed.

user6543514
  • 11
  • 1
  • 5
  • 1
    You should have a look at [window.sessionStorage](https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage) event it is not exactly the behaviour you are expecting – A. Wolff Jul 03 '16 at 10:22
  • See http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload/ – guest271314 Jul 03 '16 at 10:35

4 Answers4

2

Use sessionStorage

The sessionStorage property allows you to access a session Storage object. sessionStorage is similar to Window.localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores.

Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

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>

Fiddle Demo

Community
  • 1
  • 1
Rayon
  • 36,219
  • 4
  • 49
  • 76
  • How to expire localstorage on browser exit so that when i close browser and restart it, banner must show again.. Any help is appreciated. – user6543514 Jul 03 '16 at 10:07
  • @user6543514 Ooh.. I misread your question... Use sessionStorage instead.. – Rayon Jul 03 '16 at 11:52
  • Ok i have tried that too but when i right click and tries to open it in new tab sessonstorage doesn't work @Rayon. So can i use both localstorage and sessionstorage to achieve desired results ?? Any help is appreciated. – user6543514 Jul 03 '16 at 15:44
2

You can use cookie to remember if ad was displayed or not.

You can use this plugin: https://github.com/carhartl/jquery-cookie

Make a method to display the ad:

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

 }
}

To destroy the cookie when user leaves the page, bind beforeunload event

$(window).bind("beforeunload", function() { 
    $.removeCookie('adDisplayed'); 
})
Răzvan Moldovan
  • 131
  • 4
1

You can set a cookie with JavaScript to remember the visit.

Example

<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>
Fabio Widmer
  • 529
  • 1
  • 7
  • 19
1

You can play with fadeIn() and fadeOut() methods explained here

like this :

var myVar = setInterval(myTimer, 1000);

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

https://jsfiddle.net/bc8jgoga/

nazimboudeffa
  • 939
  • 6
  • 20