当前位置：首页 > JavaScript

js记住密码怎么实现

2026-04-03 18:56:10JavaScript

使用 localStorage 存储密码

通过 localStorage 将用户名和密码保存在浏览器中，即使关闭页面后数据仍会保留。这种方式简单易用，但需要注意安全性问题。

// 保存密码
localStorage.setItem('username', 'user123');
localStorage.setItem('password', 'pass123');

// 读取密码
const username = localStorage.getItem('username');
const password = localStorage.getItem('password');

使用 sessionStorage 临时存储

sessionStorage 仅在当前会话期间有效，关闭标签页或浏览器后数据会被清除。适合临时记住密码的场景。

// 保存密码
sessionStorage.setItem('username', 'user123');
sessionStorage.setItem('password', 'pass123');

// 读取密码
const username = sessionStorage.getItem('username');
const password = sessionStorage.getItem('password');

使用 Cookies 存储

Cookies 可以设置过期时间，适合需要长期记住登录状态的场景。通过 document.cookie 操作。

// 设置Cookie
document.cookie = "username=user123; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";
document.cookie = "password=pass123; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

// 读取Cookie
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}
const username = getCookie('username');
const password = getCookie('password');

结合表单自动填充

通过 JavaScript 监听表单加载事件，自动填充保存的凭证。通常与上述存储方式结合使用。

document.addEventListener('DOMContentLoaded', () => {
  const username = localStorage.getItem('username');
  const password = localStorage.getItem('password');
  document.getElementById('username').value = username || '';
  document.getElementById('password').value = password || '';
});

安全注意事项

存储明文密码存在安全隐患，建议采取以下措施：

使用 HTTPS 协议传输数据
对密码进行加密后再存储
提供显式的"记住密码"选项让用户选择
敏感信息考虑使用服务端存储方案

// 简单加密示例（实际应使用更安全的加密方式）
function simpleEncrypt(text) {
  return btoa(text);
}
function simpleDecrypt(text) {
  return atob(text);
}

localStorage.setItem('password', simpleEncrypt('pass123'));
const password = simpleDecrypt(localStorage.getItem('password'));