[JS] 자바스크립트 쿠키 클래스
자바스크립트 쿠키 클래스
서버측 언어에서 쿠키 핸들링하는 함수들을 제공하지만 개발하다보면 클라이언트에서 자바스크립트로 쿠키를 조작해야하는 경우들이 있다.
자바스크립트로 쿠키를 핸들링하는 함수들은 많이 있지만 쿠키생성할때의 옵션들도 다시 확인해보면서 클래스로 묶고 사용하기 편하게 다시 정리해보았다.
■ 자바스크립트 쿠키 클래스
var Cookie =
{
cookie_arr : null,
set : function (name,value,options)
{
options = options || {};
this.cookie_arr = [escape(name) + '=' + escape(value)];
//-- expires
if (options.expires)
{
if( typeof options.expires === 'object' && options.expires instanceof Date )
{
var date = options.expires;
var expires = "expires=" + date.toUTCString();
this.cookie_arr.push (expires);
}
}
else if (options.expires_day)
{
this.set_expires_date (options.expires_day , 24*60*60);
}
else if (options.expires_hour)
{
this.set_expires_date (options.expires_hour , 60*60);
}
//-- domain
if (options.domain)
{
var domain = "domain=" + options.domain;
this.cookie_arr.push (domain);
}
//-- path
if (options.path)
{
var path = 'path=' + options.path;
this.cookie_arr.push (path);
}
//-- secure
if( options.secure === true )
{
var secure = 'secure';
this.cookie_arr.push (secure);
}
document.cookie = this.cookie_arr.join('; ');
//console.log (this.cookie_arr.join('; '));
},
get : function (name)
{
var nameEQ = escape(name) + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return unescape(c.substring(nameEQ.length,c.length));
}
return null;
},
del : function (name , options)
{
options = options || {};
options.expires_day = -1;
this.set ( name , '' , options );
},
set_expires_date : function (expires , time)
{
var date = new Date();
date.setTime(date.getTime()+(expires*time*1000));
var expires = "expires=" + date.toUTCString();
this.cookie_arr.push (expires);
}
};
■ 옵션들에 대한 설명
옵션 내용 형식 지정 안했을경우 기본값 설명
-------------- -------------- ------------------------------------------------------------------ ----------------------- ------------------------------------------------------------------------------------------------
expires 쿠키 만료일 new Date(year, month, day, hours, minutes, seconds, milliseconds) 브라우져 종료시점까지 쿠키 만료일을 정확하게 지정. new Date(2013,8,10,0,0,0) 와 같이 초까지만 지정하면 된다.
expires_day 쿠키 생존 일 숫자 브라우져 종료시점까지 쿠키 만료일을 현재시간으로부터 몇일후로 지정
expires_hour 쿠키 생존 시간 숫자 브라우져 종료시점까지 쿠키 만료일을 현재시간으로부터 몇시간후로 지정
domain 도메인 www.example.com 또는 sub.example.com 또는 example.com 현재의 도메인 쿠키가 적용될 도메인으로 example.com 으로 지정시 앞에 모든 서브도메인에서 모두 사용 가능
path 경로 / 또는 /dir / 쿠키가 적용될 디렉토리로 /dir 로 입력시 /dir로 시작하는(/direc , /dirpath 등) 모든 디렉토리에 적용
secure ssl true 또는 false false true로 설정하면 보안을 위해 ssl 즉 https 프로토콜일때만 쿠키 생성
- 모든 옵션은 말 그대로 필요한것이 있을경우 지정하면 되고, 지정 안하면 기본값으로 세팅된다.
- expires , expires_day , expires_hour 는 경우에 맞게 적당한것으로 한가지를 골라 사용하면 된다. 3개중 2개 이상을 중복해서 사용하면 위 적힌 순서대로 먼저 적은것이 적용되게 된다. 즉 expires 와 expires_day 를 동시에 옵션을 주면 expires 가 적용되고 expires_day는 무시된다.
■ 사용 예제
◎ 쿠키 만들기
1. 기본옵션으로 쿠키 만들기
- 브라우저가 종료되면 없어지고, 현재 도메인에서, 모든 디렉토리 (/) 에서 사용가능한 쿠키가 만들어진다.
Cookie.set ('cookie_name1' , 'cookie_value1');
2. 모든 옵션
Cookie.set ('cookie_name2' , 'cookie_value2' , {
expires : new Date(2013,8,10,0,0,0),
domain: 'example.com',
path : '/dir',
secure : true
});
3. 만료일 : 일(day)단위
- 현재시간으로부터 1일동안 사용가능한 쿠키 만들기
- 위 2번에서 expires 옵션 대신 사용하면 된다.
Cookie.set ('cookie_name3' , 'cookie_value3' , {
expires_day : 1
});
4. 만료일 : 시간(hour)단위
- 현재시간으로부터 12시간동안 사용가능한 쿠키 만들기
- 위 2번에서 expires 옵션 대신 사용하면 된다.
Cookie.set ('cookie_name4' , 'cookie_value4' , {
expires_hour : 12
});
5. 특수문자(; 와 =) 처리
- 쿠키는 document.cookie 에 = 과 ; 을 이용하여 값들을 문자열로 연결하여 저장하고, 값을 가져올때에도 = 과 ; 을 기준으로 잘라서 가져오기때문에 2개 문자를 포함한 특수문자들을 처리해준다.
Cookie.set ('cookie_name=;=' , ';=cookie_value3=a=;b');
◎ 쿠키값 가져오기
6. 쿠키값 가져오기
Cookie.get ('cookie_name1');
7. 5번에서 특수문자가 포함된 이름과 값으로 생성된 쿠키값 확인
Cookie.get ('cookie_name=;=');
◎ 쿠키 삭제
8. 1번에서 기본옵션값으로 생성한 쿠키값 삭제
Cookie.del ('cookie_name1');
9. 2번에서 옵션값을 정해서 생성한 쿠키값 삭제
- 만료일을 제외한 모든 옵션을 생성할때와 똑같이 지정해서 삭제해야 함
Cookie.del ('cookie_name2' , {
domain: 'example.com',
path : '/dir',
secure : true
});
