javascriptsyntaxsessionstorage

Use html session storage to hide a div after it's run once


I have this div with an id of se-pre-con in my website which I only want to display once per website visit. I want to use session storage to display none the html div of se-pre-con after it's run once. But could do with some advice about how to approach this.

 <div class="se-pre-con"></div> // the relevant html

.no-js #loader { display: none;  } // the relevant css
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(Preloader_10.gif) center no-repeat #fff;
}

 <script> // the relevant jquery

// Wait for window load
$(window).load(function() {
    // Animate loader off screen
    $(".se-pre-con").fadeOut("slow");;
});


</script>

Solution

  • I answered my own question by using this script in the body section of the html page, it ensures the loader only ever runs once per browser session, exactly as I was trying to achieve.

    <script>
    if (sessionStorage.getItem('se-pre-con') !== 'true'){
    // if the storage item 'se-pre-con', does not exist, run the code in curly 
    braces
    document.getElementById("se-pre-con").style.display = 'block';}
    
    else {
    document.getElementById('se-pre-con').style.display="none";
    // else (when above if statement is not met) hide the loader
    }
    
    
    sessionStorage.setItem('se-pre-con','true');
    
    </script>