我如何保持弹出div始终打开，甚至在刷新/重新加载页面之前，直到用户使用HTML5本地存储将其关闭

Question

我使用以下代码使用jquery toggle显示/隐藏div。我试图找到一种方法，使浏览器可以记住弹出div的最后状态。我想要的是即使在刷新/重新加载页面时也始终保持此div直到用户关闭它。我认为我必须使用html5网络存储和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");
     }
   });
  });

Answer 2

您可以为此使用localStorage

jQuery(".menu-btn").click(function(event) {
        event.stopPropagation();

       if (jQuery(".menu-window").is(':visible')) {
        jQuery(".menu-window").hide();
        localStorage.setItem("modalFlag", 'false');
       }
       else
       {
        jQuery(".menu-window").show();
         localStorage.setItem("modalFlag", 'true');
       }


       });

    jQuery(window).on('load',function(){
        if (localStorage.getItem("modalFlag") == 'true') {
            jQuery(".menu-window").show();
        }

        if (localStorage.getItem("modalFlag") == 'false') {
            jQuery(".menu-window").hide();
        }
    });