利用cookie实现记住密码功能

<div class="data">
        <form action="#">
            <div class="form-group">
                <p>账号</p>
                <input type="text" class="username" placeholder="账号为邮箱" />
                <p class="extra"></p>
            </div>
            <div class="form-group icon">
                <p>密码</p>
                <div class="icon">
                    <input type="password" class="pwd" placeholder="密码长度不小于6" placeholder-style="color: #333333;" />
                    <img src="./切图/关闭显示.png" alt="" class="eye">
                    <p class="extrapwd"></p>
                </div>
            </div>
            <div class="form_group">
                <span>
                    <input type="checkbox" class="radio" id="remeberPwd">
                    <span>记住密码</span>
                </span>
                <span></span>
                <span><a href="#">忘记密码</a></span>
            </div>
            <button class="btn" id="loginBtn">登录</button>
        </form>
    </div>

<script>
let showPaw = false;
        let ruleForm = {};
        let remeberPwdFlag = false
        let email = document.querySelector('.username')
        let pword = document.querySelector('.pwd')
        let btn = document.querySelector('#loginBtn');

window.onload = () => {
            getCookie()
            console.log(ruleForm, 'ruleForm');
            if (ruleForm.username) {
                document.querySelector('.username').value = ruleForm.username;
                document.querySelector('.pwd').value = ruleForm.password;
                document.querySelector('#remeberPwd').checked = true;
                remeberPwdFlag = true
            }
        }

        document.querySelector('.eye').addEventListener('click', (e) => {
            if (showPaw) {
                e.target.src = './切图/关闭显示.png'
                showPaw = !showPaw
                document.querySelector('.pwd').type = "password"
            } else {
                e.target.src = './切图/显示.png'
                showPaw = !showPaw
                document.querySelector('.pwd').type = "text"
            }
        })


        //设置cookie
        function setCookie(c_name, c_pwd, exdays) {
            var exdate = new Date(); //获取时间
            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
            //字符串拼接cookie
            window.document.cookie =
                "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
            window.document.cookie =
                "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
        }
        //读取cookie
        function getCookie() {
            if (document.cookie.length > 0) {
                console.log("获取cookie document.cookie", document.cookie);
                var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
                for (var i = 0; i < arr.length; i++) {
                    var arr2 = arr[i].split("="); //再次切割
                    console.log("arr2", arr2);
                    //判断查找相对应的值
                    if (arr2[0] == "userName") {
                        ruleForm.username = arr2[1]; //保存到保存数据的地方
                    } else if (arr2[0] == "userPwd") {
                        ruleForm.password = arr2[1];
                    }
                }
            }
            if (ruleForm.username != "" && ruleForm.password != "") {
                remember = true;
            } else {
                remember = false;
            }
        }
        //清除cookie
        function clearCookie() {
            setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
        }

        remeberPwd.addEventListener('change', (e) => {
            console.log(e.target.checked);
            remeberPwdFlag = e.target.checked
        })

        document.querySelector('#loginBtn').addEventListener('click', () => {
            // 记住密码
            console.log(remeberPwdFlag,'remeberPwdFlag');
            if (remeberPwdFlag) {
                let userName = document.querySelector('.username').value;
                let password = document.querySelector('.pwd').value;
                setCookie(userName, password, 1)
            } else {
                // 清除密码
                clearCookie()
            }
        })
</script>