Cookie 기록/ 취득

JavaScript의 세계에서는 보안상의 이유로 인해 스크립트로부터 클라이언트에 데이터를 쓰는 것을 용인하지 않는다. 사용자가 사이트에 액세스한 상황에 PC 내의 파일을 바꿔 쓸 수 있게 되어 버리면 큰일이므로 이는 당연한 것이다.

그러나 유일한 예외가 있으니, 바로 쿠키(Cookie)다. 쿠키란 클라이언트 측에 보존되는 작은 텍스트로, 이것을 이용하면 스크립트로부터 무언가 원하는 정보를 보관/유지해둘 수 있다. 예를 들어, 게시판 등에서 [처음에 입력한 핸들명이나 주소 등의 정보가 두 번재 이후의 액세스에서는 디폴트로 표시되는] 예가 전형적인 것이라 할 수 있겠다.

JavaScript에서는 document.cookie 프로퍼티를 이용함으로써 이 쿠키를 읽고 쓸 수 있다. 그럼, 곧바로 쿠키를 이용한 방문 회수 카운터를 작성해보자.


쿠키값을 설정한다. - setCookie 함수 -

							// 지정된 쿠키를 클라이언트에 쓰기 위한 setCookie 함수를 정의
							// 인수에는 선두로부터 쿠키명, 값, 유효기간, 도메인, 패스
							// SSL을 필요로 하는지 를 설정한다.
							function setCookie (name, value, expires, domain, path, secure) {
								// 쿠키 문자열을 대입하기 위한 변수 c를 선언
								var c = '';
								
								// 이름 = 값 을 추가(값은 미리 encode 처리)
								c += name + '=' + encodeURIComponent(value);

								// 인수 expires 가 null이 아닌 경우, expires일로 유효기간을 설정
								if (expires) {
									var exp = new Date();
									exp.setDate(exp.getDate() + expires);
									c += '; expires=' +exp.toGMTString(); 
								}// end if

								// 인수 domain, path, secure 가 null이 아닌 경우, 각각 해당하는 파라미터를 설정
								if (domain) { c += '; domain=' + domain;}
								if (path) { c += '; path=' + path;}
								if (secure) { c += '; secure=' + secure;}

								// 완성된 쿠키 문자열을 클라이언트에 쓴다.
								document.cookie = c;
							} // end of setCookie
						

setCookie 함수의 대부분의 처리는 document.cookie 프로퍼티에 설정할 쿠키 문자열을 생성하는 데에 있다. 그러므로 우선 최종적으로 어떠한 문자열을 생성하면 좋을지 파악해두자. cookie 프로퍼티에 값을 설정하기 위한 서식은 다음과 같다(굵은 글씨만 필수이며, 나머지는 임의).

쿠키명=값; expires=유효기간; domain=도메인명; path=패스; secure

필요한 정보는 세미콜론 단락의 [파라미터명=값]의 쌍으로 기술한다. 각각의 파라미터의 의미는 다음의 표와 같다.

Cookie 파라미터와 개요
파라미터 설명
쿠키명 쿠키를 식별하는 이름과 그 값(최소한 필수). 영숫자 이외의 문자열을 포함한 경우는 encodeURIComponent 함수로 미리 encode 해둘 필요가 있다.
expires 쿠키의 유효기간(그리니치 표준시). 유효기간을 지난 쿠키는 자동으로 삭제(생략 시에는 브라우저를 닫았을 때에 삭제, 과거의 일시가 지정되었을 경우는 즉석으로 삭제)
domain 유효한 도메인. 지정 도메인의 페이지에서만 쿠키가 이용 가능(생략 시는 현재의 도메인)
path 유효한 패스. 지정 패스 아래의 페이지에서만 쿠키가 이용 가능(생략 시는 현재의 패스)
secure SSL(Secure Socket Layer) 통신에서만 쿠키를 송신할지를 지정

이 표에 준거해 setCookie 함수를 보면 비교적 쉽게 이해할 수 있을 것이다. 파라미터 expires, domain, path, secure에 대해서는 대응하는 인수 expires, domain, path, secure가 지정되어 있는지 어떤지를 확인한 다음, 지정되어 있는 경우만 [파라미터명=값]의 문자열을 추가한다.

표에서도 나타나 있듯이 expires 파라미터는 그리니치 표준시(GMT 형식)로 지정할 필요가 있다. 여기에서는 인수 expires를 기초로 다음과 같이 처리하고 있다.

  1. 1. expires일의 Date 객체를 생성한다.
  2. 2. 위의 내용을 toGMTString 메소드를 이용해 GMT 형식으로 변환한다.

완성된 쿠키 문자열은 마지막에 document.cookie 프로퍼티에 세트하여 처리를 완료한다.


쿠키값을 취득한다. - getCookie 함수 -

							// 지정된 이름의 쿠키값을 취득하는 getCookie 함수를 정의
							function getCookie (name) {
								// 취득한 쿠키 문자열을 ; 로 분할
								var cs = document.cookie.split(';');
								// 개개의 쿠키 정보(이름=값)를 차례로 확인
								for (var i=0; i < cs.length; i++) {
									var kv = cs[i].split("=");
									// = 으로 쿠키 정보를 분할해 이름 부분이 인수 name과 동일한 경우'
									// 그 값을 디코드한 다음 반환값으로 돌려준다.
									if (kv[0] == name) {
										return decodeURIComponent(kv[1]);
									}
								}
								// 해당하는 이름의 쿠키가 없는 경우 null을 돌려준다.
								return null
							}
						

쿠키를 취득하는 것도 설정하는 경우와 같이 document.cookie 프로퍼티를 사용한다. 그러나 cookie 프로퍼티의 반환값은 설정 시와는 달리 복수의 쿠키값을 다음과 같은 형식으로 집계한 것이니 이 점에 주의해야 한다.

쿠키명1=값1;쿠키명2=값2;...

이러한 형식의 쿠키 문자열을 해석하여 지정된 이름에 대응하는 값을 추출하는 것이 getCookie 함수의 역할이다. cookie 프로퍼티의 반환값의 형식만 이해하면, 해석의 흐름은 방금 전 등장한 쿼리 정보를 해석하는 흐름과 거의 동일하므로 비교적 순조롭게 이해할 수 있을 것이다.

							// 'js_cnt'라는 이름의 쿠키값(카운터값)을 변수 cnt에 세트
							var cnt = getCookie('js_cnt');
			
							// 변수 cnt가 null이 아닌 경우는 인크리먼트(increment), null인 경우는 1을 세트
							cnt = cnt ? ++cnt : 1;
							
							// 변수 cnt의 값을 쿠키 'js_cnt'에 세트(유효기간은 90일)
							setCookie('js_cnt', cnt, 90);
							$.print("당신은 이 사이트에 "+ cnt + "회, 액세스하였습니다.");
						

위의 내용을 이해하였다면 실제로 cookie.html을 실행해 보자. 페이지를 로드할 때마다 카운터가 카운터업되어 가는 것과 카운터값이 브라우저를 종료해도 보관/유지되는 것을 확인하기 바란다.