如何在頁面刷新或單擊瀏覽器后退按鈕后隱藏 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>