本文介绍如何利用 localstorage 在 javascript 中持久化记录用户首次访问状态，从而在用户返回首页时自动跳过 logo 欢迎页，提升单页应用的用户体验。
在构建具有分步引导式首页（如“公司 Logo + Enter 按钮”作为入口层）的网站时，一个常见痛点是：用户从内页点击导航栏的“首页”链接后，页面会完整刷新或重载，导致又回到初始欢迎屏——即使用户已进入过主内容区。CSS 的 :visited 伪类仅适用于 <a> 链接的样式控制，且出于隐私限制，JavaScript 无法通过它读取或判断任意链接的访问状态（现代浏览器已禁用 getComputedStyle(link).color 等试探方式）。因此，必须借助客户端存储机制实现状态记忆。
推荐使用 localStorage —— 它简单、持久（除非用户手动清除）、无需后端支持，且兼容所有现代浏览器：
// 页面加载时检查是否已“进入过”
document.addEventListener('DOMContentLoaded', function() {
const hasEntered = localStorage.getItem('hasEnteredHomepage');
if (hasEntered === 'true') {
// 用户此前已点击 Enter，直接显示主内容区
document.getElementById('entry-screen').style.display = 'none';
document.getElementById('main-content').style.display = 'block';
} else {
// 显示欢迎屏（默认状态）
document.getElementById('entry-screen').style.display = 'block';
document.getElementById('main-content').style.display = 'none';
}
});
// “Enter”按钮点击事件
document.getElementById('enter-btn').addEventListener('click', function() {
// 隐藏欢迎屏，显示主内容
document.getElementById('entry-screen').style.display = 'none';
document.getElementById('main-content').style.display = 'block';
// 记录状态：用户已进入
localStorage.setItem('hasEnteredHomepage', 'true');
});⚠️ 注意事项：
- localStorage 是同源（origin）隔离的，即 https://example.com 与 https://www.example.com 视为不同源，状态不共享；
- 若需跨子域共享，可考虑 document.domain 配合 iframe 或改用 Cookie（需服务端配合）；
- 不建议依赖 sessionStorage，因其仅在当前会话有效，关闭标签页即丢失；
- 如需支持更精细的场景（如“7天内不再显示欢迎页”），可存储时间戳并做日期比对；
- 对于注重隐私的用户，若其禁用本地存储，应提供降级逻辑（例如始终显示欢迎页，或使用 cookie 作为备选）。
总结：虽然 :visited 伪类不可编程读取，但 localStorage 提供了轻量、可靠且标准的解决方案。只需在用户首次进入主内容时写入标记，并在每次首页加载时读取判断，即可无缝实现“智能跳过欢迎页”的交互体验。
立即学习“Java免费学习笔记（深入）”；
