Page overlay only on first time load

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);