А теперь разбор полетов
<!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";
}