如何通过cookie存储实现jQuery弹窗关闭后仅向用户展示一次

(function($) {
    // 读取cookie
    function getCookie(name) {
        const nameEQ = name + "=";
        const ca = document.cookie.split(';');
        for(let i=0;i < ca.length;i++) {
            let c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }
    // 设置cookie，days为有效天数
    function setCookie(name, value, days) {
        let expires = "";
        if (days) {
            const date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=/; SameSite=Lax";
    }

    $(window).on('load', function() {
        // 未查询到关闭标记才展示弹窗
        if (!getCookie('modal_has_closed')) {
            $('#exampleModal').modal('show');
        }

        // 监听弹窗关闭事件（所有关闭触发方式都会走该事件）
        $('#exampleModal').on('modal:close', function () {
            // 关闭后写入cookie，标记30天内不再展示
            setCookie('modal_has_closed', '1', 30);
        })
    });
})(jQuery);

注意说明 #

• 原有HTML代码无需调整，直接替换原有JS逻辑即可
• 如果你实际使用的是Bootstrap模态框组件，只需要将监听的事件名从modal:close修改为hidden.bs.modal即可，其余逻辑无需调整
• 你可以自行修改setCookie的第三个参数调整cookie有效期，示例中30代表关闭后30天内不会再次弹出弹窗
• cookie名modal_has_closed可根据你的需求自定义修改

内容的提问来源于stack exchange，提问作者Juraj