Блог

Я пытаюсь использовать localStorage для запоминания пользовательских настроек, когда они нажимают «Остаться на международном». Таким образом, всплывающее окно не будет продолжать запрашивать всякий раз, когда пользователь посещает страницу.

Я не смог найти способ запомнить состояние закрытия модального окна jQuery и поместить его в файлы cookie localStorage. Ваша помощь будет высоко оценена!

 <!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<div id="countryModal" NAME="country" class="modal">
<a rel="modal:close" href="#" onclick="gotoInternational()">Stay at International</a>
</div>

<script>
setTimeout(function(){
  jQuery('#countryModal').fadeIn('slow').modal('show');
},3000)

function gotoInternational(){
//localStorage codes here
}
</script>
  

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<div id="countryModal" NAME="country" class="modal">
    <a rel="modal:close" href="#" onclick="gotoInternational()">Stay at International</a>
</div>

<script>
    //Get current localStorage value
    const gotoInternationalValue = localStorage.getItem('gotoInternational');
    //Check if it is not true (can be false or null)
    if (gotoInternationalValue != 'true') {
        setTimeout(function() {
            jQuery('#countryModal').fadeIn('slow').modal('show');
        }, 3000)
    } else {
        console.log("Stay at international was already selected");
    }


    function gotoInternational() {
        //Save localStorage item as true
        localStorage.setItem('gotoInternational', true);
    }
</script>
  

Если это не то, что вам нужно, пожалуйста, добавьте больше информации в свой вопрос, чтобы прояснить его!

Я нашел решение!

Ваше решение правильное, просто вы пропустили здесь одну кавычку:
if (gotoInternationalValue != ‘true’)

В любом случае спасибо за ваш вклад! Спас мой день!