[Spring] Login_Save ID, PWD (cookie)

로그인 시 아이디, 패스워드 쿠키에 저장하는 코드!

서버단으로 넘어갈 필요없고, 아주 간단하다!

 

Jsp - save Btn 

체크박스를 만들어 아이디 저장 여부를 체크할 수 있도록 한다.

나는 내가 개발 할 때 편하게 하려고 id, password 체크박스를 따로 나누지 않았는데,

따로 나누어 진행해도 된다.

<label><input type="checkbox" id="saveBtn"> Save Email & Password</label>

 

 

Jsp - Login Btn

로그인 버튼을 누르면 loginProcess 이벤트로 이동해서 쿠키를 체크한다.

<button type="button" onclick="loginProcess();">Login</button>

 

 

script

설명은 주석으로!

function loginProcess(){
  var id = $("#mail").val();
  var pwd = $("#password").val();
  var idChk = $("#saveBtn").is(":checked");	// 체크박스가 체크되었는지를 담아준다. ( true/false 로 담긴다.)

  if(id == ""){			// 아이디가 입력이 안된 채 로그인 버튼을 누른 경우
    alert("Enter mail");	// 입력하라는 메세지 출력
    $("#mail").focus();		// 아이디 인풋창에 포커스를 맞춰준다.
    return false;		// return false를 해줘서 서버이동을 막는다.
  }else if(pwd ==""){
    alert("Enter password");
    $("#password").focus();
    return false;
  }else if(idChk){			// 아이디, 비밀번호 저장 체크박스가 체크 된 경우 (true)
    setCookie("Cookie_mail", id, 7);	// 쿠키에 저장하는 이벤트를 호출한다. Cookie_mail 이름으로 id가 7일동안 저장
    setCookie("Cookie_pwd", pwd, 7);		
  }else{				// 체크가 해제 된 경우 (false)
    deleteCookie("Cookie_mail");	// 쿠키 정보를 지우는 이벤트를 호출한다.
    deleteCookie("Cookie_pwd");
  }
  $("#loginForm").submit();				
};

 

script

로그인 페이지가 로드될 때

쿠키에 저장된 정보를 조회해서 아이디 비밀번호를 input창에 보여주고

쿠키가 있는 경우 체크박스를 체크해준 상태로 페이지를 로드한다.

$(function(){
  // 쿠키값 읽어오기
  var mail = getCookie("Cookie_mail");
  var pwd = getCookie("Cookie_pwd");

  if(mail){
    $("#mail").val(mail);
    $("#password").val(pwd);
    $("#saveBtn").attr("checked", true);
  }
});

 

쿠기 값 저장하는 이벤트

function setCookie(cookieName, value, exdays){
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + exdays);	// 쿠키 저장 기간
  var cookieValue = escape(value) + ((exdays==null) ? "" : "; expires=" + exdate.toGMTString());
  document.cookie = cookieName + "=" + cookieValue;
}
		 

쿠키 값 조회하는이벤트

function getCookie(cookieName) {
  cookieName = cookieName + '=';
  var cookieData = document.cookie;
  var start = cookieData.indexOf(cookieName);
  var cookieValue = '';
  
  if(start != -1){
    start += cookieName.length;
    var end = cookieData.indexOf(';', start);
  if(end == -1)end = cookieData.length;
  	cookieValue = cookieData.substring(start, end);
  }
  return unescape(cookieValue);
}

쿠키값 지우는 이벤트

function deleteCookie(cookieName){
  var expireDate = new Date();
  expireDate.setDate(expireDate.getDate() - 1);
  document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString();
}

 

 

 

전체 코드!

<form action="login.do" method="post">
	<label><input type="checkbox" id="saveBtn"> Save Email & Password</label>
	<button type="button" onclick="loginProcess();">Login</button>
</form>



<script>
	$(function(){
	  var mail = getCookie("Cookie_mail");
	  var pwd = getCookie("Cookie_pwd");

	  if(mail){
		$("#mail").val(mail);
		$("#password").val(pwd);
		$("#saveBtn").attr("checked", true);
	  }
	});


	function loginProcess(){
	  var id = $("#mail").val();
	  var pwd = $("#password").val();
	  var idChk = $("#saveBtn").is(":checked");

	  if(id == ""){			
		alert("Enter mail");	
		$("#mail").focus();		
		return false;		
	  }else if(pwd ==""){
		alert("Enter password");
		$("#password").focus();
		return false;
	  }else if(idChk){			
		setCookie("Cookie_mail", id, 7);	
		setCookie("Cookie_pwd", pwd, 7);		
	  }else{				
		deleteCookie("Cookie_mail");	
		deleteCookie("Cookie_pwd");
	  }
	  $("#loginForm").submit();				
	};


	function setCookie(cookieName, value, exdays){
	  var exdate = new Date();
	  exdate.setDate(exdate.getDate() + exdays);
	  var cookieValue = escape(value) + ((exdays==null) ? "" : "; expires=" + exdate.toGMTString());
	  document.cookie = cookieName + "=" + cookieValue;
	}
		 
         
	function getCookie(cookieName) {
	  cookieName = cookieName + '=';
	  var cookieData = document.cookie;
	  var start = cookieData.indexOf(cookieName);
	  var cookieValue = '';
	  
	  if(start != -1){
		start += cookieName.length;
		var end = cookieData.indexOf(';', start);
	  if(end == -1)end = cookieData.length;
		cookieValue = cookieData.substring(start, end);
	  }
	  return unescape(cookieValue);
	}
	
	
	function deleteCookie(cookieName){
	  var expireDate = new Date();
	  expireDate.setDate(expireDate.getDate() - 1);
	  document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString();
	}
</script>