如何为Modal Popup整合sessionStorage：关闭后同会话不再显示

要搞定这个需求，核心就是用sessionStorage的会话级存储特性——它的数据只在当前浏览器会话里有效，关掉标签页或浏览器就会自动清空。我们只需要在用户关闭模态框时存个标记，页面加载时先查这个标记，没标记才触发弹窗。

修改后的完整代码 #

<div id="myModal" class="modal">
   <div class="modal-content">
      <div class="modal-body">
          <span class="close">&times;</span>
          <h1>I'm Dummy Body</h1>
      </div>
   </div>
</div>

<script>
    var modal = document.getElementById("myModal");
    var span = document.getElementsByClassName("close")[0];
    
    // 统一处理关闭逻辑，同时写入会话存储标记
    function closeModal() {
      modal.style.display = "none";
      sessionStorage.setItem('modalClosed', 'true');
    }
    
    span.onclick = closeModal;
    
    window.onclick = function(event) {
      if (event.target == modal) {
        closeModal();
      }
    }
    
    // 只有新会话（没关闭过模态框）才启动弹窗定时器
    if (!sessionStorage.getItem('modalClosed')) {
      setTimeout(function(){
          modal.style.display = "block";
        },6000)
    }
</script>

关键改动说明 #

• 抽出closeModal通用函数，整合关闭模态框与会话存储标记写入逻辑，点击关闭按钮或模态框背景都会触发标记
• 在启动弹窗定时器前，增加sessionStorage检查：仅当标记不存在（新会话）时，才执行6秒后弹窗的逻辑；当前会话内已关闭过模态框则不再触发

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