Как сделать, чтобы click не появлялся некоторое время?

Question

[sanya164]

У меня есть код:
При заходе на сайт, появляется click, после его нажатия, скрывается click и появляется main
Но проблема в том, что после каждой перезагрузки страницы, снова появляется click.
Как сделать, чтобы при нажатии click, он больше не появлялся некоторое время, 5 часов, например

#main {
  display: none;
}
#click:hover {
  cursor: pointer;
}

function FuncImages() {
  document.getElementById("main").style.display = "block";
  document.getElementById("click").style.display = "none";
}

<div id = "main">Данные</div>
<div id = "click" onclick = "FuncImages()">Здесь картинка</div>

Answer 1

[Сергей Наломенко]

По разному можно реализовать. И с использованием бэкенда, и без использования.
Например, при клике создайте временную куку с жизненным циклом 5 часов, и при следующей загрузке страницы просто-напросто скрывайте слой #click, если кука установлена.

Comments

[sanya164]

Можно поподробнее?

[Сергей Наломенко]

sanya164: По ссылке, что я Вам дал на документацию по кукам, Вы в функции-обработчике клика по блоку #click создаёте куку, с временем жизни, которое Вам нужно (5 часов или 5 дней, не важно). В статье написано, как это сделать. При обновлении страницы вы читаете эту куку. Если она еще установлена, то через jquery, например, скрываете слой #click посредством метода $('#click').hide();

Хотя правильнее будет сделать так: по умолчанию не показывать блок #click (css display:none), а если кука не установлена, то показать.

[sanya164]

Сергей Наломенко: Я понял, как создать Куки, но как сделать, чтобы если кук не создан, не показывался click, но показывался main (Не разбираюсь в JavaScript)

Answer 2

[Владислав Козуля]

Самый простой вариант – сохранить флаг в local storage и проверять его после загрузки страницы. Туда же можно положить и timestamp, чтобы по нему смотреть, не пора ли нам снова показывать click.