如何让Bootstrap模态框仅在用户首次访问页面时弹出？

你可以利用sessionStorage来记录模态框是否已经在当前会话中弹出过，它的生命周期和浏览器会话一致（关闭标签页后数据会被清除），正好匹配你的需求。修改后的代码如下：

window.addEventListener('DOMContentLoaded', () => {
  // 检查会话存储中是否存在模态框已弹出的标记
  const hasModalShown = sessionStorage.getItem('modalShown');
  
  if (!hasModalShown) {
    const modal = new bootstrap.Modal(document.querySelector('#myModal'));
    modal.show();
    // 标记模态框已弹出，存入会话存储
    sessionStorage.setItem('modalShown', 'true');
  }
});

代码说明： #

• sessionStorage.getItem('modalShown')：读取会话存储中的标记，判断当前会话内是否已经弹出过模态框
• 当不存在该标记时，才初始化并显示模态框，同时通过sessionStorage.setItem存入标记
• 访客在同一会话内跳转页面后返回时，sessionStorage里的标记依然存在，模态框就不会再次弹出

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