在网站开发中，经常需要判断用户是否为首次访问，从而决定是否展示欢迎页。通过JavaScript的存储API可以轻松记录用户的访问状态，实现访问过首页后跳过欢迎页的需求。
两种常用存储方案对比
实现访问状态检测主要依赖localStorage和sessionStorage，两者的核心区别如下：
| 存储类型 | 存储时效 | 适用场景 |
|---|---|---|
| localStorage | 永久存储，除非手动清除 | 需要长期记录用户访问状态，比如半年内不再展示欢迎页 |
| sessionStorage | 仅在当前浏览器标签页会话期间有效，关闭标签页后清除 | 仅在当前会话内跳过欢迎页，新开标签页仍展示欢迎页 |
基于localStorage的实现方案
localStorage适合需要长期记录访问状态的场景，实现步骤如下：
- 在欢迎页加载时，检查localStorage中是否存在访问标记
- 如果存在标记，说明用户之前访问过，直接跳转到首页
- 如果不存在标记，说明是首次访问，正常展示欢迎页，同时设置访问标记
- 在首页加载时，设置访问标记，确保后续访问欢迎页时可以直接跳转
欢迎页检测逻辑代码
以下是欢迎页的JavaScript检测代码：
// 检查localStorage中是否有首页访问标记
const hasVisited = localStorage.getItem('has_visited_index');
if (hasVisited === 'true') {
// 已访问过，直接跳转到首页
window.location.href = '/index.html';
} else {
// 首次访问，正常展示欢迎页内容
console.log('首次访问，展示欢迎页');
}
首页设置标记代码
在首页的JavaScript中添加以下代码，设置访问标记：
// 页面加载完成后设置访问标记
window.addEventListener('load', function() {
localStorage.setItem('has_visited_index', 'true');
});
基于sessionStorage的实现方案
如果仅需要在当前会话内跳过欢迎页，可以使用sessionStorage，实现逻辑和localStorage类似，只是存储的API不同：
欢迎页检测逻辑代码
// 检查sessionStorage中是否有首页访问标记
const hasVisitedSession = sessionStorage.getItem('has_visited_index_session');
if (hasVisitedSession === 'true') {
// 当前会话已访问过，跳转到首页
window.location.href = '/index.html';
}
首页设置标记代码
// 当前会话设置访问标记
window.addEventListener('load', function() {
sessionStorage.setItem('has_visited_index_session', 'true');
});
注意事项
- 存储的标记值建议设置为字符串类型，避免类型判断出错
- 如果用户清除了浏览器本地存储，两种方案的标记都会被清除，会重新展示欢迎页，这是正常表现
- 跳转逻辑建议放在页面加载的早期阶段，避免欢迎页内容已经渲染后再跳转，影响用户体验
- 如果网站有登录状态，也可以结合用户登录信息存储标记，实现更精准的访问状态记录
需要注意的是，localStorage和sessionStorage仅在客户端生效，如果用户使用无痕模式或者禁用了本地存储，该功能会失效，实际开发中可以根据需求添加降级处理方案。
JavaScriptlocalStoragesessionStorage首页访问检测欢迎页跳转修改时间：2026-07-22 13:15:27