使用 html 会话存储在运行之后隐藏 div 一次

Question

我的网站上有一个 ID 为 se-pre-con 的 div，我只想在每次网站访问时显示一次。我想使用会话存储来显示none html div se-pre-con 在它运行一次之后。但是可以就如何处理这个问题提出一些建议。

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

Answer 1

目前还不清楚您想从哪里调用该代码，但如果我是您，我会稍微反转一下代码。也就是说，总是在 load 事件上执行你的东西，并决定在那里做什么。到那时，将要淡出的对象的加载放在一个函数中并从其他地方调用该段代码就变得微不足道了（并且您没有指定要从哪里调用它，所以我会猜测您想在 sessionStorage.

中设置值后调用它

function fadeObject() {
    $(".se-pre-con").fadeOut("slow");
}

$(window).load(function() {
    if (sessionStorage.getItem('htmldivwithid') !== 'false') {
        fadeObject();
    } else {
        document.getElementById('htmldivwithid').style.display="none";
        sessionStorage.setItem('htmldivwithid','true');
        // call fadeObject()?
    }
});

此时您可以在需要时从 load 事件中调用 fadeObject()（我在您可能想要调用它的地方添加了注释）。

fadeObject 不是绝对必要的，但如果您需要更改淡出的对象，您现在只需更改一个地方而不是两个地方，一旦您决定要在哪里调用它。

Answer 2

我在 html 页面的正文部分使用此脚本回答了我自己的问题，它确保加载程序在每个浏览器会话中只运行一次，正如我试图实现的那样。

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

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

javascript

syntax

sessionstorage

使用 html 会话存储在 运行 之后隐藏 div 一次

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

javascript

syntax

sessionstorage

使用 html 会话存储在运行之后隐藏 div 一次