如何实现页面刷新后Popup form不再重新弹出

要实现提交表单后刷新页面不再弹出的效果，核心是用浏览器的localStorage存储表单已关闭的状态（localStorage数据会持久保存在浏览器中，页面刷新后不会丢失）。你只需要修改JS代码，HTML部分保持不变：

修改后的完整JS代码 #

$(function() {
    // 读取localStorage中的标记，判断是否显示弹窗
    const hasClosedPopup = localStorage.getItem('popupClosed') === 'true';
    if (!hasClosedPopup) {
        $('#loginPopup').hide();
        $('#loginPopup').show(2000);
    } else {
        // 已关闭过，直接隐藏弹窗
        $('#loginPopup').css('display', 'none');
    }
});

$('#button').click(function(event) {
    event.preventDefault();
    $('#loginPopup').css('display', 'none');
    // 将表单已关闭的状态存入localStorage
    localStorage.setItem('popupClosed', 'true');
})

关键改动说明 #

• 页面初始化时：先检查localStorage里的popupClosed标记，只有当用户从未关闭过弹窗时，才会执行显示逻辑；如果已经关闭过，直接隐藏弹窗。
• 提交按钮点击时：除了隐藏弹窗，新增localStorage.setItem('popupClosed', 'true')，把关闭状态记录下来。

测试重置方法 #

如果需要重新测试弹窗显示效果，可以打开浏览器开发者工具（按F12），在控制台执行以下命令清除标记：

localStorage.removeItem('popupClosed')

刷新页面后，弹窗就会再次弹出。

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