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

通过 `localstorage` 记录用户首次访问状态，可在用户再次进入首页时自动跳过 logo 欢迎页，直接显示主内容，提升用户体验。无需服务端参与，兼容现代浏览器。

在单页式首页设计中（如“Logo + Enter 按钮”作为入口），每次用户点击导航中的“首页”链接都会重新加载页面，导致欢迎屏重复出现——这并非由 css 的 :visited 伪类控制（该伪类仅适用于 链接的颜色/样式，且无法通过 javaScript 读取其状态，出于隐私限制，浏览器明确禁止脚本访问 :visited 状态）。

✅ 正确方案是：利用客户端持久化存储，在用户首次完成进入操作后标记状态，后续访问时检查该标记并跳过欢迎流程。

实现步骤（推荐使用 localStorage）

1. 用户点击“Enter”按钮时，设置标记：

   document.getElementById('enter-btn').addEventListener('click', function() { // 隐藏欢迎区域，显示主内容 document.getElementById('entry').style.display = 'none'; document.getElementById('main-content').style.display = 'block';

// 记录“已访问”状态（仅写入一次） localStorage.setItem(‘hasVisitedHome’, ‘true’); });

2. **页面加载时检查并自动跳过**： ```javascript window.addEventListener('DOMContentLoaded', function() {   if (localStorage.getItem('hasVisitedHome') === 'true') {     // 直接隐藏欢迎屏，显示主内容     document.getElementById('entry').style.display = 'none';     document.getElementById('main-content').style.display = 'block';   }   // 否则保持默认：显示欢迎屏 });

注意事项 ✅

• localStorage 数据长期保留（除非用户手动清除或代码调用 removeItem()），适合“永久跳过欢迎页”场景；若需限时有效（如 7 天），可改用带时间戳的值并配合 date.now() 判断。
• 建议添加 try…catch 防止无痕模式等禁用 localStorage 的环境报错：

  try {   localStorage.setItem('hasVisitedHome', 'true'); } catch (e) {   console.warn('localStorage not available, fallback to session-only logic'); }

• 不要依赖 document.referrer 或 URL 参数做判断——不可靠且易被绕过。

总结

:visited 是纯 CSS 渲染伪类，JavaScript 无法读取，因此绝不能用于逻辑判断。localStorage 是轻量、标准、跨会话的首选方案。只需两处简单脚本，即可实现“首次访问展示欢迎页，再次访问直抵主内容”的平滑体验。