如何在页面刷新或单击浏览器后退按钮后隐藏 div

Question

我在下面有弹出代码，我想为每个用户显示这个弹出窗口，即使刷新页面或访问另一个站点也只显示一次。

我尝试了一些代码，但它对我不起作用。

 <div id="popup"> <div id="close">&times;</div> MY CONTENT </div> <script type="text/javascript"> window.addEventListener("load", function(){ setTimeout( function open(event){ document.querySelector("#popup").style.display = "block"; }, 0000 ) }); document.querySelector("#close").addEventListener("click", function(){ document.querySelector(".popup").style.display = "none"; }); </script>

Answer 1

使用 cookie 来记住。

window.addEventListener("load", function(){
    //check if cookie exists. 
    if (!document.cookie.includes("popup")) {
        setTimeout(
            function open(event){
                document.querySelector("#popup").style.display = "block";
                //set cookie since it didn't exist previously
                document.cookie = "popup=true" 
            },
            0000 
    })
});


document.querySelector("#close").addEventListener("click", function(){
    document.querySelector(".popup").style.display = "none";
});

Answer 2

我认为使用 localstorage 可以解决问题。 它在这里不起作用，因为堆栈不允许本地存储

 if(localStorage.getItem('closeMe') == 'yes')document.getElementById("popup").classList.add("closeMe"); document.querySelector("#close").addEventListener("click", function(){ localStorage.setItem('closeMe', 'yes'); if(localStorage.getItem('closeMe') == 'yes')document.getElementById("popup").classList.add("closeMe"); });

 .closeMe{ display:none; }

 <div id="popup"> <div id="close">&times;</div> MY CONTENT </div>