如何识别访客会话，实现单会话仅展示一次弹窗？

Hey there! 这个需求我帮不少开发者实现过，核心思路就是利用浏览器的本地存储来标记用户已经看过弹窗，这样跨页面跳转时就能读取这个标记，避免重复展示。下面给你两种常用的实现方案，你可以根据自己的场景选择：

这种方式会把标记存在浏览器里，即使用户关闭浏览器再重新打开，只要没清除缓存，弹窗就不会再出现，适合希望用户只看一次的场景。

实现步骤很简单：

• 页面加载完成后，先检查localStorage里有没有hasSeenPopup这个标记
• 如果没有标记，就展示弹窗，然后把标记设为true
• 如果已经有标记，直接跳过弹窗逻辑

代码示例：

// 等页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 从本地存储读取标记
  const hasSeenPopup = localStorage.getItem('hasSeenPopup');
  
  if (!hasSeenPopup) {
    // 调用你的弹窗展示函数，这里是示例实现
    showWelcomePopup();
    
    // 设置标记，防止重复展示
    localStorage.setItem('hasSeenPopup', 'true');
  }
});

// 示例弹窗函数，你可以替换成自己的弹窗组件逻辑
function showWelcomePopup() {
  // 创建弹窗元素
  const popup = document.createElement('div');
  popup.style.cssText = `
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
  `;
  popup.innerHTML = `
    <h3>欢迎来到我的网站！</h3>
    <p>感谢您的访问，希望您能找到需要的内容😊</p>
    <button id="closePopup" style="margin-top: 1rem; padding: 0.5rem 1rem; cursor: pointer;">关闭</button>
  `;
  
  // 添加到页面
  document.body.appendChild(popup);
  
  // 关闭按钮逻辑
  document.getElementById('closePopup').addEventListener('click', () => {
    popup.remove();
  });
}

如果希望用户每次打开浏览器访问网站时都能看到弹窗，只是在同一次浏览会话（不关闭浏览器）里不重复弹，就用sessionStorage。用法和localStorage几乎一致，只是替换存储对象：

document.addEventListener('DOMContentLoaded', function() {
  const hasSeenPopup = sessionStorage.getItem('hasSeenPopup');
  
  if (!hasSeenPopup) {
    showWelcomePopup();
    sessionStorage.setItem('hasSeenPopup', 'true');
  }
});

// 弹窗函数和上面一样，这里就不重复写了

• 如果用户手动清除了浏览器的本地存储/缓存，标记会消失，弹窗会再次展示，这是正常的浏览器行为
• 如果你想给用户提供“不再显示”的选项，可以把设置标记的逻辑移到关闭按钮的点击事件里（比如用户点击“不再显示”才设置标记，而不是一弹窗就设置）
• 确保你的代码在DOM加载完成后执行，避免找不到页面元素的问题

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