前端实现记住密码功能的完整步骤

<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>

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

// 登录成功后
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);
    }
});