sessionStorage - only do a behavior on initial page load

Question

I don't understand how sessionStorage works. I want to have an event happen on only the initial page load.

I'm (trying) to do this by checking if the session is new. The idea is below:

$(function() {
  sessionStorage.setItem('isNewSession', 'true');
  if (sessionStorage.getItem("isNewSession")) {
    // do stuff on the first page load
  } else {
    // don't do it after
  }
});

So when the page first loads, it looks like the sessionStorage is set to true. After that, during the duration of the users visit to the page, what I want to happen only once always happens, because I can see sessionStorage is always true.

If I set it to false if sessionStorage returns true then obviously what I want to happen just won't happen.

I investigated a session cookie but this again persists throughout the users visit, and not just the first load.

How do I handle this? How can I have an event fire only on initial page load, and not throughout the remaining users visit?

FOR CONTEXT: The "event" is an animation in the navigation bar.

When animation ends then sessionStorage.setItem('isNewSession', 'false'); ? maybe I don't understand the problem. — Emeeus, May 17 '18 at 18:53
@Emeeus no because then it get sets to false, and the animation just doesn't run... — kawnah, May 17 '18 at 18:56
"I want to have an event happen on only the initial page load" I assume just once each user, right? because if not it's not necessary to use sessionStorage , because $(whatever).ready() accomplish the task. — Emeeus, May 17 '18 at 19:05

score 1 · Accepted Answer · edited May 06 '21 at 19:15

Firstly sessionStorage is not appropriate for this kind of task, since it will be lost once the users closes the tab. You should use localStorage for this.

From mdn web docs

The sessionStorage property allows you to access a session Storage object for the current origin. sessionStorage is similar to Window.localStorage; the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores.

And secondly you set isNewSession before checking it. While you should only set it, if you know it's not set.

So your corrected code should look like this:

$(function() {
    // Determine if is the first time on this page
    if ( ! localStorage.getItem("beenHereBefore")) {
        localStorage.setItem('beenHereBefore', 'true');
    }
});

Fiddle

score 0 · Answer 2 · answered May 17 '18 at 19:16

Using JavaScript cookies will do the trick:

Below is a slightly modified version of https://stackoverflow.com/a/8733385/2969615, which has been adapted for your purposes:

if(getCookie("hasPageBeenOpened")) {
    console.log("welcome back");
} else {
    console.log("first time eh?");

    // Build the expiration date string:
    var expiration_date = new Date();
    expiration_date.setFullYear(expiration_date.getFullYear() + 1);
    // Build the set-cookie string:
    var cookie_string = "hasPageBeenOpened=true; path=/; expires=" + expiration_date.toUTCString();
    // Create or update the cookie:
    document.cookie = cookie_string;
}

And the script which reads the cookie, which I grabbed from https://www.w3schools.com/js/js_cookies.asp

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 "";
}

sessionStorage - only do a behavior on initial page load

2 Answers2