html5使用localStorage实现记住登录状态 html5使用自动登录功能的逻辑-html教程-PHP中文网

html5使用localStorage实现记住登录状态 html5使用自动登录功能的逻辑

雪夜

发布： 2025-10-22 13:21:02

原创

331人浏览过

登录时若勾选“记住我”，将token和过期时间存入localStorage；2. 页面加载时检查token有效性，未过期则请求验证并自动跳转主页；3. 退出时清除存储数据。核心是通过localStorage持久化凭证实现自动登录，需注意XSS风险与敏感信息保护。

html5使用localstorage实现记住登录状态 html5使用自动登录功能的逻辑

实现“记住登录状态”和“自动登录”功能，核心是利用 HTML5 的 localStorage 在浏览器中持久保存用户身份信息。以下是清晰的逻辑与实现方式。

1. 登录时保存用户信息（记住我）

当用户勾选“记住我”并成功登录后，将必要的登录凭证（如 token、用户名、过期时间等）存入 localStorage。

通常保存的是 token 而非密码，更安全
可附加一个过期时间戳，控制自动登录的有效期

示例代码：

风声雨声

基于 gpt-3.5 的翻译服务、内容学习服务

124

查看详情

// 模拟登录成功后
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');
<p>if (!token || !expires) return false;</p><p>if (Date.now() > parseInt(expires)) {
// 已过期，清除
clearAuthData();
return false;
}</p><p>// 请求服务器验证 token
fetch('/api/verify', {
method: 'POST',
headers: { 'Authorization': <code>Bearer ${token}</code> }
})
.then(res => res.json())
.then(data => {
if (data.valid) {
// 自动登录成功，跳转主页
window.location.href = '/dashboard';
} else {
clearAuthData();
}
})
.catch(() => clearAuthData());
}</p><p>function clearAuthData() {
localStorage.removeItem('authToken');
localStorage.removeItem('authExpires');
}</p>

登录后复制

3. 退出登录时清除数据

用户点击“退出”时，必须清除 localStorage 中的认证信息，确保安全。

function logout() {
  clearAuthData();
  window.location.href = '/login';
}

登录后复制

注意事项：

localStorage 不是绝对安全的存储方式，容易受到 XSS 攻击。敏感信息建议只存 token，并配合 HttpOnly Cookie 存储更关键的会话标识。自动登录适用于低风险系统，高安全场景应使用更严格的机制。

基本上就这些。不复杂但容易忽略细节。

以上就是html5使用localStorage实现记住登录状态 html5使用自动登录功能的逻辑的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

html如何设置倒序列_使用CSS设置HTML列表倒序显示【列表】如何看html5标签_查看与理解HTML5语义化标签方法【标签】 html5如何调用接口_HTML5接口调用步骤与API使用技巧【详解】如何安装脚本HTML5_HTML5脚本安装步骤与脚本引入方法【教程】 html如何建立_建立HTML文件并编写基本结构【基本】