关闭后隐藏 Bootstrap Toast 24 小时

Question

我正在使用 Bootstrap 5 个祝酒词来显示广告。如果用户关闭广告，我希望广告对用户消失 24 小时。

当前代码：

<div class="position-sticky bottom-0" style="z-index: 5">
    <div class="toast hide text-center text-white bg-primary border-0" id="cbAd" role="alert" aria-live="assertive" aria-atomic="true" style="width: 100%; border-radius: 0;">
        <div class="toast-header">
            <strong class="me-auto">Ad</strong>
            <small>Website.com</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" style="transform: rotate(0);">
        This is the advertisement text.
        <div class="mt-1"><a class="btn btn-success stretched-link" href="">Buy Something</a></div>
        </div>
    </div>
</div>

Javascript:

var option = {
    animation: true,
    autohide: false
};
function cbToast( ) {
    var toastElementHTML = document.getElementById( 'cbAd' );
    var toastElement = new bootstrap.Toast( toastElementHTML, option );

    toastElement.show();
}
setTimeout(cbToast, 5000);

我如何使用本地存储完成此操作？

Answer 1

<button onclick="closeAd()" type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

function closeAd() {
    document.getElementById( 'cbAd' ).style.display = "none";
    let expire_time = new Date();
    expire_time.setDate(expire_time.getDate() + 1);
    localStorage.setItem("close_expire_time", expire_time.getTime());
    // Notice that getTime() convert it back to Unix_time
}

function cbToast() {
    // ... your code
    if (isShowAd()) toastElement.show();

    function isShowAd() {
        const expire_time = localStorage.getItem("close_expire_time"),
            current_time = new Date().getTime();
        
        // easy to read version
        if (!expire_time) {
            return true; // not exist
        } else {
            if (expire_time - current_time > 0) {
                console.log(`${expire_time - current_time}ms before expired`);
                return false; // not expire yet
            } else {
                return true; // expired
            }
        }

        // short version
        return !expire_time ? true : ((expire_time - current_time > 0) ? false : true);
    }
}

关闭后隐藏 Bootstrap Toast 24 小时

Hide Bootstrap Toast for 24 hours after dismissed

javascript

local-storage

twitter-bootstrap

bootstrap-5