本文介绍一种基于浏览器 localStorage 的轻量级方案，实现 home.html 仅允许从 index.html 重定向访问，直接输入 URL 将自动跳回首页，无需后端支持。
本文介绍一种基于浏览器 localstorage 的轻量级方案，实现 `home.html` 仅允许从 `index.html` 重定向访问，直接输入 url 将自动跳回首页，无需后端支持。
在前端开发中，有时需要对页面访问来源做简单控制（例如：确保用户必须先经过登录页或引导页），但又无法依赖服务端逻辑（如 PHP 或 Node.js）。此时可利用浏览器的 localStorage 实现轻量级“来源校验”。
✅ 实现原理
利用 localStorage 在 index.html 中设置一个临时标记，在 home.html 加载时检查该标记是否存在且有效；若缺失或不匹配，则强制重定向，并立即清除标记以防止重复使用。
? 示例代码
index.html（入口页）
在用户点击跳转前（如按钮点击事件中）写入标识：
<button id="goHome">进入主页</button>
<script>
document.getElementById('goHome').addEventListener('click', function() {
localStorage.setItem('access_granted', 'true');
window.location.href = 'home.html';
});
</script>home.html（受保护页）
页面加载时立即校验并清理标记：
<script>
// 页面加载时立即执行校验
if (localStorage.getItem('access_granted') !== 'true') {
alert('访问受限：请从首页进入');
window.location.href = 'index.html';
}
// 清除标记，确保一次性使用
localStorage.removeItem('access_granted');
</script>⚠️ 注意事项与局限性
- 安全性提示：此方案纯属前端控制，不可用于权限敏感场景（如支付、后台管理）。用户可通过开发者工具手动设置 localStorage 绕过限制。
- 跨域失效：localStorage 严格遵循同源策略，http:// 与 https://、www. 与非 www. 均视为不同源，需统一域名协议。
- 隐私模式兼容性：部分浏览器在无痕模式下可能禁用 localStorage，导致误判，建议增加降级逻辑（如配合 document.referrer 简单校验）。
- 推荐增强方式：若需更高可靠性，应结合服务端会话（如 JWT Token + Cookie 校验）或 Referer 头验证（需后端配合）。
总之，该方案适合原型演示、营销落地页等低安全要求场景，简洁高效，开箱即用。
