如何用纯JavaScript或PHP实现仅单次会话显示的Cookie弹窗？

完全不用框架！咱们用浏览器自带的sessionStorage就能搞定——它是会话级别的存储，用户关闭浏览器标签页/窗口后数据就会自动清除，正好符合你“单次会话只弹一次”的需求。下面一步一步来，代码都给你写好，注释也标清楚：

第一步：写弹窗的HTML结构 #

先把弹窗的基础结构搭好，默认咱们先隐藏它，等JS判断后再决定要不要显示：

<!-- Cookie政策弹窗 -->
<div id="cookiePolicyPopup" style="display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 20px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);">
  <p>我们使用Cookie来提升您的浏览体验，继续浏览即表示您同意我们的Cookie政策。</p>
  <button id="acceptCookieBtn">同意</button>
  <button id="closeCookieBtn">关闭</button>
</div>

第二步：添加原生JS逻辑 #

这部分是核心，咱们要做两件事：页面加载时检查弹窗是否已经显示过；用户操作按钮后标记弹窗已显示：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const popup = document.getElementById('cookiePolicyPopup');
  const acceptBtn = document.getElementById('acceptCookieBtn');
  const closeBtn = document.getElementById('closeCookieBtn');

  // 检查sessionStorage里的标记：如果没有标记，就显示弹窗
  if (!sessionStorage.getItem('cookiePolicyShown')) {
    popup.style.display = 'block';
  }

  // 同意按钮点击事件：标记弹窗已显示，然后隐藏弹窗
  acceptBtn.addEventListener('click', function() {
    sessionStorage.setItem('cookiePolicyShown', 'true');
    popup.style.display = 'none';
  });

  // 关闭按钮点击事件：同样标记弹窗已显示，隐藏弹窗
  closeBtn.addEventListener('click', function() {
    sessionStorage.setItem('cookiePolicyShown', 'true');
    popup.style.display = 'none';
  });
});

简单解释下原理： #

• sessionStorage是浏览器提供的本地存储API，它的生命周期和当前浏览器会话绑定——用户打开标签页时创建，关闭标签页/浏览器时自动销毁，所以正好对应“单次会话”的需求。
• 页面加载时，我们先检查sessionStorage里有没有cookiePolicyShown这个标记：如果没有，说明是当前会话第一次加载页面，就显示弹窗；如果有，说明已经弹过了，就跳过。
• 不管用户点击“同意”还是“关闭”，我们都给sessionStorage设置这个标记，这样当前会话内再刷新页面或者打开同域名的其他页面，弹窗都不会再出现了。

要是你想调整弹窗的样式，直接改HTML里的style或者写单独的CSS就行，完全不用依赖任何框架，纯原生代码就能跑起来～

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