작성자 : 송재호
저작권 : 없음. 이 문서는 자유로이 복사,수정 및 재 배포될 수 있음을 밝힘니다.
쿠키란?
웹 서비스의 기본은 한번 지나친 페이지의 상태를 기억하지를 못한다.
이 말은, 어떤 상품을 판매하는 홈페이지 들어가 물건을 주문했는 데 그 물건이 마음에
들지 않는 다면 그 물건을 반품하든가 다른 것으로 바꿔야 하는 데, 웹 작동 방식에 따
르면 그러한 과거의 기억을 유지할 수 없다는 것이다.
물론, Server Push/Client Pull 이나 요즘 많이 사용되는 ASP 프로그래밍을 하면
어느 정도 제한 사항을 없앨 수 있다.
여기서는 예나 지금이나 많이 사용되고 있는 브라우저에 값을 저장하는 방식을 설명 할
것이다.
쿠키의 정확한 의미를 표현하면, "웹 브라우저 내에 이전 페이지 접속시의 정보를 저장
했다가 다음 접속시 그 정보를 재 사용하는 것"을 말한다.
쿠키 작동 방식
먼저 웹 브라우저가 서버에게 문서를 요청할 때 서버는 쿠키를 response header 안에
Set-Cookie 형식으로 넣어 전달한다.
그러면 웹 브라우저는 서버에게 똑같은 문서를 요청할 때 해당 쿠키 정보를 서버에게
전달한다.
쿠키 정보 전달 방식은 HTTP request header의 Cookie 필드에 아래와 같은 형식으로
보낸다.
Cookie: name1=value1; name2=value2; ...
쿠키의 제한 사항
이 내용은 1~2년 전에 쿠키가 많이 유행할 때 본인이 체크한 것으로 현재는 쿠키 제한
사항이 아래의 내용과 다를 수 있다.
1. 한 도메인이나 한 서버당 쿠키는 20개 이상 존재할 수 없다.
2. 쿠키 정보의 크기는 4KByte 를 넘을 수 없다.
3. 클라이언트(웹 브라우저)에는 300개 이상의 쿠키 정보를 저장할 수 없다.
쿠키 포멧
쿠키는 필드 별로 정의되어 있다. 이 필드를 해독하지 못하는 사람에게는 쿠키는 아주
어렵게만 느껴질 것이고 막상 자바 스크립트 언어를 힘들게 배웠지만 접근하기 어려운
영역이 있다고 스스로 생각해 버릴지도 모르겠다. 쿠키가 바로 그러한 영역의 한 부분
이라는 것을 이 글을 읽고 있는 대부분의 여러분들이 동감하고 있으리라 생각한다.
실제 쿠키 포멧을 그렇게 어렵지만은 않다. 한번 익히고 나면 아주 유용하리라 생각한
다. 또한 반드시 익혀야 하는 기법이기도 하다.
쿠키의 기본 포멧은 아래와 같다. 생략 가능한 필드가 있으며 기본값을 가지는 필드도
있다.
Set-Cookie: name=VALUE; expire=DATE; path=PATH; domain=DOMAIN; secure
예를 들어, 'Song=This is my last name!; expires=Mon, 03-Jun-98 12:00:00 GMT; ...
와 같이 되어 있다면 쿠키의 이름은 'Song'이 되며 그 값은 "This is my last name"이
된다. 그리고 이 값이 유효한 시간은 expires에 나타나 있다.
path가 / 이면 (예, "path=/; ") domain의 /(루트 디렉토리)에서 시작하는 모든 곳을
접속할 때 해당 쿠키의 값을 보내라는 의미를 가진다.
필드별 설명
expires=DATE : DATE에서 지정된 시간이 지나면 해당 쿠키 값은 사용되지
않음을 나타낸다. DATE는 GMP 시간으로 "WeekDay, DD-Mon-YY HH:MM:SS GMT"
와 같이 표현된다. expires 가 생략되면 현재 웹 브라우저가 실행되는 동안만
쿠키가 적용된다. 즉, 한 세션 동안만 그 정보가 유용하다는 것이된다.
path=PATH : PATH와 DOMAIN으로 지정된 URL에 접속할 때 해당 쿠키 정보
를 보낼 수 있도록 한다. path를 생략하면 현재 문서의 값이 디폴트 값을로
적용된다.
domain=DOMAIN : 쿠키의 정보를 전달할 URL의 domain을 지정하는 곳으로 생략
되면 디폴트 값으로 현재 페이지의 도메인으로 적용된다.
* 요 점 * 실제 쿠키를 사용하다 보면 그 적용 범위를 몰라 헤메는 경우가 허다하
다. 보통 expires, path, 그리고 domain을 생략해서 사용하는 것이 보통
인데 이 때는, 현재 디렉토리 위치와 그 하위 경로에서 해당 쿠키 정보
가 적용된다는 것을 명심하고 나중에 헤메지 말기 바란다.
secure : SSL을 사용하는 HTTPS 서버의 경우 사용 가능하다.
자바 스크립트에세 쿠키 사용
쿠키는 보통 CGI 프로그램에 의해 서버 헤더 정보의 Set-Cookie 필드를 통해 브라우저에
저장이 되고 반대로 서버(CGI 프로그램)에 정보를 줄 때는 Cookie 필드를 통해 데이터를
보낸다.
자바 스크립트에서는 일반 CGI 프로그램이 쿠키를 다루듯이 다룰 수가 있는 데 차이점이
라면 웹 브아루저 자체 내에서 쿠키 정보를 처리할 수 있다는 것이다.
document.cookie라는 객체를 통해 쿠키 정보를 관리(입력/수정/삭제)를 한다.
document.cookie="name1=first cookie"
document.cookie="name2=second cookie"
와 같이 입력하면 두개의 쿠키 정보가 브라우저에 저장된다.
document.write(document.cookie)
과 같이 하면 자바 스크립트는 브라우저에 저장되어 있는 쿠키 정보를 웹 페이지에 출력
한다.
위와 같이 입력했다면 expires, path, 그리고 domain에는 위해서 설명했던 것 처럼 기본
값이 들어갑니다.
특정 디렉토리에서만 쿠키 정보를 이용하고 싶다면 아래와 같이 하면 됩니다.
document.cookie="Subdir=이 메세지는 Sub디렉토리에서만 볼 수 있음; path=/Sub"
쿠키의 특정 정보를 없애는 방법은 그 정보의 expires 시간을 현재 시점으로 해 놓으면
된다.
var expires = new Date();
document.cookie = "name=value; exipires=" + expires.toGMTString();
위와 같은 방법으로 쿠키를 없앨 때 주의 할 점은 쿠키의 유효 시간을 현재로 주어 놓고
바로 다시 그 값을 읽으면 그 값이 살아 있다. 이는 쿠키 정보의 유효 시간을 현재로 해
놓고 현재 다시 읽으니 그 값이 살아 있는 결과가 발생하는 것이다. 이 현상은 IE와 NC
에서 서로 다르게 나타난다. IE 에서는 약간의 delay를 주고 다시 그 값을 읽으면 null
값이 되지만 NC에서는 그 값이 계속 살아 있었다.
쿠키 값을 없앤 뒤 다른 페이지에서 그 값을 읽을 때는 두 브라우저 모두 null 값을 리
턴해 준다.
쿠키의 유효 시간을 정할 때는 항상 GMT 포멧으로 시간을 지정해야 한다.
쿠키 유효 시간을 1년 뒤로 하자면,
24 = 하루 중 24시간
60 = 1 분의 60초
60 = 1 시간의 60분
365 = 1 년의 365일
1000 = 밀리초
expires = new Date();
expires.setTime(expires.getTime() + 24 * 60 * 60 * 365 * 1000);
setCookie ("name",value",expires);
쿠키 유효 시간을 1 시간 뒤로
expires = new Date();
expires.setTime(expires.getTime() + 60 * 60 * 1000);
setCookie ("name","value",expires);
아래는 쿠키와 관련된 자바 스크립팅을 하는 데 있어서 꼭 필요한 함수를 만들어 놓았아.
이를 분석하여 자신만의 쿠키 응용법을 터득하도록 한다.
<![CDATA[ <script language='JavaScript'>
<!--
/*
setCookie
설 명 : 쿠키 정보를 입력 받아 브라우저에 저장한다.
입 력 : name = 쿠키 키 이름
value = 쿠키 키의 값
expires = 쿠키 삭제 일시 (입력값은 Date 함수 객체이며, 실제 저장할 때는 GMT 포멧으로 변환됨)
path = 쿠키 적용 경로
domain = 쿠키 저용 도메인
secure = 쿠키 전송시 보안 사항
출 력 : 없음
호 출 :
예) setCookie ("name","value");
//쿠키 유효 시간을 1년 뒤로
// 24 = 하루 중 24시간
// 60 = 1 분의 60초
// 60 = 1 시간의 60분
// 365 = 1 년의 365일
//1000 = 밀리초
expires = new Date();
expires.setTime(expires.getTime() + 24 * 60 * 60 * 365 * 1000);
setCookie ("name",value",expires);
// 쿠키 유효 시간을 1 시간 뒤로
expires = new Date();
expires.setTime(expires.getTime() + 60 * 60 * 1000);
setCookie ("name","value",expires);
*/
function setCookie (name, value, expires, path, domain, secure) {
// cookie string
var cs = name + "=" + escape(value) + ( (expires) ? "; expires=" + expires.toGMTString() : "") + ( (domain) ? "; domain=" + domain : "") + ( (secure) ? "; secure" : "");
document.cookie = cs;
}
/*
getDelayDay
설 명 : 수를 입력하여 그 수만큼 날짜를 뒤로 세팅해 Date 객체를 리턴
용 도 : 쿠키를 셋팅할 때 날짜를 뒤로 하기 위해
입 력 : 날짜 수
출 력 : Date의 객체
*/
function getDelayDay(day) {
expires = new Date();
expires.setTime(expires.getTime() + 24 * 60 * 60 * day * 1000);
return expires;
}
/*
getCookie
설 명 : 쿠키 정보에서 해당하는 키 이름의 값을 리턴한다.
주 의 : setCookie에서 인코딩을 하고 getCookie 에서 디코딩을 한다
이 때, 키 이름은 En/Decoding 하지 않고 그 값만 적용한다.
입 력 : 쿠키 이름
출 력 : 쿠키 이름에 해당하는 값
*/
function getCookie (name) {
// cookie string
var cs = document.cookie;
var prefix = name + "=";
// cookie's Start Index of the information of it.
var cSI = cs.indexOf(prefix);
if (cSI == -1) {
return null;
}
// Find cookie's End Index of the information of the cookie.
var cEI = cs.indexOf(";", cSI + prefix.length);
// If it din't find the CEI, then set it to the end of the cs
if (cEI == -1) {
cEI = cs.length;
}
// Decode the value of the cookie's
return unescape(cs.substring(cSI + prefix.length, cEI));
}
/*
deleteCookie
설 명 : 쿠키 정보에서 해당하는 키와 값을 삭제한다.
방 법 : 해당 쿠키 정보에 유효 시간을 현재 시간으로 세팅한다.
입 력 : 쿠키 키 이름
*/
function deleteCookie (name) {
var expires = new Date();
var value = getCookie(name);
document.cookie = name + "=" + value + "; expires=" + expires.toGMTString();
}
//-->
</script>
<script>
setCookie ("1","정말? 현재 세션만 유효합니다.");
setCookie ("2","참말입니다요.");
document.write(getCookie("1") + "<hr>");
document.write(getCookie("2") + "<hr>");
</script>]]>
