一、核心实现原理:不是记住,而是'提示填充'
首先要澄清一个常见的误解:前端的'记住密码'功能通常并不直接存储你的密码明文。它的核心原理是:请求浏览器将账号密码保存到其密码管理器中,并在下次检测到对应登录表单时,自动或提示用户填充。
下图清晰地展示了这一核心流程:
首次登录与保存:
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" = => 记住密码
登录


