@Chelovekvekvek

Почему не записывается ключ в localStorage?

Добрый день. При создании поп-ап баннера пишу скрипт, который показывает баннер 1 раз через 30 секунд. При обновлении странице он снова появляется, т.е. ключ не записывается в localStorage. В чём может быть причина?

https://jsfiddle.net/fmtp9f39/
  • Вопрос задан
  • 397 просмотров
Решения вопроса 1
@Chelovekvekvek Автор вопроса
Скрипт рабочий, ошибка была в стилях.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@igorsmi
Full stack web developer
Ошибка в этой строке !localStorage.getItem('Banner-popup')
Он возвращает строковое значение "true" и конструкция if всегда равна false.
Ответ написан
@mukoladerevlo
веб-разработка, электроника
А теперь разбор полетов

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

<div class="js-banner">Banner <span class="js-close-banner"> x</span></div>
	<script>
function showBannerPopup (){
    let banner = document.querySelector('.js-banner');
    let closeBanner = document.querySelector('.js-close-banner');
    let bannerState = localStorage.getItem('Banner_popup');
    closeBanner.addEventListener('click', function(){
        banner.style.visibility  = "hidden";
        banner.style.opacity = "0";
        localStorage.setItem('Banner_popup', true);
    });
    banner.addEventListener('click',function() {
        banner.style.visibility  = "hidden";
        banner.style.opacity = "0";
        localStorage.setItem('Banner_popup', true);
    });
    if(localStorage.getItem('Banner_popup') != "true"){
        setTimeout(function(){
            banner.style.visibility = "visible";
            banner.style.opacity = "1";
        }, 700);
    }
}
showBannerPopup();
	</script>
</body>
</html>

после reload вызывается функция опять. то есть непонятно зачем вы что-то там проверяете, ну да, не сработает таймаут после установки ключа тру и попап не появится.
а смысл, после reload опять вы вызываете функцию показать баннер. вам нужно считывать значение localstorage и только потом принимать решения показать или скрыть popup, ведь он у вас по умолчанию показывается, не так ли?

добавьте например
if(localStorage.getItem('Banner_popup') == "true"){
        banner.style.visibility  = "hidden";
        banner.style.opacity = "0";
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы