通过 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');
});
}
});? 注意事项：
立即学习“Java免费学习笔记（深入）”；
- localStorage 基于协议+域名+端口隔离，同源下永久有效（除非用户清除缓存或代码主动删除）；
- 若需支持“退出后重置”（如登出场景），可调用 localStorage.removeItem('hasEntered')；
- 不依赖 Cookie，无需服务端参与，兼容性好（IE8+）；
- 避免滥用：仅用于改善 UX 的轻量状态，不替代登录态或权限判断。
总结：虽然 :visited 在视觉上能改变链接颜色，但它不可被 JavaScript 读取。真正可控、安全且实用的方案是结合 localStorage 实现用户行为状态管理——一次写入，全程感知，简洁高效。
