如何在引导模式上设置本地存储

How do I set local storage on a bootstrap modal?

本文关键字:设置 存储 模式      更新时间:2023-09-26

"modal-2"id为调查打开一个模态。

我只想让这个特定的模式,在有人点击关闭按钮后,每24小时重新出现一次。

$(document).ready(function(){
    var modals = ['#events'];
    if (window.location.hash && ~modals.indexOf(window.location.hash)) {
        $(window.location.hash).modal();
    }
    $("#modal-2").modal('show');
    $(".modal:not(.noclose)").on("click","a",function(){
        $(this).closest(".modal").modal("hide");
    });
});

您可以将当前时间戳Date.now()设置为localStorage,并在每次需要决定是否显示模态时进行检查。示例代码:

var twentyFourHoursInMs = 24 * 60 * 60 * 1000;
var lastTimestamp = Number(localStorage.getItem("last-showed-at"));
var currentTimestamp = Date.now();
if ((currentTimestamp - lastTimestamp) >= twentyFourHoursInMs) {
    localStorage.setItem("last-showed-at", currentTimestamp);
    $("#your-modal-id").modal("show");
    // Display modal once again
}

因此,这是您案例中的完整代码:

$(document).ready(function(){
    var modals = ['#events'];
    if (window.location.hash && ~modals.indexOf(window.location.hash)) {
        $(window.location.hash).modal();
    }
    $(".modal:not(.noclose)").on("click","a",function(){
        $(this).closest(".modal").modal("hide");
    });
    var currentTimestamp = Date.now();
    $("#cul8a").on("hidden.bs.modal", function () {
        localStorage.setItem("last-showed-at", currentTimestamp);
    });
    // Check for modal eligibility
    var twentyFourHoursInMs = 24 * 60 * 60 * 1000;
    var lastTimestamp = Number(localStorage.getItem("last-showed-at"));
    if ((currentTimestamp - lastTimestamp) >= twentyFourHoursInMs) {
        setTimeout(function() {
            localStorage.setItem("last-showed-at", currentTimestamp);
            $("#cul8a").modal("show");
        }, 4000);
    }
});