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