sessionStorage - только поведение при начальной загрузке страницы

Question

Я не понимаю, как работает sessionStorage. Я хочу, чтобы событие происходило только при начальной загрузке страницы.

Я (пытаюсь) сделать это, проверив, является ли сеанс новым. Идея ниже:

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

Итак, когда страница загружается впервые, похоже, что sessionStorage установлено на true. После этого, во время посещения пользователями страницы, то, что я хочу, происходит только один раз, потому что я вижу, что sessionStorage всегда true.

Если я установлю его на false, если sessionStorage вернет true, то, очевидно, то, чего я хочу, просто не произойдет.

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

Как мне справиться с этим? Как можно вызвать событие только при начальной загрузке страницы и , а не во время посещения оставшихся пользователей?

ДЛЯ КОНТЕКСТА. «Событие» - это анимация на панели навигации.

Answer 1

Во-первых, sessionStorage не подходит для такого рода задач, поскольку оно будет потеряно, как только пользователи закроют вкладку.Для этого следует использовать localStorage.

Из веб-документов mdn

Свойство sessionStorage позволяет получить доступ к объекту хранилища сеанса для текущего источника.sessionStorage похож на Window.localStorage;единственное различие заключается в том, что данные, хранящиеся в localStorage, не имеют установленного срока действия, а данные, хранящиеся в sessionStorage, очищаются по окончании сеанса страницы .Сеанс страницы длится до тех пор, пока браузер открыт и доживает до перезагрузки и восстановления страницы.

А во-вторых, вы устанавливаете isNewSession перед его проверкой.Хотя вам следует только установить его, если вы знаете, что он не установлен.

Так что ваш исправленный код должен выглядеть так:

$(function() {
    if (localStorage.getItem("isNewSession")) {
        // The user has been to this page before
    } else {
        // First time on this page
        localStorage.setItem('isNewSession', 'true');
    }
});

Fiddle

Answer 2

Использование файлов cookie JavaScript поможет:

Ниже приведена слегка измененная версия https://stackoverflow.com/a/8733385/2969615,, которая была адаптирована для ваших целей:

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

И скрипт, который читает cookie, который я взял с 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 "";
}