如何使用sessionStorage让Bootstrap模态框横幅在单会话内仅展示一次

你只需要修改原来的脚本逻辑，加入sessionStorage的判断和存储逻辑即可，无需调整模态框的HTML结构，修改后的代码如下：

完整修改后的脚本部分 #

@if (Model.IsOptinEligible == true)
{
    <script>
        $(function () {
            // 仅当会话周期内没有关闭过该横幅时才弹出
            if (!sessionStorage.getItem('eligibility_banner_closed')) {
                $("#memberEligibilityPopup").modal('show');
            }

            // 监听模态框关闭事件，关闭后写入会话标记
            $('#memberEligibilityPopup').on('hidden.bs.modal', function () {
                sessionStorage.setItem('eligibility_banner_closed', 'true');
            });
        });
    </script>
}

逻辑说明 #

• 页面加载时先读取sessionStorage中的关闭标记，不存在标记才执行模态框弹出逻辑
• 绑定Bootstrap模态框原生的hidden.bs.modal事件，无论用户通过关闭按钮、还是点击跳转按钮关闭模态框，只要模态框完全隐藏就会触发该事件，写入关闭标记到sessionStorage
• sessionStorage是会话级存储，只要用户不关闭当前浏览器标签/整个浏览器，标记会一直生效，跳转其他页面再返回仪表板也不会重复弹出；关闭浏览器后标记自动清除，下次打开站点会正常触发首次展示

测试方法 #

如果需要调试弹窗效果，可以打开浏览器控制台的「Application/存储」选项卡，找到Session Storage下的当前站点域名，删除eligibility_banner_closed键后刷新页面即可重新看到弹窗。

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