正文

学会原生JS轻松实现密码记住功能，告别繁琐登录步骤，只需简单几步！

/0 浏览量
0414

在这个数字化时代，密码是我们保护个人账户安全的重要工具。然而，随着我们在线账户数量的增加，记住每一个账户的密码变得越来越困难。今天，我将教你如何使用原生JavaScript轻松实现一个密码记住功能，让你在下次登录时告别繁琐的步骤。

准备工作

在开始之前，请确保你的网页有以下元素：

  1. 一个登录表单，包含用户名和密码输入框以及登录按钮。
  2. 一个复选框，让用户选择是否记住密码。

以下是这些元素的HTML代码示例：

<form id="loginForm">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>
    <label>
        <input type="checkbox" id="rememberMe" name="rememberMe"> 记住密码
    </label>
    <button type="submit">登录</button>
</form>

实现密码记住功能

以下是实现密码记住功能的步骤：

1. 检查复选框是否被选中

在登录按钮的点击事件中，首先检查“记住密码”复选框是否被选中。

document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();
    var rememberMe = document.getElementById('rememberMe').checked;
    // ...
});

2. 保存密码

如果复选框被选中，将用户名和密码保存到本地存储（如localStorage）。

if (rememberMe) {
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    localStorage.setItem('username', username);
    localStorage.setItem('password', password);
}

3. 自动填充用户名和密码

在页面加载时，检查本地存储中是否有保存的用户名和密码，如果有，自动填充到输入框中。

window.onload = function() {
    var username = localStorage.getItem('username');
    var password = localStorage.getItem('password');
    if (username && password) {
        document.getElementById('username').value = username;
        document.getElementById('password').value = password;
        document.getElementById('rememberMe').checked = true;
    }
};

4. 删除本地存储中的密码

为了安全起见，建议在用户登录成功后删除本地存储中的密码。

if (username && password) {
    localStorage.removeItem('username');
    localStorage.removeItem('password');
}

总结

通过以上步骤，你就可以轻松地使用原生JavaScript实现一个密码记住功能。这不仅简化了用户的登录流程，还能提高用户体验。希望这篇文章能帮助你，如果你有任何问题，欢迎在评论区留言。

-- 展开阅读全文 --