Javascript Timer / Bootstrap / Wordpress

Question

I am using this little bit of code from Twitters Bootstrap in my Wordpress theme. Is there a way that when the user closes the window it stays closed even after a refresh? I need the window to stay closed for the rest of the session or at least an hour.

As it stands the window re-apears after a refresh.

<div class="alert alert-note alert-dismissible fade in" role=alert>
                <button type=button class=close data-dismiss=alert aria-label=Close>
                    <span aria-hidden=true>&times;</span>
                </button>
                <h2>Upgrade to Pro for £2</h4>
                <p>Upgrade to a voclr.it Pro Account for just £2 a month and unlock many great features.</p>
                <div class="row">
                    <div class="col-sm-4">
                        <h4>Previews</h4>
                        <img src="<?php bloginfo('template_url') ?>/img/start4.png" alt="start4" width="64" height="64">
                    </div>
                    <div class="col-sm-4">
                        <h4>Premium Sample Packs</h4>
                        <img src="<?php bloginfo('template_url') ?>/img/pulse2.png" alt="pulse2" width="64" height="64">
                    </div>
                    <div class="col-sm-4">
                        <h4>No More Adverts</h4>
                        <img src="<?php bloginfo('template_url') ?>/img/forbidden.png" alt="forbidden" width="64" height="64">
                    </div>
                </div>

            </div>

Answer 1

Here's an example using local storage sessionStorage to be more precise.

https://jsfiddle.net/Pigbot/dwbynr6y/

//Check if 'hidden' variable is defined
if (typeof (hidden) !== 'undefined') {
// If the 'hidden' variable is defined don't do anything
} else {
    // If the 'hidden' variable is NOT defined
    // Check if browser supports Local Storage
    if(typeof(Storage) !== "undefined") {
        // Set the 'hidden' variable to the value of the local storage item
        var hidden = sessionStorage.getItem("theDiv");

            // If the 'hidden' variable is set to the string 'hidden' the hide the div
            if(hidden === "hidden"){
                $('.alert-dismissible').hide();
            }

        //If the 'hidden' variable is not set to the value of the local
        //storage item then the div will be visible and so will the button

        //Click function on buttom to set the local storage and fadeout the div
        $('button.close').click(function(){
            sessionStorage.setItem("theDiv", "hidden");
            hidden = sessionStorage.getItem("theDiv");
            $('.alert-dismissible').fadeOut();
        });

    } else {}
}

//This button is an example of removing the item from local storage
$('button.clear').click(function(){
    sessionStorage.removeItem("theDiv");
});

window.localStorage - stores data with no expiration date

window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)