登录时若勾选“记住我”，将token和过期时间存入localStorage；2. 页面加载时检查token有效性，未过期则请求验证并自动跳转主页；3. 退出时清除存储数据。核心是通过localStorage持久化凭证实现自动登录，需注意XSS风险与敏感信息保护。
实现“记住登录状态”和“自动登录”功能，核心是利用 HTML5 的 localStorage 在浏览器中持久保存用户身份信息。以下是清晰的逻辑与实现方式。
1. 登录时保存用户信息（记住我）
当用户勾选“记住我”并成功登录后，将必要的登录凭证（如 token、用户名、过期时间等）存入 localStorage。
通常保存的是 token 而非密码，更安全可附加一个过期时间戳，控制自动登录的有效期
示例代码：
// 模拟登录成功后if (rememberMe.checked) { const token = response.token; const expires = Date.now() + 7 * 24 * 60 * 60 * 1000; // 7天后过期 localStorage.setItem('authToken', token); localStorage.setItem('authExpires', expires);}
2. 页面加载时检查是否自动登录
在进入登录页或首页时，读取 localStorage 中的登录信息，判断是否有效，决定是否跳过登录页。
立即学习“前端免费学习笔记（深入）”；
检查是否存在 token验证 token 是否过期若有效，调用接口验证 token 合法性，获取用户信息自动跳转到主页
示例代码：
function autoLogin() { const token = localStorage.getItem('authToken'); const expires = localStorage.getItem('authExpires');if (!token || !expires) return false;
if (Date.now() > parseInt(expires)) {// 已过期，清除clearAuthData();return false;}
// 请求服务器验证 tokenfetch('/api/verify', {method: 'POST',headers: { 'Authorization': Bearer ${token} }}).then(res => res.json()).then(data => {if (data.valid) {// 自动登录成功，跳转主页window.location.href = '/dashboard';} else {clearAuthData();}}).catch(() => clearAuthData());}
function clearAuthData() {localStorage.removeItem('authToken');localStorage.removeItem('authExpires');}
3. 退出登录时清除数据
用户点击“退出”时，必须清除 localStorage 中的认证信息，确保安全。
function logout() { clearAuthData(); window.location.href = '/login';}
注意事项：
localStorage 不是绝对安全的存储方式，容易受到 XSS 攻击。敏感信息建议只存 token，并配合 HttpOnly Cookie 存储更关键的会话标识。自动登录适用于低风险系统，高安全场景应使用更严格的机制。
基本上就这些。不复杂但容易忽略细节。
以上就是html5使用localStorage实现记住登录状态 html5使用自动登录功能的逻辑的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1587513.html
微信扫一扫 
支付宝扫一扫 
