JavaScript 定时器/Bootstrap/Wordpress

Question

我在我的 Wordpress 主题中使用了 Twitter Bootstrap 中的这一小段代码。有没有一种方法，当用户关闭窗口时，即使刷新后它也保持关闭状态？我需要窗口在 session 的剩余时间或至少一个小时内保持关闭状态。

就目前情况而言，刷新后窗口会重新出现。

<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

更准确地说，这是一个使用本地存储 sessionStorage 的示例。

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 - 存储没有过期日期的数据

window.sessionStorage - 存储一个 session 的数据(关闭浏览器选项卡时数据会丢失)