頁面覆蓋僅在首次加載時

Question

在我的主頁上，我有一個帶有進入網站的按鈕的疊加層。 單擊時，覆蓋消失。 覆蓋應該只出現一次，在第一頁加載。 這是我的問題：

1. 當我第一次進入主頁時，會出現疊加層（應該是這樣）
2. 然后當我單擊導航中的徽標或主菜單項時，主頁重新加載（正常），但覆蓋再次顯示（第二次）。
3. 當我再次單擊徽標或主菜單項（現在是第三次）時，不再顯示疊加層（應該如此）。

我的問題：為什么在我第二次進入頁面時顯示覆蓋？

這是我的代碼：

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();
}