Подскажите, пожалуйста, как добавить ключ в sessionStorage по клику и чтобы при обновлении страницы при наличии этого ключа добавлялся класс display: none
Я написал пример, но он отрабатывает не до конца верно.
Заранее благодарю!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section>
<div class="object">
<h2>Object</h2>
<bottom class="tap">Tap</bottom>
</div>
</section>
</body>
</html>
section {
height: 100vh;
background: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
div {
padding: 1rem 3rem;
background: #999;
}
bottom {
display: block;
padding: 1rem;
background: #666;
cursor: pointer;
}
.object.none {
display: none;
}
let object = document.querySelector('.object');
let tap = document.querySelector('.tap');
function addSessionKey() {
sessionStorage.setItem('hide', true);
if (sessionStorage.getItem('hide') === true) {
object.classList.add('none');
}
}
function hideObject() {
object.classList.add('none');
}
tap.addEventListener('click', addSessionKey);
tap.addEventListener('click', hideObject);
