Как показать всплывающее окно только при первой загрузке страницы

Question

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

<script type="text/javascript">// <![CDATA[
document.addEventListener('DOMContentLoaded', function() {
function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return '';
}

    $(document).ready(function() {
 if(getCookie('popup') !== ''){
        $('.popup-wrapper').css('display','block');      
    } else {
        setCookie('popup','open',1); 
    }

  $('.popup-close').click(function(){
  		setCookie('popup','close',1);
      $('.popup-wrapper').css('display','none');
  });
});
});
// ]]></script>

Любая помощь будет принята с благодарностью.

Answer 1

Просто добавьте localStorage.setTtem после показа всплывающего окна. И не забудьте сделать .popup-wrapper display:none

   if(!localStorage.getItem('shownPopUp')){ 
      $('.popup-wrapper').css('display','block');
      localStorage.setItem('shownPopUp', true);
   }

Answer 2

Есть ли причина, по которой вы используете куки? Если нет, вы можете использовать localStorage и написать что-нибудь немного чище ..

Так например

$(document).ready(function() {
   // if localStorage doesnt have the shownPopUp item 
   if(!localStorage.getItem('shownPopUp')){ 
      $('.popup-wrapper').css('display','block');      
   }

   $('.popup-close').click(function(){
      // set the shownPopUp item in localStorage
      localStorage.setItem('shownPopUp', true)
   $('.popup-wrapper').css('display','none');
   });
   });

});

Нет необходимости в функции getCookie

Cookies больше используются для серверных функций, где localStorage лучше для клиентских функций. Так что здесь произойдет, ваши пользователи никогда не увидят всплывающее окно, если они не удалили там localStorage