javascript cookie 쿠키, 생성, 사용, 삭제

document.cookie

http://www.w3schools.com/js/js_cookies.asp

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

쿠키는 브라우저에서 보안이 중요하지 않은 곳에 사용하며 용량이 4KB로 아주 작은 정보교환 공간이다.

현재의 쿠기에 저장된 내용을 보려면

자바스크립트에서 document.cookie; 를 사용하면 쿠키 전체 값을 볼 수 있다.

쿠키의 생성

쿠키는 이름, 값, 보존기간, 경로, 도메인, 보안 의 값을 사용한다.

document.cookie="name=value[; expires=expires] [; path=path] [; domain=domain] [; secure]";

그런데 보통은 이름, 값, 보존기간 정도만 사용한다.

필수는 이름, 값 이며 보존기간이 없으면 브라우저가 종료될 때 삭제된다.

도메인이 없으면 모든 도메인에 사용되고

보안이면 https 에서만 사용할 수 있다.

아래와 같은 식의 함수를 작성하면 된다.

function setCookie(name, value, expires, path, domain, secure){

var time = new Date();

expires = expires ? time.setDate(time.getDate() + expires) : '';

path = path ? '; path='+path : '';

domain = domain ? '; domain=' + domain : '';

secure = secure ? '; secure' : '';

document.cookie=name+'='+escape(value)+(expires?'; expires='+time.toGMTString():'')+path+domain+secure;

}

value 에 escape 하는 것은 한글 때문이다.

name 에도 한글이 있으면 escape 해줘야 한다.

이름, 값 또는 선별적으로 보존기간 정도만 사용한다면

function setCookie(name,value,d){

var t=new Date();

d=d==''?'':'; expires='+t.setDate(t.getDate()+d);

document.cookie=name+'='+escape(value)+'; path=/'+(d?'; expires='+t.toGMTString():'');

}

위를 한줄로 정리하면

function setCookie(name,value,d){

document.cookie=name+'='+escape(value)+'; path=/'+(d?'; expires='+(function(t){t.setDate(t.getDate()+d);return t})(new Date).toGMTString():'');

}

또한 이름, 값 만 저장할 경우는 마지막 줄만 있으면 된다.

function setCookie(name, value){

document.cookie=name+'='+escape(value);

}

이렇게하면 쿠키가 생성된다.

setCookie('tistory', 'blog', '7', '/', 'tistory.com', 'secure'); // tistory.com 에서 7일간 HTTPS와 같은 보안 프로토콜에서만 사용한다.

==> document.cookie = "tistory=blog; expires=Thu, 17 Sep 2015 08:50:38 GMT; path=/; domain=tistory.com; secure";

setCookie('tistory', 'blog', '7'); // 7일간 보존한다.

==> document.cookie = "tistory=blog; expires=Thu, 17 Sep 2015 08:50:38 GMT";

setCookie('tistory', 'blog'); // 현재 브라우저가 종료될 때까지 보존한다.

==> document.cookie = "tistory=blog";

쿠키 값 가져 오기

생성된 쿠키의 값을 사용하려면 쿠키 전체의 값에서 내가 원하는 이름의 값만 찾아와야 한다.

방법은 직접 얻는 방법과 함수를 사용하는 방법이다.

escape 한 값을 unescape 로 복원한다.

정규식을 사용하여 간단하게 가져오면 된다.

직접 얻는 방법이며 아래와 같이 하면 mycookie 에는 tistory 값에 저장된 'blog' 가 저장된다.

var mycookie = /tistory=([^;]*)/.test(document.cookie) ? unescape(RegExp.$1) : '';

함수를 사용하는 방법이다.

function getCookie(name){

name = new RegExp(name + '=([^;]*)');

return name.test(document.cookie) ? unescape(RegExp.$1) : '';

}

이렇게 하면 된다.

var mycookie = getCookie('tistory');

쿠키의 삭제

쿠키를 삭제하는 방법도 두 가지로 생각할 수 있다.

value 값 지우기

setCookie('tistory', '');

공식적인 방법: 보존기간을 과거로 한다.

setCookie('tistory', '', '-1');