js案例，如何实现登录界面中选择记住密码和自动登录选项的存储数据？

趋之

已于 2023-10-13 18:45:46 修改

阅读量312

点赞数 2

文章标签： javascript css html5

于 2023-09-21 15:21:31 首次发布

本文链接：https://blog.csdn.net/csgojingyu/article/details/133134697

版权

如何实现登录界面中选择记住密码和自动登录选项的存储数据？

要求：

输入用户名和密码后选中自动登录，并点击登录后，弹出登录成功。页面关闭后下次进来，用户名和密码都在，并且自动登录默认已选中，然后直接弹出登录成功。如果进来后把自动登录又取消选中，页面关闭后再次进来，用户名和密码不展示，并且自动登录不选中。
输入用户名和密码后选中记住密码，并点击登录后，弹出登录成功。页面关闭后下次进来，用户名和密码都在，并且记住密码默认已选中，这是只有点击登录时才会弹出登录成功。如果进来后把记住密码又取消选中，页面关闭后再次进来，用户名和密码不展示，并且记住密码不选中。
输入用户名和密码后选中记住密码和自动登录，点击登录后，弹出登录成功。页面关闭后下次进来，用户名和密码都在，并且自动登录和记住密码默认已选中，然后直接弹出登录成功。

运行代码部分：基于InsCode

HTML主体部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名" required><br><br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" placeholder="请输入密码" required><br><br>
        <input type="checkbox" id="autoLogin" name="autoLogin">自动登录
        <input type="checkbox" id="remember" name="remember">记住密码
        <br>
        <br>
        <button onclick="login()">登录</button>
    </form>
</body>
</html>

CSS样式部分：

form {
            width: 300px;
            height: 300px;
            margin: 100px auto;
        }

JS部分：

<script>
        // 获取本地存储的数据
        let username = localStorage.getItem('username')
        let password = localStorage.getItem('password')
        // 两个都存在，赋值给用户名和密码输入框
        if (username && password) {
            document.getElementById('username').value = username
            document.getElementById('password').value = password
            let autoLoginCheckbox = document.getElementById('autoLogin')
            if (localStorage.getItem('autoLogin')) {
                autoLoginCheckbox.checked = true
            }
            let rememberCheckbox = document.getElementById('remember')
            if (localStorage.getItem('remember')) {
                rememberCheckbox.checked = true
            }
        }
        // 初始化时如果检查到自动登录勾选，自动执行登录
        window.onload = function () {
            if (localStorage.getItem('autoLogin')) {
                login()
            }
        }
        // 定义函数button按钮的点击执行登录
        function login() {
            let usernameValue = document.getElementById('username').value
            let passwordValue = document.getElementById('password').value
            let autoLogin = document.getElementById('autoLogin').checked
            let remember = document.getElementById('remember').checked
            // if语句判断两个输入框内容是否存在
            if (usernameValue && passwordValue) {
                if (autoLogin) {
                    localStorage.setItem('username', usernameValue)
                    localStorage.setItem('password', passwordValue)
                    localStorage.setItem('autoLogin', 'true')
                }
                if (!autoLogin) {
                    localStorage.removeItem('autoLogin')
                }
                if (remember) {
                    localStorage.setItem('username', usernameValue)
                    localStorage.setItem('password', passwordValue)
                    localStorage.setItem('remember', 'true')
                }
                if (!remember) {
                    localStorage.removeItem('remember')
                }
                if (!autoLogin && !remember) {
                    localStorage.clear()
                }
                alert('登录成功')
                window.close()//关闭窗口
            } else {
                alert('请重新登录')
            }
        }

    </script>