Page overlay only on first time load

Question

On my home page, I have an overlay with a button to enter the website. On click, the overlay disappears. The overlay should only appear once, on first page load. Here is my issue:

1. When I first enter the home page, the overlay appears (as it should be)
2. When I then click on the logo or the home menu item in the navigation, the home page reloads (as normal), BUT the overlay is being displayed again (for the second time).
3. When I click again on the logo or the home menu item (now for the third time), the overlay is nog being displayed anymore (as it should be).

My question: why is the overlayd being displayed the second time I enter the page?

Here is my code:

var session = sessionStorage.getItem('session');
    console.log(session);
    if (session !== null) {
        $('.overlay').hide();
    }
    sessionStorage.setItem('session', 1);

Answer 1

Use the following code. it's set overlay show only once in 24 hours when you visit the website first time.

    $(document).ready(function(){
               if ($.cookie('overlay_status') != '1') {
                setTimeout(function() {
                    $('.overlay').show();
                    $.cookie('overlay_status', '1', { expires: 1}); 
                    }, 20000); 
                } else {
                 $('.overlay').hide();
}
    });

Answer 2

This eventually seems to do the trick for me...

function setCookie(key, value, expiry) {
    var expires = new Date();
    expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}

function getCookie(key) {
    var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
    return keyValue ? keyValue[2] : null;
}

function eraseCookie(key) {
    var keyValue = getCookie(key);
    setCookie(key, keyValue, '-1');
}

if (getCookie('overlay_status') != '1') {
    setTimeout(function () {
        $('.overlay').show();
        setCookie('overlay_status', '1', '1');
    }, 20000);
} else {
    $('.overlay').hide();
}