如何使用 JavaScript 检测用户是否已访问过首页并跳过引导页

霞舞 2026-01-24 00:00:00 次阅读

通过 localstorage 记录用户首次访问状态，可在用户再次点击首页链接时跳过 logo 引导页，直接显示主内容，提升用户体验。

在单页式首页设计中（如“Logo + Enter 按钮”作为初始入口），若用户从其他页面返回首页（例如点击导航栏的“Home”链接）时每次都重置为引导屏，会带来重复、低效的交互体验。CSS 的 :visited 伪类仅适用于链接的样式控制，且出于隐私限制，JavaScript 无法读取其状态——因此不能用 getComputedStyle(link).color 或类似方式检测“是否已访问”，这是浏览器明确禁止的行为。

✅ 正确方案：使用 localStorage 持久化记录用户访问状态。

以下是一个轻量、可靠的实现示例：

// 页面加载时检查是否已“进入”过主内容
document.addEventListener('DOMContentLoaded', function () {
  const entrySection = document.getElementById('entry'); // Logo + Enter 按钮区域
  const mainContent = document.getElementById('main-content'); // 主内容区域

  // 若已标记为“已进入”，则直接显示主内容、隐藏引导页
  if (localStorage.getItem('hasEntered') === 'true') {
    entrySection.style.display = 'none';
    mainContent.style.display = 'block';
    return;
  }

  // 否则，绑定 Enter 按钮事件
  const enterBtn = document.getElementById('enter-btn');
  if (enterBtn) {
    enterBtn.addEventListener('click', function () {
      // 切换显示状态
      entrySection.style.display = 'none';
      mainContent.style.display = 'block';
      // 标记状态，持久保存
      localStorage.setItem('hasEntered', 'true');
    });
  }
});

? 注意事项：