Javascript Timer / Bootstrap / Wordpress

Javascript Timer / Bootstrap / Wordpress

本文关键字：Wordpress Bootstrap Javascript Timer      更新时间：2023-09-26

我在我的Wordpress主题中使用了Twitters Bootstrap的这段代码。有没有办法让用户关闭窗口时，即使在刷新后它也会保持关闭状态？我需要窗口在会话的其余部分或至少一个小时保持关闭状态。

当它站立时，窗户在刷新后重新出现。

<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>

下面是一个使用本地存储会话存储的示例，更准确地说。

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 - 存储一个会话的数据（关闭浏览器选项卡时数据会丢失）

相关文章：