灯箱弹出不应再来了

Question

When I load the page the popup should be showed. But when I refresh the page the popup should not be there. '

       $('body').addClass('stop-scrolling');
       $('#fade').css('display','block');
       $('#light').css('display','block');
    `

fade and light class is for fade the screen and light will slide from upper side. Now if I refresh the page this light box will come another time on the screen. I have put this code in ready function thats why it shows up every time when I refresh the page.What to do make it shows up only on time at the time of page loading. Prevent it to shows up every time I refresh te page. Thanks in advance

Answer 1

Use Something like this

$(document).ready(function () {
    if (localStorage.getItem('wasVisited') !== undefined) {
         $('#fade').hide();
         $('#light').hide();
    } else {
        localStorage.setItem('wasVisited', 1);
         $('body').addClass('stop-scrolling');
         $('#fade').show();
         $('#light').show();
    }
});

Answer 2

You will either have to set a cookie, use Serverside-Code or maybe you could go with session.storage for a plain JS solution.

Here is a example with session storage, with is the best imo: http://fiddle.jshell.net/2Pc58/1/

if(!sessionStorage.getItem("lastVisit")){
         sessionStorage.setItem("lastVisit",new Date());
        alert("you are new here")
    }