[jQuery] 로그인 아이디 체크박스로 저장하기 (쿠키 사용하기)

jQuery를 사용하여 아이디를 저장하고 불러오는 기능을 구현한 소스 코드입니다.

아이디 입력 필드의 값이 변경될 때 아이디 저장 체크박스가 체크되어 있을 경우, 변경된 아이디 값을 쿠키에 저장합니다.

체크박스를 해제하면 쿠키를 삭제하고, 체크하면 아이디의 값을 다시 쿠키에 저장합니다.

페이지가 로드되면 idChk 쿠키를 가져와서 아이디를 입력 필드에 채웁니다.

 

간단한 소스 코드이니 금방 적용해서 사용하실 수 있습니다.

 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"/></script>
<script>
$(document).ready(function(){
	var key = getCookie("idChk"); //user1
	if(key!=""){
		$("#username").val(key); 
	}
	 
	if($("#username").val() != ""){ 
		$("#idSaveCheck").attr("checked", true); 
	}
	 
	$("#idSaveCheck").change(function(){ 
		if($("#idSaveCheck").is(":checked")){ 
			setCookie("idChk", $("#username").val(), 7); 
		}else{ 
			deleteCookie("idChk");
		}
	});
	 
	$("#username").keyup(function(){ 
		if($("#idSaveCheck").is(":checked")){
			setCookie("idChk", $("#username").val(), 7); 
		}
	});
});
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 deleteCookie(cookieName){
	var expireDate = new Date();
	expireDate.setDate(expireDate.getDate() - 1);
	document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString();
}
	 
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);
}
</script>
<form>
  <label for="username">아이디:</label>
  <input type="text" id="username" name="username" autocomplete="off"><br>

  <label for="password">비밀번호:</label>
  <input type="password" id="password" name="password" autocomplete="off"><br>

  <label for="remember">아이디 저장:</label>
  <input type="checkbox" id="idSaveCheck"><br>

  <input type="submit" value="로그인">
</form>

 

쿠키값 확인