如何用JavaScript检测锚点链接visited状态？避免首页重复显示入口界面

关于检测CSS :visited伪类的可行性 #

不能通过JavaScript直接检测:visited伪类的状态——浏览器出于隐私保护的考虑，严格限制了对:visited样式的读取权限，仅允许获取极有限的样式属性（如文字颜色），且无法以此准确判断链接是否被访问过，更无法依赖它来控制页面显示逻辑。

推荐替代方案：使用本地存储（localStorage/sessionStorage） #

通过本地存储记录用户是否已经进入过主页面，是更可靠且可控的实现方式，具体步骤如下：

1. 页面加载时自动判断状态 #

页面初始化时，检查本地存储中的标记，若用户已经点击过Enter按钮，直接跳过入口界面显示主内容：

window.addEventListener('DOMContentLoaded', () => {
  const entrySection = document.getElementById('entry');
  const mainContent = document.getElementById('main-content');
  const hasEntered = localStorage.getItem('hasEntered');

  if (hasEntered) {
    entrySection.style.display = 'none';
    mainContent.style.display = 'block';
  }
});

2. 点击Enter按钮时记录状态 #

用户首次点击Enter按钮时，隐藏入口并显示主内容，同时在本地存储中写入标记：

document.getElementById('enter-btn').addEventListener('click', () => {
  const entrySection = document.getElementById('entry');
  const mainContent = document.getElementById('main-content');

  entrySection.style.display = 'none';
  mainContent.style.display = 'block';
  localStorage.setItem('hasEntered', 'true');
});

3. 处理首页导航按钮的点击事件 #

当用户点击首页导航时，先读取本地存储的标记，决定是否显示入口界面：

document.getElementById('home-nav').addEventListener('click', (e) => {
  e.preventDefault(); // 阻止a标签的默认跳转行为
  const entrySection = document.getElementById('entry');
  const mainContent = document.getElementById('main-content');
  const hasEntered = localStorage.getItem('hasEntered');

  if (hasEntered) {
    mainContent.style.display = 'block';
    entrySection.style.display = 'none';
  } else {
    entrySection.style.display = 'block';
    mainContent.style.display = 'none';
  }
  window.scrollTo(0, 0); // 可选：回到页面顶部
});

补充说明 #

• 使用localStorage时，标记会永久保存（直到用户手动清除浏览器缓存）；若希望关闭浏览器后重置状态，可替换为sessionStorage
• 该方案完全不受浏览器隐私限制，逻辑清晰且易于维护

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