[jQuery/javascript] 쿠키(Cookie)를 이용한 ID 저장.

   보통 로그인을 할 때 보면 아이디를 입력하는 칸 오른쪽에 id저장하기 체크박스가 있는 것을 볼 수 있다.

   체크를 하면 다음에 그 페이지를 열었을 때, 다시 입력하지 않아도 저장된 아이디가 입력되어있다.

   아래 소스는 그것을 구현한 것인데..  세션이 아닌 쿠키를 사용한 이유는 브라우저를 닫고 다시 열었을 때에도 ID가 남아있게 하기 위해서였다.

   자바단에서 처리해야 할지 화면단에서 처리해야 할지 고민이 조금 있었지만, 가벼운 소스를 굳이 자바단에 태울 필요가 있을까 싶기도 하고, 어떤 것은 자바단에 어떤 것은 화면단에 넣는 것도 유지보수할 때 번거로울 것 같아서.. 그냥 자바스크립트로 다 화면단에서 해주기로 했다.

   id를 입력받는 input text 태그와 그 옆에 id 저장하기 input checkbox를 html에 넣어준다.

   그리고 javascript단에서는 아래와 같이 소스를 넣어준다.

   jQuery를 이용하니 당연히 jQuery를 다운로드 받아서 <script type="text/javascript" src="jquery-1.11.0.min.js" ></script> 이런 식으로 링크해주는 것도 잊지 말자.

$(document).ready(function(){
	// 저장된 쿠키값을 가져와서 ID 칸에 넣어준다. 없으면 공백으로 들어감.
	var userInputId = getCookie("userInputId");
	$("input[name='id']").val(userInputId);  
	
	if($("input[name='id']").val() != ""){ // 그 전에 ID를 저장해서 처음 페이지 로딩 시, 입력 칸에 저장된 ID가 표시된 상태라면,
		$("#idSaveCheck").attr("checked", true); // ID 저장하기를 체크 상태로 두기.
	}
	
	$("#idSaveCheck").change(function(){ // 체크박스에 변화가 있다면,
		if($("#idSaveCheck").is(":checked")){ // ID 저장하기 체크했을 때,
			var userInputId = $("input[name='id']").val();
			setCookie("userInputId", userInputId, 7); // 7일 동안 쿠키 보관
		}else{ // ID 저장하기 체크 해제 시,
			deleteCookie("userInputId");
		}
	});
	
	// ID 저장하기를 체크한 상태에서 ID를 입력하는 경우, 이럴 때도 쿠키 저장.
	$("input[name='id']").keyup(function(){ // ID 입력 칸에 ID를 입력할 때,
		if($("#idSaveCheck").is(":checked")){ // ID 저장하기를 체크한 상태라면,
			var userInputId = $("input[name='id']").val();
			setCookie("userInputId", userInputId, 7); // 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);
}

   setCookie, deleteCookie, getCookie의 경우 "javascript 쿠키"라고 검색하면 많이 나오는 소스다. 한 줄 한 줄 눈으로 따라가보면 이해하는 데 어려움은 없을 것이다.

   하지만 굳이 이렇게 함수를 만들어서 사용하는 게 귀찮다면, jQuery-cookie를 이용하는 것도 한 방법이다.

   사용 방법은 아래 사이트를 참고하도록 한다. jQuery처럼 js 파일을 다운로드 받고 링크를 건 다음 사용하는 방식이다. 이걸 이용하면 아주 초간단하다.

   jQuery-cookie ☞ https://github.com/carhartl/jquery-cookie