javascript - 我如何保持弹出 div 始终打开，即使在页面刷新/重新加载时也是如此，直到用户使用 HTML5 本地存储将其关闭

Question

我使用以下代码来使用 jquery toggle 显示/隐藏 div。我试图找到一种方法，让浏览器可以记住弹出 div 的最后状态。我想要的是保持这个 div 始终打开，即使在页面刷新/重新加载时也是如此，直到用户关闭它。我认为我必须使用 html5 Web 存储和 js，但我不知道如何将其应用到我的代码中。

代码如下:

    $(".menu-btn").click(function(event) {
     event.stopPropagation();
    $(".menu-window").toggle();
    });
   

.menu-btn {
background:#0088cc;
color:#fff;
font-size:11px;
padding:8px;
text-align:center;
width:150px;
border-radius:5px;
font-weight:600;
cursor:pointer;
}

.menu-window {
background:#ccc;
width:300px;
margin-top:10px;
padding:40px;
text-align:center;
border-radius:4px;
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="menu-btn">MENU</div>
<div class="menu-window">
I AM A POPUP WINDOW
</div>

任何帮助将不胜感激。

Answer 1

嗨，也许这会有所帮助，我测试了它，它完成了工作

  // check if there a key store with state of dialog
  $(document).ready(function(){
      // get the value stored
      var isOpen = sessionStorage.getItem("opened");
      if (isOpen === "yes") {
        // if the last value saved was yes so show the dialog
        $(".menu-window").show();
      }
  });

  $(".menu-btn").click(function(event) {
   event.stopPropagation();
   $(".menu-window").toggle(function() {
     // get the last value saved and inverts the value 
     var isOpen = sessionStorage.getItem("opened");
     if (isOpen && isOpen === "no") {
       sessionStorage.setItem("opened", "yes");
     } else {
       sessionStorage.setItem("opened", "no");
     }
   });
  });