Javascript 会话存储弹出窗口未使用会话存储

我正在设计一个网站，有一个弹出窗口出现。该弹出窗口按我所希望的方式运行，在访问页面时显示，在弹出窗口的上角按下“x”时消失。但是，我希望弹出窗口在被“x”删除后消失（针对该会话）。经过一些调查，我发现会话存储就是实现这一点的方法。我尝试过使用会话存储，但无法使其工作。我对Java脚本完全陌生，所以请把我糟糕的代码说出来

HTML:

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>

if（sessionStorage.getItem（'hidepopup'）==true）{
document.getElementById（“弹出”）.classList.toggle（“消失”）
} 
函数fcnx1（）{
document.getElementById（“弹出”）.classList.toggle（“隐藏”）；
setItem（'hidePop'，true）；
}
函数fcnx2（）{
document.getElementById（“弹出”）.classList.toggle（“消失”）；
}

存储在

会话存储中的数据类型为
字符串
，而不是
布尔值
，因此请这样做，并引用值“true”

注意，在get/set调用中，您还将key
'hidepopup'
拼写不同

谢谢你的帮助！
#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;
}

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

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");
}