纯前端通过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清空，记住密码块不选中