js实现cookies记住密码

本文介绍了一种使用JavaScript实现的记住密码功能,通过操作Cookie来保存用户的登录信息,并在下次登录时自动填充密码。

今天,分享一下用js实现cookie记住密码,希望对大家有帮助

html中整个login表单form,里面有啥username、password、验证码、记住密码(这里不详细说form)

password输入框上有onfocus()函数,聚焦时查看cookie中有没有记住的密码

login登录键上有sub()函数

<input type="text" class="login-inputStyle" name="loginpwd" id="loginpwd" onfocus="changepwd()" />
<input type="password" class="login-inputStyle" name="password" id="password" onblur="inputpwd(this.value)" style="display: none;" />
<input type="button" value="登录" onclick="sub()" class="login-subStyle" style="width: 290px;">

JavaScript:

html中添加js

<script>
function sub(){
    check();                    //表单检查[检查用户名、密码,验证码是不是为空之类的]
    setPwdAndChk();             //设置cookie,记住密码
    $("#loginForm").submit();   //获取表单id,submit
}
</script>

js文件:

function setPwdAndChk() {
    //取用户名
    var account = document.getElementById("loginname").value;
    var password = document.getElementById("password").value;
    //将最后一个用户信息写入到Cookie
    setLastAccount(account);
    //如果记住密码选项被选中
    if (document.getElementById("chkRememberPwd").checked == true) {
        //取密码值
        var expdate = new Date();
        expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
        //将用户名和密码写入到Cookie
        setCookie(account, password, expdate);
    } else {
        //如果没有选中记住密码,则立即过期
        resetCookie();
    }
}
function setLastAccount(account) {
    var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";
    var expdate = new Date();
    //当前时间加上两周的时间
    expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
    setCookie(id, account, expdate);
}
//取Cookie的值
function getCookie(name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg) {
            return getCookieVal(j);
        }
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) {
            break;
        }
    }
    return null;
}
//写入到Cookie
function setCookie(name, value, expires) {
    var argv = setCookie.arguments;
    var argc = setCookie.arguments.length;
    var expires = (argc > 2) ? argv[2] : null;
    var path = (argc > 3) ? argv[3] : null;
    var domain = (argc > 4) ? argv[4] : null;
    var secure = (argc > 5) ? argv[5] : false;
    document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");
}
function resetCookie() {
    var account = document.getElementById("loginname").value;
    var expdate = new Date();
    setCookie(account, null, expdate);
}

再次登录时:

password中的onfocus()函数,回去检查cookie中有没有记住的密码

js:

function changepwd() {
    getPwdAndChk();
}
function inputpwd(v) {
    if (v == "") {
        document.getElementById("loginpwd").style.display = "";
        document.getElementById("password").style.display = "none";
        document.getElementById("loginpwd").setAttribute("placeholder","密码/Password");
    }
}
//取Cookie的值
function getCookie(name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg) {
            return getCookieVal(j);
        }
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) {
            break;
        }
    }
    return null;
}
function getCookieVal(offset) {
    var endstr = document.cookie.indexOf(";", offset);
    if (endstr == -1) {
        endstr = document.cookie.length;
    }
    return unescape(document.cookie.substring(offset, endstr));
}
function getPwdAndChk() {
    var account = document.getElementById("loginname").value;
    var password = getCookie(account);
    if (password != null) {
        document.getElementById("chkRememberPwd").checked = true;
        document.getElementById("password").value = password;
    } else {
        document.getElementById("chkRememberPwd").checked = false;
        document.getElementById("password").value = "";
    }
}

自己写的,如有不足或错误,希望路过大佬指点和海涵

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值