不使用會話存儲彈出會話存儲

Question

我正在設計一個網站，並出現一個彈出窗口。 彈出窗口的功能與我想要的功能相同，在訪問頁面時顯示，在彈出窗口的頂角按“ x”時消失。 但是，我希望彈出窗口在“退出”后消失（針對該會話）。 經過一番調查，我發現會話存儲是實現此目的的方法。 我曾嘗試使用會話存儲，但無法使其正常工作。 我對Java Script完全陌生，所以請不要輸入我的糟糕代碼。

HTML：

<div id="pop-up"> 
    <i onclick="fcnx1(),setTimeout(fcnx2, 700)" class="fas fa-times fa-2x" style="padding: 4%; float:right;"></i>
    <p>Have your logo here! If you are interested in becoming a sponsor, feel free to email us at <a href="mailto:sponsor@beaverauv.org">sponsor@beaverauv.org</a>.</p>
</div>

CSS：

#pop-up {
  position: absolute;
  bottom: 7%; 
  right: 0;
  height: 50%;
  width: 30%;
  background: #F0F0F0;
  border-top: solid 5px rgb(25,28,31);
  border-bottom: solid 5px rgb(25,28,31);
  border-left: solid 5px rgb(25,28,31);
  transition:all 385ms linear;
}

#pop-up p {
  text-align: center;
  margin:5%;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}

.hide {
  opacity: 0;
}

.gone {
  display: none;
}

JavaScript：

<script type="text/javascript">
    if(sessionStorage.getItem('hidepopup') == true){
        document.getElementById("pop-up").classList.toggle("gone")
    } 

    function fcnx1() {
        document.getElementById("pop-up").classList.toggle("hide");
        sessionStorage.setItem('hidePop', true);
    }

    function fcnx2() {
        document.getElementById("pop-up").classList.toggle("gone");
    }
</script>

Answer 1

存儲在sessionStorage中的數據的類型為string ，而不是boolean ，因此例如執行以下操作並引用值“ true”

注意，您在get / set調用中還拼寫了不同的鍵'hidepopup' 。

if(sessionStorage.getItem('hidepopup') == "true"){
    document.getElementById("pop-up").classList.toggle("gone")
} 

function fcnx1() {
    document.getElementById("pop-up").classList.toggle("hide");
    sessionStorage.setItem('hidepopup', "true");
}