纯前端通过cookie记住密码

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

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

1. Html 部分

<form  name="loginForm">

<input type="text" class="text" name="susernum" placeholder="请输入您的身份证号" id="account" ><br>
        <input type="password"  name="suserpassword"  placeholder="请输入您的密码" id="pwd" >
         记住密码:<input  type="checkbox"  name="remeberMe" id="remeberMe" checked >

<input type="submit" value="提交" onclick="submitForm()">

</form>

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清空，记住密码块不选中