There is a block x

I need that when I click on the close, the block is deleted and not shown during the entire user session.

How to do it?

  • "<div class =" name "> <a class="close"> </a> </ div>" - Kalnaus Vladislav

2 answers 2

For this there is a sessionStorage

Put the information in the session repository

sessionStorage.setItem('closed', true);

Get information from session storage

 let isClosed = sessionStorage.getItem('closed');

The code from the example in the snippet does not work, because here the localstorage sessionstorage etc. does not work on stackoverflow in snippets

 const area = document.getElementById('area'); if (sessionStorage.getItem('hide_info')) { area.style.display = "none"; } else { document.getElementById('close').addEventListener('click', () => { area.style.display = "none"; sessionStorage.setItem('hide_info', "true"); }); } 
 <div id="area"> example <button id="close">x</button> </div>

    HTML

     <div id="info" class="block"> <button id="close">Close block</button> </div>

    CSS

     .block { display: none; } .block-active { display: block; }

    Js

     const block = document.getElementById('info'); const closeBtn = document.getElementById('close'); closeBtn.addEventListener('click', () => { block.classList.add('block-active'); // это покажет блок }); closeBtn.addEventListener('click', () => { block.classList.remove('block-active'); // это скроет блок });