js实现cookie记住密码

逃离我推掉我的手 2022-08-06 06:09 220阅读 0赞

近来做记住密码时，用js的实现方式做了一下。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    	String path = request.getContextPath();
    	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
    %>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<base href="<%=basePath%>" />
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    	<link rel="stylesheet" href="./css/login.css" />
    	<title>登录</title>
    
    	
    	<script src="./js/lib/jquery-1.8.0.min.js" type="text/javascript" ></script>  
    	<script src="./js/backjs/login.js" type="text/javascript" ></script>  
    </head>
    
    
    
    <body>
    	<div class="warp">
    		<img src="./images/bf.png" alt="" />
    		<div class="window">
    			<div class="loginWindow"></div>
    			<div class="loginWindowContent">
    				<form action="#"  id="loginForm">
    					<label for="" class="weicome">欢迎登录xxx系统</label> 
    					<label for="" class="slogan">智能随行    随到随停</label> 
    					<label for="" class="input"> <i> <span></span></i> 
    						<input type="text" placeholder="请输入用户名/手机号码" name="name" id="name" />
    					</label> 
    					<label for="" class="input" style="margin-top:30px;"> <i><span style="background: url(./images/lock.png) no-repeat;"></span></i> 
    						<input type="password" placeholder="请输入密码" name="password" id="password"/>
    					</label> 
    					<label for="" class="savePass">
    						<input type="checkbox" value="savePW" name="savePW" id="savePW"/>记住密码 <a href="home/resetPwdUI">忘记登录密码？</a>
    					</label> 
    					<label for="" class="sub"> 
    						<p style="color: red" id="loginMes"></p>
    						<input type="button" value="登录" id="login_BTN"/>
    					</label> 
    					<label for="" class="reg">还不是智停车会员，<a href="home/registerUI"><b>点击免费注册</b>>></a></label>
    				</form>
    			</div>
    		</div>
    
    		<div class="footer">
    
    			<div class="about">
    				<b><a href="">关于xxx</b>
    			</div>
    		</div>
    	</div>
    
    </body>
    </html>

/**
     * 登录js
     */
    $().ready(function(){
    
    	var loginSum = 0;
    	
    	//点击登录按钮事件
    	$("#login_BTN").unbind("click");
    	$("#login_BTN").bind("click",function(){
    		
    		//修改页面消息显示
    		$("#loginMes").text("正在登陆。。。");
    		
    		
    		//获取表单数据
    		var data = $("#loginForm");
    		var jsonData = data.serialize();
    		var name = data.find("input[name='name']").val();
    		var password = data.find("input[name='password']").val();
    		var savePW = data.find("input[name='savePW']").val();
    		
    		if(name == '' || name == null){
    			$("#loginMes").text("用户名不能为空");
    			return;
    		};
    		if(password == '' || password == null){
    			$("#loginMes").text("密码不能为空");
    			return;
    		};
    		
    		//判断重复提交
    		if(loginSum == 1){
    			//重复提交
    			$("#loginMes").text("正在登陆，请稍候");
    			return;
    		};
    		if(loginSum == 0){
    			loginSum = 1;
    		};
    		//提交
    		$.ajax({  
    	        url:"home/login",  
    	        type:'POST',  
    	        data:jsonData,  
    	        dataType:'json',
    	        error:function(){
    	            alert("出错了！！");
    	            loginSum = 0;
    	        },
    	        success:function (data){ 
                   	if(data.code == 0){
                   		//保存密码
                   		SetPwdAndChk();
                   		$("#loginMes").text("登录成功，正在跳转。。。");
                   		window.location.href="main/home";
                   	}else{
                   		$("#loginMes").text("登录失败，用户名或密码错误！");
                   		loginSum = 0;
                   	};
                }
            });  
    		
    	});
    	
    	//用户名失去焦点时调用该方法 
    	$("#name").unbind("blur");
    	$("#name").bind("blur",function(){
    		GetPwdAndChk();
    	});
    	
    	
    	
    	
    	
    	
    	
    	//=============js cookie===============
    	GetLastUser();
    	function GetLastUser() {
    		var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";
    		var usr = GetCookie(id);
    		if (usr != null) {
    			document.getElementById('name').value = usr;
    		} else {
    			//document.getElementById('name').value = "001";
    		}
    		GetPwdAndChk();
    	};
    	//点击登录时触发客户端事件 
    	function SetPwdAndChk() {
    		//取用户名 
    		var usr = document.getElementById('name').value;
    		//alert(usr);
    		//将最后一个用户信息写入到Cookie 
    		SetLastUser(usr);
    		//如果记住密码选项被选中 
    		var checked = document.getElementById('savePW').checked;
    		if (checked == true) {
    			//取密码值 
    			var pwd = document.getElementById('password').value;
    			//alert(pwd);
    			var expdate = new Date();
    			expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
    			//将用户名和密码写入到Cookie 
    			SetCookie(usr, pwd, expdate);
    		} else {
    			//如果没有选中记住密码,则立即过期 
    			ResetCookie();
    		}
    	};
    	function SetLastUser(usr) {
    		var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";
    		var expdate = new Date();
    		//当前时间加上两周的时间 
    		expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
    		SetCookie(id, usr, expdate);
    	};
    	//用户名失去焦点时调用该方法 
    	function GetPwdAndChk() {
    		var usr = document.getElementById('name').value;
    		var pwd = GetCookie(usr);
    		if (pwd != null) {
    			document.getElementById('savePW').checked = true;
    			document.getElementById('password').value = pwd;
    		} else {
    			document.getElementById('savePW').checked = false;
    			document.getElementById('password').value = "";
    		}
    	};
    	//取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;
    			//alert(j); 
    			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));
    	};
    	//写入到Cookie 
    	function SetCookie(name, value, expires) {
    		var argv = SetCookie.arguments;
    		//本例中length = 3 
    		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 usr = document.getElementById('name').value;
    		var expdate = new Date();
    		SetCookie(usr, null, expdate);
    	};
    	
    	
    });