Showing a DIV only the first time a website is loaded with localStorage

Question

I am trying to make this work but I have some problems.. Like the title says, I want a DIV to be showed only the first time a website is loaded. I know how to do with PHP and Cookies, but I want it with the localStorage function.

Here is my code:

<div id="loading_bg">
  ...
</div>


$(document).ready(function() {
    localStorage.setItem('wasVisited', 1);
    if (localStorage.wasVisidet !== undefined ) {
            $("#loading_bg").css('display','none');
        } else {
            $("#loading_bg").delay(5000).fadeOut(500);
        }
});

Answer 1

You are setting the localStorage flag before the if condition, so the flag wasVisited will never be undefined.

You need to set the flag inside the else block as shown below

$(document).ready(function () {
    if (localStorage.getItem('wasVisited') !== undefined) {
        $("#loading_bg").hide();
    } else {
        localStorage.setItem('wasVisited', 1);
        $("#loading_bg").delay(5000).fadeOut(500);
    }
});