Как сохранить всплывающий элемент div всегда открытым, даже при обновлении / перезагрузке страницы, пока пользователь не закроет ее, используя локальное хранилище HTML5

Question

Я использую следующий код, чтобы показать / скрыть div, используя jquery toggle. Я пытаюсь найти способ, чтобы браузер мог вспомнить последний статус всплывающего окна 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();
        }
    });