javascripthtmlsessionstorage

Hide div once per session


Working on a site where visited are presented with a fullscreen slide show upon visiting the index page. (not my idea, client loves it)

I have a button which slides the div up to reveal the homepage content.

I am using the snippet below, but it is not actually hiding the div on refresh... any help would be greatly appreciated!

$(document).ready(function(){
    if(sessionStorage.firstVisit != true) {
        sessionStorage.firstVisit = true;
        $('.splash').show();
    } else {
        $('.splash').hide();
    }
    $("#clickme").click(function(){
        $(".splash").slideUp(1000);
    });
});

Solution

  • The sessionStorage object stores the values as string which is why you are getting this issue. Change your code to:

    $(document).ready(function(){
    if(sessionStorage.firstVisit != "true") {
        sessionStorage.firstVisit = "true";
        $('.splash').show();
    } else {
        $('.splash').hide();
    }
    $("#clickme").click(function(){
        $(".splash").slideUp(1000);
    }); 
    });
    

    And it should work