如何实现基于浏览器会话的弹窗模态框显示逻辑控制？

要满足你描述的弹窗显示规则（首次访问/关闭浏览器后再访问显示，同浏览器会话内重开页面不显示），我们可以利用sessionStorage来实现——它的生命周期和浏览器会话绑定，关闭浏览器后数据会被清空，而同一浏览器会话内（即使刷新页面）数据会保留。

下面是修改后的代码：

$(document).ready(function() {
  // 检查sessionStorage中是否存在弹窗已显示的标记
  if (!sessionStorage.getItem('hasShownModal')) {
    // 显示弹窗
    $('#exampleModal').modal('show');
    // 标记当前浏览器会话已显示过弹窗
    sessionStorage.setItem('hasShownModal', 'true');
  }
});

为什么这个方案能满足你的需求： #

• 首次访问网站：sessionStorage中没有hasShownModal标记，弹窗正常显示，同时写入标记。
• 关闭浏览器后再次访问：浏览器会话已结束，sessionStorage中的标记被清空，再次访问时会重新显示弹窗。
• 未关闭浏览器仅重开页面/刷新：sessionStorage的标记会保留，因此不会重复显示弹窗。

补充说明（跨标签页场景）： #

如果你的需求是同一浏览器会话内打开新标签页也不显示弹窗（而不仅仅是刷新当前页），那么sessionStorage就不够用了（它是标签页隔离的）。这时候我们可以结合localStorage和storage事件来实现跨标签页的状态同步，代码如下：

$(document).ready(function() {
  // 初始化会话标记
  if (!sessionStorage.getItem('modalSessionActive')) {
    sessionStorage.setItem('modalSessionActive', 'true');
    
    // 检查localStorage的全局标记
    if (!localStorage.getItem('modalShownInSession')) {
      $('#exampleModal').modal('show');
      localStorage.setItem('modalShownInSession', 'true');
    }
  }

  // 监听其他标签页的存储变化，同步状态
  window.addEventListener('storage', function(e) {
    if (e.key === 'modalShownInSession' && e.newValue === 'true') {
      sessionStorage.setItem('modalSessionActive', 'true');
    }
  });

  // 浏览器关闭时尽量清除localStorage标记（补充逻辑，无法100%覆盖崩溃场景）
  window.addEventListener('beforeunload', function() {
    localStorage.removeItem('modalShownInSession');
  });
});

这个跨标签页的方案可以确保：同一浏览器会话内，不管打开多少标签页，弹窗只显示一次；关闭浏览器后再次访问，标记被清空，弹窗重新显示。

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