运行一次后使用html会话存储隐藏div [英] Use html session storage to hide a div after it's run once

问题描述

我的网站中有一个带有 se-pre-con id 的 div，我只想在每次访问网站时显示一次.我想使用会话存储在运行一次后不显示 se-pre-con 的 html div.但是可以提供一些有关如何处理此问题的建议.

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>

推荐答案

我通过在 html 页面的正文部分使用这个脚本回答了我自己的问题，它确保加载器在每个浏览器会话中只运行一次，就像我一样正在努力实现.

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>

这篇关于运行一次后使用html会话存储隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！