浏览器原生 autocomplete 机制可安全实现“记住密码”，手动用 localStorage 存明文密码存在 XSS 风险、被拦截、跨设备失效等问题；需正确设置 form 和 input 的 autocomplete 属性并使用原生 POST 表单提交。
浏览器原生的 autocomplete 机制就能实现“记住密码”，不需要自己用 localStorage 或 sessionStorage 手动存密码——这么做不仅不安全，还大概率被现代浏览器拦截或清空。
为什么不能自己用 localStorage 存密码
手动把密码明文存在 localStorage 是严重安全风险：
- 任何 XSS 脚本都能立刻读取
localStorage.getItem('password') - Chrome、Edge 等新版浏览器在无用户交互（如点击）时，会拒绝写入
localStorage，导致保存失败但无报错 - 用户切换设备、清除网站数据、启用无痕模式时，这些手动存的密码直接丢失，而浏览器密码管理器仍能同步
- 部分安全策略（如
Content-Security-Policy）会禁止localStorage写入
autocomplete 属性怎么写才有效
关键不是加个 autocomplete="on" 就行，必须配合表单结构和字段命名：
- 整个
<form></form>标签需有autocomplete="on"（虽是默认值，但显式声明更稳妥） - 账号输入框必须是
<input type="text">或<input type="email">，且name或id含username、email、login等关键词 - 密码框必须是
<input type="password">，且name或id为password（大小写敏感，Password不生效） - 避免动态生成 input（如 Vue/React 中 v-if 切换），浏览器可能无法关联字段
正确示例：
立即学习“前端免费学习笔记（深入）”；
<form autocomplete="on"> <input type="email" name="username" autocomplete="username"> <input type="password" name="password" autocomplete="current-password"> <button type="submit">登录</button> </form>
登录后自动填充的密码怎么触发
用户首次成功登录后，浏览器不会立刻弹出“保存密码”提示——它依赖两个条件同时满足：
- 表单提交方式为
POST（method="post"），且响应状态码是200或302（重定向到首页也算） - 密码字段在提交前未被 JS 清空或修改（例如：提交后执行
input.value = ''会破坏保存逻辑） - 如果页面用了
fetch或axios提交，浏览器完全无法感知，也就不会触发保存提示
所以纯前端 SPA 登录，想让浏览器记住密码，必须用原生表单提交（哪怕只是跳转到一个中间页再重定向回来）。
为什么有时候“记住密码”提示就是不出现
常见原因很具体：
- 当前域名是
localhost或非 HTTPS 的http://地址（Chrome 117+ 已强制要求 HTTPS 才允许保存密码） - 密码框被设了
autocomplete="off"（包括父级<form></form>上设置） - 页面存在多个
type="password"输入框，且没用autocomplete="new-password"明确区分新密码和当前密码 - 用户在浏览器设置里关闭了“密码管理器”功能（Chrome 设置 > 自动填充 > 密码）
真要调试，可打开 Chrome DevTools → Application → Auto Fill → Passwords，看当前站点是否已被识别为可保存密码的登录表单。
真正省心的方式，是信任浏览器的密码管理器；所有试图绕过它、自己存密码的方案，都会在兼容性、安全性和用户体验上付出代价。
