скрыть модальный с использованием локального хранилища не работает

Question

У меня есть модальное всплывающее окно bootstrap 4, которое появляется автоматически на моей странице, я добавил кнопку «Больше не показывать» Используя localStorage (), чтобы сохранить «закрытое» состояние на модальном, чтобы оно не показывалось для этого пользователь снова.

Вот что у меня есть.

HTML

 <div class="modal-footer">
        <button id="dont_show" class="btn-sm dont-show_again" type="button" data-dismiss="modal" >Dont show again</button>             
    </div>

JS

$(document).ready(function(){
    var currentLocation = window.location.pathname + window.location.search;

    if(currentLocation =="/create-movie"){
        $(document).ready(function(){
            $("#myModal").modal();
        })

    }else{

    }

     var dontShowId =document.getElementById('dont_show');
     dontShowId.addEventListener('click', function(){
        var isshow = localStorage.getItem('status');
        console.log(isshow);
          if (isshow == null) {
              localStorage.setItem('status', 'shown');
                console.log(isshow);
              // Show popup here
              $('#myModal').modal('show');
          } else if(isshow != null) {
             $('#myModal').modal('hide');
          }
     })

})

К сожалению, после нажатия кнопки «Больше не показывать» она закрывает модальное окно, но когда я обновляю страницу, она появляется снова.

что не так с моим кодом?

Answer 1

В вашем коде JavaScript модальное всплывающее окно отображается независимо от каких-либо условий.Несмотря на то, что вы устанавливаете localStorage для события нажатия кнопки, вы никогда не используете его для проверки вашей начальной загрузки.Вот минимальная упрощенная версия вашего кода, чтобы вы начали.

Код:

$(document).ready(function() {
  // onload decide baseed on localStorage
  var isshow = localStorage.getItem('status');
  var currentLocation = window.location.pathname + window.location.search;
  if (currentLocation == "/create-movie" && isshow != 'shown')
    $('#dont_show').modal('show');

  // on click set localStorage
  var dontShowId = document.getElementById('dont_show');
  dontShowId.addEventListener('click', function() {
    if (isshow == null)
      localStorage.setItem('status', 'shown');
  });

});

Надеюсь, это поможет:)