纯前端通过cookie记住密码

COOKIE是根据路径来存放COOKIE的,同一路径下只能存在一个同名的COOKIE,再次定义回覆盖之前的COOKIE.

 这里只是针对当前jsp实现COOKIE记住密码,未实现COOKIE的加密操作。

1. Html 部分

       
         记住密码:

2. Javascript部分

    // 在加载页面的时候，查看是否存在COOKIE,如果存在直接赋值

       window.Onload=function(){
            console.log(document.COOKIE);
            var COOKIEs = document.COOKIE.split(";");
            var userid = document.getElementById("account");
            var checkbox = document.getElementById("remeberMe");
            for(var i in COOKIEs){
                var keyvalue = COOKIEs[i].split("=");
                if(keyvalue[0]!="user")continue;
                var username = keyvalue[1].split(":")[0];
                var password = keyvalue[1].split(":")[1];
                var pswd = document.getElementById("pwd");
userid.value = username;
pswd.value=password;
            }
            if(userid.value==""){
                checkbox.checked =false;
            }
        }

// 在提交表单是检查是否需要记住密码

        function  submitForm(){ 

var checkbox = document.getElementById("remeberMe");

 if(checkbox.checked){
          var userid = document.getElementById("account").value;
                var pswd = document.getElementById("pwd").value;
                // 记住密码
                var date = new Date ( ) ;
                date . setTime ( date . getTime ( ) + 5 * 24 * 3600 * 1000 ) ;
                document.COOKIE = "user="+(userid+":"+pswd)+"; expires =" + date.toGMTString ();
    }else{
                document.COOKIE='user=;expires = '+ -1;
             
        }

loginForm.submit();

}

3. 说明 

  记住密码默认选中

  记住密码选中，会将用户名密码传入COOKIE中保存，下次会直接将用户名密码输入到表单中

  记住密码不选，会将COOKIE清空，记住密码块不选中