登录时若勾选“记住我”，将token和过期时间存入localStorage；2. 页面加载时检查token有效性，未过期则请求验证并自动跳转主页；3. 退出时清除存储数据。核心是通过localStorage持久化凭证实现自动登录，需注意XSS风险与敏感信息保护。
实现“记住登录状态”和“自动登录”功能，核心是利用 HTML5 的 localStorage 在浏览器中持久保存用户身份信息。以下是清晰的逻辑与实现方式。
1. 登录时保存用户信息（记住我）
当用户勾选“记住我”并成功登录后，将必要的登录凭证（如 token、用户名、过期时间等）存入 localStorage。
- 通常保存的是 token 而非密码，更安全
- 可附加一个过期时间戳，控制自动登录的有效期
示例代码：
// 模拟登录成功后
if (rememberMe.checked) {
const to
ken = response.token;
const expires = Date.now() + 7 * 24 * 60 * 60 * 1000; // 7天后过期
localStorage.setItem('authToken', token);
localStorage.setItem('authExpires', expires);
}
ken = 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;
}
// 请求服务器验证 token
fetch('/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 存储更关键的会话标识。自动登录适用于低风险系统，高安全场景应使用更严格的机制。
基本上就这些。不复杂但容易忽略细节。
