Question

在我的主页上，我有一个带有按钮的叠加层，可以进入网站。单击时，叠加层消失。叠加层在首页加载时仅应出现一次。这是我的问题：

当我第一次进入首页时，就会出现覆盖图（应有的样子）
然后我在导航中单击徽标或主菜单项时，将重新加载主页（照常），但是将再次显示覆盖图。
当我再次单击徽标或主菜单项（现在是第三次）时，叠加层将不再显示（应该是）。

我的问题：为什么第二次进入页面时会显示叠加图？

这是我的代码：

var session = sessionStorage.getItem('session');
    console.log(session);
    if (session !== null) {
        $('.overlay').hide();
    }
    sessionStorage.setItem('session', 1);

Answer 1

使用以下代码。设置为仅在您首次访问网站时每24小时显示一次重叠广告。

    $(document).ready(function(){
               if ($.cookie('overlay_status') != '1') {
                setTimeout(function() {
                    $('.overlay').show();
                    $.cookie('overlay_status', '1', { expires: 1}); 
                    }, 20000); 
                } else {
                 $('.overlay').hide();
}
    });

Answer 2

这似乎最终对我有用...

function setCookie(key, value, expiry) {
    var expires = new Date();
    expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}

function getCookie(key) {
    var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
    return keyValue ? keyValue[2] : null;
}

function eraseCookie(key) {
    var keyValue = getCookie(key);
    setCookie(key, keyValue, '-1');
}

if (getCookie('overlay_status') != '1') {
    setTimeout(function () {
        $('.overlay').show();
        setCookie('overlay_status', '1', '1');
    }, 20000);
} else {
    $('.overlay').hide();
}

页面重叠仅在首次加载时

2 个答案: