Show welcome div only once per user / browser session

Question

I want to show a welcome div only once per user or session. I know that there is Jquery option. Since am a newbie to jquery, I have not been able to resolve it myself. Please help

$(document).ready(function() {
  $("#close-welcome").click(function() {
    $(".welcome").fadeOut(1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="welcome">
  <div>
    <h1>Hello..!<br> Welcome to ABC
    <br>
    </h1>
    <h2>We wish you a Great Day..!</h2>
    <br>

    <h2><a id="close-welcome" href="#">Thank you.. and please take me to the     website</a> </h2>
  </div>
</div>

I want to show this welcome page only once, till the user closes the browser.. Awaiting valuable help

Answer 1

Set a cookie.

$(document).ready(function() {
    if ($.cookie('noShowWelcome')) $('.welcome').hide();
    else {
        $("#close-welcome").click(function() {
            $(".welcome").fadeOut(1000);
            $.cookie('noShowWelcome', true);    
        });
    }
});

You need to include jQuery.cookie javascript file.

https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js

Answer 2

In case your client doesn't eat cookies

You can use sessionStorage, after all that's what they are meant for exactly, keep a collection of data at hand throughout the session.

For best user experience, you should start with initial [wellcomeElement].style.display = "none" property in your existing CSS.

So, the whole procedure would become as simple as...

1. check if the welcome message has been shown
2. Show! : Take-no-action!

Done.

Example Code:

  "message" in sessionStorage ? 0 :
  [wellcomeElement].style.display = "block",
  sessionStorage.setItem("message",true);

The code snip can be put, (but more than preferably) in a script-tag right after the welcome message element.

However, for full backward compatibility, you can always fall back to using the session name property as in:

 /message/.test( name ) ? 0 :
 [wellcomeElement].style.display = "block",
 name = 'message';

Regards.