如何实现仅在用户第二次网站会话时显示div

你的核心问题在于没区分「同会话内的页面操作」和「新会话访问」——当前代码用了持久Cookie，且onbeforeunload在刷新、跳转、关闭浏览器时都会触发，导致刷新也会修改Cookie值。

要实现仅在第二次新会话访问时显示div，需要结合两种Cookie：

• 会话Cookie：关闭浏览器自动失效，用来标记当前会话是否已经处理过访问计数
• 持久Cookie：长期保存，记录用户的会话访问次数

修正后的代码示例 #

// 辅助函数：获取Cookie值
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
  return null;
}

// 辅助函数：设置Cookie，默认会话Cookie（expires为空）
function setCookie(name, value, days = null) {
  let cookieStr = `${name}=${value}; path=/`;
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    cookieStr += `; expires=${date.toUTCString()}`;
  }
  document.cookie = cookieStr;
}

function handleSessionCheck() {
  const visitCount = getCookie('visitCount');
  const currentSession = getCookie('currentSessionVisited');

  // 如果当前会话未标记（新会话）
  if (!currentSession) {
    if (!visitCount) {
      // 第一次新会话访问
      setCookie('visitCount', 1, 30);
    } else {
      // 非第一次新会话，更新计数
      setCookie('visitCount', parseInt(visitCount) + 1, 30);
    }
    // 标记当前会话已处理，避免刷新时重复计数
    setCookie('currentSessionVisited', 'true');
  }

  // 判断是否是第二次及以上新会话访问，显示div
  const count = visitCount ? parseInt(visitCount) : 0;
  if (count >= 2) {
    document.getElementById('targetDiv').style.display = 'block';
    console.log('显示目标div：第二次及以上新会话访问');
  } else {
    console.log('不显示div：第一次新会话访问或同会话内操作');
  }
}

// 页面加载时执行检查
window.addEventListener('load', handleSessionCheck);

代码逻辑说明 #

1. 会话CookiecurrentSessionVisited：只要浏览器没关闭，刷新或跳转页面时这个Cookie都存在，不会重复更新访问计数
2. 持久CookievisitCount：只有当用户开启新会话（关闭浏览器后再次打开）时，才会递增计数
3. 当visitCount >= 2时，说明是第二次及以上新会话访问，显示目标div

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