Dismiss Banner Code

<!-- placeholder for link to clear sessionStorage -->
<div class="p-4 text-center text-gray-400 mt-12 text-xs cursor-pointer max-w-xl mx-auto">
    <p>Dismissing the banner will save state to sessionStorage. This will remember the state until the session (tab is
        closed). Opening the same page in a new tab is considered a new session</p>
    <p id="clearSessionStorage" class="clear underline mt-2">Clear Session Storage</p>
</div>

<script>
    // Script to handle dismiss button and store state for duration of session (until browser closed)
    // Docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
    // identify the banner and save to a variable
    let banner = document.querySelector('#banner');
    // identify the dismiss button and save to a variable
    let dismissButton = document.querySelector('#dismiss');
    // get the value of sessionStorage for 'dismissBanner' (defaults to null)
    let dismissBanner = sessionStorage.getItem('dismissBanner');
    // on page load, hide banner if previously dismissed in same session
    if (dismissBanner === '1') {
        banner.classList.add('hidden');
    }
    // add event listener to dismissButton
    dismissButton.addEventListener('click', () => {
        // hide banner
        banner.classList.add('hidden');
        // Save state to sessionStorage
        sessionStorage.setItem('dismissBanner', '1');
    })
    // the following is just for demonstration purposes, to manually clear the sessionStorage
    // identify the link to clear the sessionStorage
    let clearSessionStorage = document.querySelector('#clearSessionStorage');
    // add event listener to the link, which on click will remove the dismissBanner for from sessionStorage and restore the banner
    clearSessionStorage.addEventListener('click', () => {
        sessionStorage.removeItem('dismissBanner');
        banner.classList.remove('hidden');
    })
</script>