Знакомство при первом посещении

Question

В настоящее время я разрабатываю свой веб-сайт, и моя проблема проста: на самом деле скромный новичок в Javascript, мне потребуются некоторые продвинутые знания для этой проблемы.

У меня есть div .introduction, в котором я Представляем мой веб-сайт с анимацией CSS моего lo go, и я хотел бы, чтобы этот div воспроизводился ТОЛЬКО при первом посещении моего веб-сайта, независимо от страницы (не только на домашней странице).

Пока все хорошо. Но вот проблемы.

Я бы хотел, чтобы div воспроизводил анимацию при первом посещении сайта, но ТАКЖЕ я бы хотел, чтобы refre sh страницы был засчитан в качестве первого посещения. Кроме того, я хотел бы, чтобы div te был на дисплее: скрыт, если он не воспроизводится, или когда он воспроизводится, чтобы установить таймер, чтобы он был скрыт через 6,2 секунды.

Здесь - это явный пример с вступлением, которое воспроизводится только при первом посещении сайта, независимо от страницы, и оно также работает, когда страница обновляется.

Это то, что я получил до сих пор:

setTimeout(function() {
    document.getElementsByClassName("introduction")[0].style.display = 'none';
}, 6200);

const firstLoad = sessionStorage.getItem("pageHasBeenLoaded");

if (firstLoad === "no") {
    document.getElementsByClassName("introduction")[0].style.display = "none";
} else {
    document.getElementsByClassName("introduction")[0].style.display = "grid";
    sessionStorage.setItem("pageHasBeenLoaded", "no" );
}

Я знаю, что это немного беспорядочно, но опять же, я начинаю с Javascript.

Он работает по большей части, за исключением части refre sh, но, возможно, есть более чистый и простой способ чтобы сделать это ... Если кто-то из вас знает, как это сделать правильно, я был бы очень признателен:)

С уважением

Answer 1

Прежде всего это запоминающийся сайт. (и да, заметил, что введение загружается даже после перезагрузки). А что касается этой части вашего кода:

if (firstLoad === "no") {
    document.getElementsByClassName("introduction")[0].style.display = "none";
} 

Когда посетитель загружает вводную страницу, устанавливается ли для переменной firstLoad значение «нет»? Потому что это то, что предполагает это условие. (Это не повлияет на работу вашего кода, но поможет вам лучше управлять им). Когда посетитель загружает страницу, установите для этой переменной значение «да» вместо «нет». Тогда это будет сравнение:

if (firstLoad == "yes") {
    document.getElementsByClassName("introduction")[0].style.display = "none";
}

Также обратите внимание на == вместо ===, которое является строгим сравнением. Это может быть единственная проблема из-за строгого (===) сравнения.

---

Дополнение к этому, если вы также хотите, чтобы он никогда больше не загружался для пользователя вы можете реализовать localStorage вместо sessionStorage

---

Еще одна вещь, я не уверен, что это за раздел:

document.getElementsByClassName("introduction")[0].style.display = 'none';
}, 6200);

, но похоже на setTimeout функция, которая воспроизводит анимацию, а затем останавливает ее через 6200 секунд, в этом случае вы также можете поместить ее в условие if, чтобы, если пользователь не установил для firstLoad значение «да», тогда он будет играть