前端如何实现 [记住密码] 功能

文章目录

• • 一、核心实现原理：不是记住，而是“提示填充”
  • 二、技术实现方案详解
  • • 方案一：依赖浏览器原生行为（最常用）
    • 方案二：前端持久化存储（需谨慎考虑）
  • 三、安全考量与实践准则
  • 四、最佳实践总结

我们在访问网站的时候，发现很多的登录页面都是有记住密码的功能的。

如gitee码云的登录页面：

一、核心实现原理：不是记住，而是“提示填充”

首先要澄清一个常见的误解：前端的“记住密码”功能通常并不直接存储你的密码明文。它的核心原理是：请求浏览器将账号密码保存到其密码管理器中，并在下次检测到对应登录表单时，自动或提示用户填充。

下图清晰地展示了这一核心流程：

服务器

浏览器密码管理器

登录表单

用户

服务器

浏览器密码管理器

登录表单

用户

#mermaid-svg-QhqU6pBw63GF72vL{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-QhqU6pBw63GF72vL .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-QhqU6pBw63GF72vL .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-QhqU6pBw63GF72vL .error-icon{fill:#552222;}#mermaid-svg-QhqU6pBw63GF72vL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-QhqU6pBw63GF72vL .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-QhqU6pBw63GF72vL .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-QhqU6pBw63GF72vL .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-QhqU6pBw63GF72vL .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-QhqU6pBw63GF72vL .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-QhqU6pBw63GF72vL .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-QhqU6pBw63GF72vL .marker{fill:#333333;stroke:#333333;}#mermaid-svg-QhqU6pBw63GF72vL .marker.cross{stroke:#333333;}#mermaid-svg-QhqU6pBw63GF72vL svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-QhqU6pBw63GF72vL p{margin:0;}#mermaid-svg-QhqU6pBw63GF72vL .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-QhqU6pBw63GF72vL text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-QhqU6pBw63GF72vL .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-QhqU6pBw63GF72vL .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-QhqU6pBw63GF72vL .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-QhqU6pBw63GF72vL .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-QhqU6pBw63GF72vL #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-QhqU6pBw63GF72vL .sequenceNumber{fill:white;}#mermaid-svg-QhqU6pBw63GF72vL #sequencenumber{fill:#333;}#mermaid-svg-QhqU6pBw63GF72vL #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-QhqU6pBw63GF72vL .messageText{fill:#333;stroke:none;}#mermaid-svg-QhqU6pBw63GF72vL .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-QhqU6pBw63GF72vL .labelText,#mermaid-svg-QhqU6pBw63GF72vL .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-QhqU6pBw63GF72vL .loopText,#mermaid-svg-QhqU6pBw63GF72vL .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-QhqU6pBw63GF72vL .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-QhqU6pBw63GF72vL .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-QhqU6pBw63GF72vL .noteText,#mermaid-svg-QhqU6pBw63GF72vL .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-QhqU6pBw63GF72vL .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-QhqU6pBw63GF72vL .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-QhqU6pBw63GF72vL .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-QhqU6pBw63GF72vL .actorPopupMenu{position:absolute;}#mermaid-svg-QhqU6pBw63GF72vL .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-QhqU6pBw63GF72vL .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-QhqU6pBw63GF72vL .actor-man circle,#mermaid-svg-QhqU6pBw63GF72vL line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-QhqU6pBw63GF72vL :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

首次登录与保存

后续自动填充

1. 输入账号密码，勾选“记住我”

2. 提交表单，发送登录请求

3. 返回登录成功响应

4. 触发浏览器提示：“是否保存密码？”

5. 用户点击“保存”

6. 将账号、密码、站点关联加密存储

7. 再次访问登录页

8. 自动识别表单并填充已存信息

9. 用户点击登录（或直接提交）

10. 发送填充后的凭证完成登录

二、技术实现方案详解

方案一：依赖浏览器原生行为（最常用）

这是最标准、最安全的做法。浏览器的密码管理器会自动识别符合规范的登录表单。

1. 基础表单要求

<form id="login-form" method="post">
<!– 关键：input的type和name需规范 –>
<input type="text" name="username" id="username" autocomplete="username">
<input type="password" name="password" id="password" autocomplete="current-password">

<!– “记住我”复选框 –>
<label>
<input type="checkbox" name="remember-me" id="remember-me"> 记住密码
</label>

<button type="submit">登录</button>
</form>

关键属性说明：

• autocomplete：这是提示浏览器自动填充的关键属性。username 和 current-password 是标准值。
• type=”password”：浏览器通过此类型识别密码字段。
• 规范的 name 属性：如 username、password 等，能帮助浏览器更准确地识别。

2. 登录成功后的处理 当表单提交且服务器验证成功后，如果用户勾选了“记住我”，浏览器会自动弹出对话框，询问用户是否保存密码。这个提示是由浏览器控制的，网站无法强制触发。

方案二：前端持久化存储（需谨慎考虑）

有时需要实现“记住登录状态”而非让浏览器管理密码本身（例如保持用户一周内免登录）。这时会使用前端存储。

1. 实现示例：使用Cookie

function handleLogin(username, password, rememberMe) {
// 向服务器发送登录请求…
if (loginSuccess && rememberMe) {
// 服务器在响应中设置一个长期的、HttpOnly的认证Token Cookie
// 示例：Set-Cookie: session_token=abc123; Max-Age=604800; HttpOnly; Secure
// 前端仅通过是否勾选“记住我”来影响服务器对Cookie有效期的设置
}
}

2. 实现示例：使用Web Storage（仅存储标识）

// 登录成功后
if (rememberMe && loginSuccess) {
// 存储一个非敏感的、服务器颁发的Token（而非密码！）
localStorage.setItem('auth_token', serverResponse.token);
localStorage.setItem('username', username); // 仅用于显示，不用于认证
}

// 下次访问时检查
window.addEventListener('DOMContentLoaded', function() {
const token = localStorage.getItem('auth_token');
if (token) {
// 使用Token向服务器请求验证，获取登录态
autoLoginWithToken(token);
}
});

三、安全考量与实践准则

记住密码功能在安全上如履薄冰，以下是必须遵守的准则：

四、最佳实践总结

👉点击进入我的网站