如何实现浏览器同一会话下网站首页弹窗仅单次显示

云原生阿岚

2026-10-5

修复方案

原有代码核心问题

页面加载时直接强制设置cookie=appear，每次访问首页都会重置状态，导致弹窗每次都弹出
条件判断误用赋值运算符=替代比较运算符，逻辑判断完全失效
直接对document.cookie做全等判断不合理：document.cookie返回的是当前站点所有cookie的拼接字符串，不能直接用于判断单一键值对
未设置Cookie的path属性，默认仅在当前页面路径生效，跳转其他页面后返回首页无法读取之前写入的Cookie

修复思路

你需要的会话级触发逻辑本身和会话Cookie的特性完全匹配：不设置过期时间的Cookie会在浏览器进程完全关闭后自动清除，正好满足「关闭浏览器重开才会再次触发弹窗」的需求，只要调整逻辑顺序和Cookie配置即可。

修复后代码

JS逻辑

// 封装Cookie读取工具函数
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// 页面加载时先判断弹窗关闭状态
window.onload = function() {
  const popupEl = document.getElementById('popup');
  // 已存在关闭标识，直接隐藏弹窗
  if (getCookie('popup_closed') === '1') {
    popupEl.style.display = 'none';
  }
}

// 关闭按钮触发逻辑
function close_function() {
  const popupEl = document.getElementById('popup');
  popupEl.style.display = 'none';
  // 写入会话级Cookie，path=/保证全站生效，不设过期时间，关闭浏览器自动清除
  document.cookie = 'popup_closed=1; path=/';
}