jQuery Cookie 플러그인을 사용하여 손쉽게 쿠키정보 제어하기

jQuery를 이용하지 않아도 쿠키 핸들링은 가능합니다.

하지만 jQuery Cookie 플러그인은 이미 만들어져있고 

사용법 또한 간단하기때문에 포스팅 하게되었습니다.

이번 포스팅에서 다룰 내용은 

쿠키정보 저장 및 불러오기, 정보 삭제 등에 

대한 내용을 작성하도록 하겠습니다.

제일먼저 jQuery Cookie 플러그인 js파일을 다운받아야 겠죠?

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

접속하셔서 Download ZIP버튼을 클릭하여 플러그인을 받습니다.

다운로드 받으셨다면 압축해제 후 src 디렉토리 안에 있는 jquery.cookie.js 파일을 

해당 프로젝트내에 include해줍니다.

보통 쿠키는 보안이 좋지 않기때문에 간단한 정보를 담는정도로만 사용하셔야합니다.

예를들어 로그인페이지에서 체크박스클릭으로 아이디 저장기능정도(?)로 사용하시면 되겠습니다.

그럼 로그인화면을 예로들어서 쿠키플러그인을 사용해보도록 하겠습니다.

쿠키연동을위한 jQuery + jQuery Cookie 플러그인 include

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

가상의 로그인 HTML 페이지

아이디 : <input type="text" id="login_id" /><br/>
아이디저장 <input type="checkbox" id="rememberid" /><br/>
<input type="button" id="login_button" value="로그인" />

쿠키를 이용한 jQuery 기능 구현 코드

$(function(){
	//최초 쿠키에 login_id라는 쿠키값이 존재하면
	var login_id = $.cookie('login_id');
	if(login_id != undefined) {
		//아이디에 쿠키값을 담는다
		$("#login_id").val(login_id);
		//아이디저장 체크박스 체크를 해놓는다
		$("#rememberid").prop("checked",true);
	}
	
	//로그인 버튼 클릭시
	$("#login_button").click(function(){
		//아이디 미입력시
		if($.trim($("#login_id").val()) == "") {
			alert("아이디를 입력하세요");
			return;
		//아이디 입력시
		} else {
			//아이디저장 체크되어있으면 쿠키저장
			if($("#rememberid").prop("checked")) {
				$.cookie('login_id', $("#login_id").val());
			//아이디저장 미체크면 쿠키에 정보가 있던간에 삭제
			} else {
				$.removeCookie("login_id");
			}
			alert("로그인!!");
		}
	})
})

스크립트 코드를 보시면 주석으로 설명을 달아놓았습니다.

쿠키 값을 불러올 경우  $.cookie("저장된쿠키의key값") 으로 값을 불러왔습니다.

이 사용은 get을 의미합니다.

※ 존재하지 않는 쿠키값일경우 undefined값이므로 조건 체크를 해주셔야 하겠습니다.

다음은 로그인 버튼 클릭시 체크박스 유무에 따라서 

체크박스 체크시 : $.cookie("저장할쿠키key값","저장할쿠키값") 으로 특정 쿠키명에 값을 저장해주었습니다.

이 부분은 set을 의미합니다.

체크박스 해제시 : $.removeCookie("삭제할쿠키key값") 을 사용하였습니다.

참 심플하지 않은가요? ^^???

추가로 쿠키값 set을 해줄경우 추가적인 몇가지 옵션에 대해서 간단하게 설명을 드리겠습니다.

jQuery Cookie 추가옵션

$.cookie('쿠키명','쿠키값',{
			//쿠키보관일
     		expires : 5
     		//도메인
    	   ,domain : 'http://hellogk.tistory.com'
    	    //https/http 결정
    	   ,secure : false
});

위 설정에보시면 쿠키값 저장해주실때 추가로 속성을 정의하실수 있습니다.

1. expires - 생성한후 만료일자를 정해주는것입니다. 값에 5라고 정할경우 5일동안 정보를 저장합니다.

2. domain - 쿠키 저장할 도메인인대 거의 사용되지 않는 옵션일거 같습니다.

3. secure - HTTPS 프로토콜 사용시 true 속성을 되겠습니다.

위 속성외에도 path라고 쿠키 경로를 설정하는 것이 있는데 뭔지 정확하게 몰라서 있다는 정도만 알아두시면 되겠습니다 ^^;;

쿠키관련 샘플코드 실행 결과

초기 화면 

아무래도 쿠키정보가 전혀없으니 현재는 빈값입니다.

아이디저장체크안하고 아이디입력후 로그인버튼 클릭

확인버튼 클릭후 새로고침

새로고침 결과 쿠키정보를 저장안했으므로 빈값이 Load 되었습니다.

이어서, 쿠키정보를 저장하도록 해보겠습니다.

아이디저장체크후 로그인버튼 클릭

확인버튼 클릭 후 새로고침

새로고침한 다음에 아이디 text태그에 입력값이 들어가고 

아이디저장 체크박스에 체크가 되어러 로드된것을 확인할 수 있었습니다.

by 개발로짜