JavaScript Cookie 맛보기.
ITWeb/개발일반 2011. 11. 30. 14:40그래서 맛보기 작성해 봅니다.
기억을 새록 새록 ㅎㅎ
[제약사항]
- 단일 Domain 에대한 쿠키 count 와 length 제한이 있습니다. 이전 글 참고하세요.
- http://jjeong.tistory.com/278
[참고사이트]
- http://www.quirksmode.org/js/cookies.html
- http://www.w3schools.com/js/js_cookies.asp
[Session vs Persistent Cookie]
- Session Cookie
Temporary Cookie 라고도 합니다.
말 그대로 임시쿠키 입니다.
브라우저가 살아 있는 동안만 유지되는 쿠키로 expire date 이 없기 때문에 브라우저를 닫으면 바로 쿠키는 사라집니다.
- Persistent Cookie
세션쿠키와 다르게 브라우저가 닫혀도 쿠키가 유지 되는 쿠키 입니다.
즉, expire date 을 설정해 주기 때문에 그 기간 동안 쿠키는 유지 되며, 임의 삭제를 하지 않는 이상 유지됩니다.
이 쿠키는 expire 되기 전까지 쿠키 file 에 쓰여져서 저장됩니다.
[소스코드]
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Cookie</title>
<script type="text/javascript">
//<![CDATA[
var COOKIE = {
set:function (n,v,e,t) {
var expireDate = new Date();
var cookieValue;
switch ( t ) {
case 'day' :
expireDate.setDate(expireDate.getDate() + e);
break;
case 'hour' :
expireDate.setTime(expireDate.getTime() + (e*60*60*1000));
break;
default :
expireDate.setDate(expireDate.getDate() + e);
}
if ( e ) {
cookieValue = escape(v) + '; expires='+expireDate.toGMTString();
} else {
cookieValue = escape(v) ;
}
document.cookie = n + '=' + cookieValue + '; path=/';
},
get:function(n) {
var cookies = document.cookie.split(';');
var i, key, val, size, idx;
size = cookies.length;
for ( i=0; i<size; i++ ) {
idx = cookies[i].indexOf('=');
key = cookies[i].substr(0, idx);
val = cookies[i].substr(idx+1);
key = key.replace(/^\s+|\s+$/g,"");
if ( key == n ) {
return unescape(val);
}
}
},
del:function(n) {
this.set(n,'',-1);
}
}
function testGet() {
var val = COOKIE.get('DUID');
alert(val);
}
function testDel() {
COOKIE.del('DUID');
alert(document.cookie);
}
//]]>
</script>
</head>
<body style='margin:0px; padding:0px;' topmargin='0px' leftmargin='0px' marginheight='0px' marginwidth='0px'>
<button onclick="COOKIE.set('DUID', '123456789', 365);">set cookie</button>
<button onclick="testGet();">get cookie</button>
<button onclick="testDel();">del cookie</button>
</body>
</html>
※ 기본 code base 는 위 두 사이트를 바탕으로 작성한 것입니다.