[javascript] 쿠키(Cookies)

쿠키는 키와 값을 가질 수 있는 데이터로서 클라이언트 즉, 사용자의 웹브라우저에 저장 가능한 데이터입니다. 대부분의 경우 클라이언트 단에서 어떤 정보를 일정 시간 동안 저장하고자 하는 경우에 많이 사용됩니다.

 

예를 들어 어떤 웹사이트의 로그인에서는 사용자 아이디를 기억하는 기능이 있습니다. 사이트로 로그인할 때마다 매번 동일한 아이디를 입력해야 하는 불편함을 덜어주기 위해서입니다.

 

DAUM의 로그인

사이트마다 다를 수 있겠지만 이러한 기능을 구현하기에 쿠기가 많이 활용됩니다.

---

1. 쿠키 생성

 

쿠키는 다음과 같은 방법으로 생성할 수 있습니다.

var date = new Date();
date.setDate(date.getDate() + 7);

var _cookie = 'tmpdata=1234;expires=' + date.toUTCString();

document.cookie = _cookie;

이때 Name은 tmpdata이고 값은 1234입니다. 또한 쿠키 만료일자를 expires로 지정해 현재로부터 7일까지로 설정했습니다. expires를 따로 지정하지 않으면 브라우저가 닫히는 즉시 쿠키도 삭제됩니다.

 

이외에 domain, path, secure 등을 추가로 지정할 수 있습니다. domain은 현재 홈페이지 주소(ex : www.cliel.com)를, path는 주소 하위에 경로(/test/test.html)를 나타냅니다. 쿠키 데이터로 접근할 때 위 설정된 도메인과 경로가 일치하지 않으면 접근할 수 없습니다.

 

대부분의 경우 domain설정은 거의 손대지 않고 필요한 경우 path를 설정하는데 이때도 만약 /'test/' 등으로 경로를 지정하면 해당 경로나 또는 그 하위의 경로에서만 생성된 쿠키로 접근할 수 있습니다. 보통은 이 설정을 최상위 경로(/)로 유지합니다.

 

secure는 보안에 관련된 속성으로 쿠키 설정 시 secure를 지정하면 사이트에 SSL로 접속된 경우에만 쿠키에 접근할 수 있게 됩니다.

---

2. 쿠키 접근

 

쿠키는 여러 개의 name와 value를 가질 수 있으며 각각의 name과 value는 ; 문자를 기준으로 구분 지을 수 있습니다. 따러서 필요한 쿠키값을 찾으려면 쿠키 전체에서 ; 문자를 기준으로 나누어서 봐야 합니다.

var _cookie = document.cookie.split(';');

for (var i in _cookie) {
	if (_cookie[i].search('tmpdata') != -1) {
		alert(_cookie[i].replace('tmpdata=', ''));
	}
}

; 문자를 기준으로 쿠키값을 배열로 가져와 순회하면서 search로 찾고자 하는 쿠키의 name을 지정합니다. 만약 지정한 name이 존재하면 해당 name과 name/value를 구분하는 =문자를 제거해 보면 name과 쌍을 이루는 value값을 확인할 수 있게 됩니다.

 

※ 쿠키값을 가져올 때 브라우저에 따라 앞 위 공백이 있는 경우를 대비해 다음과 같은 방법으로 공백을 제거하기도 합니다.

쿠키값.replace(/^\S\S*/, '').replace(/\S\S*$/, '')

---

3. 쿠키 제거

 

만약 쿠키를 제거하고자 한다면 expires를 현재로부터 과거 시간으로 지정하면 됩니다.

var date = new Date();
date.setDate(date.getDate() - 1);

var _cookie = 'tmpdata=1234;expires=' + date.toUTCString();

document.cookie = _cookie;

위 에제와 달라진 거라곤 날짜로 + 7에서 - 1로 변경한 것뿐입니다.