Как закрепить блок вверху, и сделать так чтоб он онткрывался единожды за сессию?

Question

[dieiN]

Добрый день, речь идет о блоке с предложением просмотреть канал в YouTube.
- необходимо чтобы он закрепился вверху страницы при скроле.
- при закрытии блока показывался единожды (на данный момент происходит то что блок закрываю, но при обновлении или переходе на другую страницу он появляется вновь).

Вот код.

<style>
  .youtube_block {
  background: #c4302b;
  display: flex;
  justify-content: space-around;
	height: 33px;
	}
	.hide_youtube_block {
  display: none;
	}
</style>
<div class="youtube_block">
  <a href="https://www.youtube.com/channel/UCDa1zyJ24dkwxjjYrJhMAYA" target="_blank"><img src="/wp-content/uploads/2019/07/youtube.svg" width="32px" heiht="32px" style="padding: 5px;">Ознакомтесь с нашим YouTube каналом</a>
  <a class="youtube_block_button"><img src="/wp-content/uploads/2019/07/delete-button.svg" width="32px" heiht="32px" style="padding: 5px;"></a>
</div>
<script type="text/javascript">
	document.querySelector('.youtube_block_button').addEventListener('click', () => {
  document.querySelector('.youtube_block').classList.add('hide_youtube_block')
})
</script>

Может по средствам PHP привязать его к сессии? Подскажите решение.

Answer 1

[Сергей delphinpro]

sessionStorage

document.querySelector('.youtube_block_button').addEventListener('click', () => {
  document.querySelector('.youtube_block').classList.add('hide_youtube_block');
  sessionStorage.setItem('youtube-block', 1);
});
if (sessionStorage.getItem('youtube-block')) {
  document.querySelector('.youtube_block').classList.add('hide_youtube_block');
}

UPD
Чтобы блок не мелькал, лучше инвертировать логику. С сервера отдавать скрытый блок, а при отсутствии флага в sessionStorage показывать его.

Answer 2

[Gip]

можно куку писать, например на сутки и в зависимости от ее отсутствия выводить блок.