如何用JavaScript实现HTML弹窗仅首次访问显示 刷新不重复弹出

核心逻辑是通过浏览器本地存储localStorage记录用户是否已经处理过弹窗，页面加载时优先检查该标记：存在标记则直接跳过弹窗逻辑，不存在才执行弹窗触发代码，用户关闭/确认弹窗后写入标记，即可实现刷新不重复弹出的效果。

if (document.getElementById("newsletter-popup-form") && !localStorage.getItem('ageVerified')) {
  setTimeout(function () {
    var mpInstance = $.magnificPopup.instance;
    if (mpInstance.isOpen) {
      mpInstance.close();
    }

    setTimeout(function () {
      $.magnificPopup.open({
        items: {
          src: "#newsletter-popup-form",
        },
        type: "inline",
        removalDelay: 350,
        callbacks: {
          open: function () {
            $("body").css("overflow-x", "visible");
            $(".sticky-header.fixed").css("padding-right", "1.7rem");
          },
          close: function () {
            $("body").css("overflow-x", "hidden");
            $(".sticky-header.fixed").css("padding-right", "0");
            // 弹窗关闭后写入已验证标记，后续刷新不再弹出
            localStorage.setItem('ageVerified', 'true');
          },
        },
      });
    }, 500);
  }, 100);
}

• 如果是强制年龄验证场景（不允许用户直接关闭弹窗绕过），不要在close回调里写入标记，改为给弹窗内的「确认年满法定年龄」按钮绑定点击事件，用户点击确认后再执行localStorage.setItem('ageVerified', 'true')逻辑，同时可以给弹窗配置closeOnBgClick: false、showCloseBtn: false参数禁止用户直接关闭弹窗。
• 如果需要设置验证有效期（比如每30天重新验证一次），存储时可以同时存入时间戳，读取标记时对比当前时间判断是否过期，过期则清空标记重新弹出弹窗。
• 如果需要兼容关闭无痕模式/极低版本浏览器的场景，可以把localStorage替换为cookie存储，判断逻辑完全一致。
• 测试阶段如果需要手动复现弹窗效果，打开浏览器控制台执行localStorage.removeItem('ageVerified')后刷新页面即可。

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