js实现cookies记住密码

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

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

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

login登录键上有sub()函数

<input type="text" class="login-inputStyle" name="loginpwd" id="loginpwd" οnfοcus="changepwd()" />
<input type="password" class="login-inputStyle" name="password" id="password" οnblur="inputpwd(this.value)" style="display: none;" />
<input type="button" value="登录" οnclick="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 = "";
    }
}

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现记住密码或者自动登录功能,可以使用cookie或session来存储用户信息。具体实现步骤如下: 1. 在登录页面添加一个复选框,让用户选择是否记住密码或自动登录。 2. 在后台处理登录验证时,如果用户选择了记住密码或自动登录,就在cookie或session保存用户信息,例如用户名和密码或者用户ID等。 3. 在用户下次访问该网站时,先检查cookie或session是否存在用户信息,如果存在,则直接跳转到用户主页,实现自动登录;如果不存在,则跳转到登录页面,让用户重新登录。 以下是一个使用cookie实现记住密码或自动登录的示例: ```jsp <% // 处理登录请求 String username = request.getParameter("username"); String password = request.getParameter("password"); String remember = request.getParameter("remember"); // 验证用户名和密码是否正确 boolean isValidUser = validateUser(username, password); if (isValidUser) { // 如果用户选择了记住密码或自动登录,就创建一个cookie保存用户信息 if ("on".equals(remember)) { Cookie cookie = new Cookie("userInfo", username + ":" + password); cookie.setMaxAge(7 * 24 * 60 * 60); // 设置cookie有效期为7天 response.addCookie(cookie); } // 将用户信息保存到session HttpSession session = request.getSession(); session.setAttribute("userInfo", username); // 跳转到用户主页 response.sendRedirect("main.jsp"); } else { // 登录失败,返回登录页面 response.sendRedirect("login.jsp?error=1"); } %> ``` 在用户下次访问网站时,可以在页面加载时检查cookie是否存在用户信息,如果存在,则直接跳转到用户主页: ```jsp <% // 检查cookie是否存在用户信息 String userInfo = null; Cookie[] cookies = request.getCookies(); if (cookies != null) { for (Cookie cookie : cookies) { if ("userInfo".equals(cookie.getName())) { userInfo = cookie.getValue(); break; } } } // 如果存在用户信息,则直接跳转到用户主页 if (userInfo != null) { String[] parts = userInfo.split(":"); String username = parts[0]; String password = parts[1]; boolean isValidUser = validateUser(username, password); if (isValidUser) { HttpSession session = request.getSession(); session.setAttribute("userInfo", username); response.sendRedirect("main.jsp"); } } %> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值