Javascript Cookie 쿠키 저장, 가져오기, 삭제 함수

Javascript cookie

쿠키(Cookie) 개념,

본격적으로 코드를 보기 전에 쿠키(Cookie)의 개념부터 간단하게 살펴보면, HTTP 쿠키는 웹 브라우저(web browser)에 저장되는 4KB 크기를 가진 문자열입니다.

기본적으로 HTTP 프로토콜은 각각의 요청을 독립적인 트랜잭션으로 취급하는 통신 프로토콜로 '무상태(Stateless) 프로토콜' 이라고도 불리는데요. 이때 쿠키는 제한적이긴 하지만 브라우저와 서버 간에 지속적으로 유지할 수 있는 데이터를 제공하는데, 이것이 HTTP 프로토콜에서 상태 관리의 개념으로 볼 수 있습니다.

 

하나의 예로, 쿠키는 서버에서 받은 로그인 토큰 정보를 웹 브라우저에 저장하고, 다시 서버에 요청을 할 때, 그 정보를 서버에 보냄으로써 사용자를 식별할 수 있게 하는 역할을 합니다.

 

쿠키를 사용하는 목적으로는 크게 세션 관리(Session Management), 개인화(Personalization), 추적(Tracking)이 있습니다.

 

 

 

본격적으로 자바스크립트 쿠키 사용하는 방법,

//쿠키 저장하는 함수
function set_cookie(name, value, unixTime) {
    var date = new Date();
    date.setTime(date.getTime() + unixTime);
    document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value) + ';expires=' + date.toUTCString() + ';path=/';
}

//쿠키 값 가져오는 함수
function get_cookie(name) {
    var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return value? value[2] : null;
}

//쿠키 삭제하는 함수
function delete_cookie(name) {
    document.cookie = encodeURIComponent(name) + '=; expires=Thu, 01 JAN 1999 00:00:10 GMT';
}

 

자바스크립트 쿠키 사용의 핵심은 'document.cookie' 속성을 이용하는 것입니다.

 

 

 

- Cookie 예시

document.cookie = "name=value; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

 

- 쿠키(Cookie)의 정보를 담는 부분

먼저 쿠키의 정보를 담는 부분부터 살펴보면, 쿠키 정보는 'name=value' 형식으로 저장되며, 쿠키 값 value를 가지고 올 때 역시 name을 통해 가지고 올 수 있습니다.

또한 쿠키를 저장할 때, 같은 name이 있는 경우 기존의 쿠키를 덮어쓰게 되는데요. 따라서 쿠키의 수정은 별도의 함수를 정의하지 않고 쿠키를 저장할 때 사용하는 set_cookie() 함수를 사용할 수 있습니다.

 

쿠키의 name, value 부분은 특별한 제약이 없기 때문에 모든 글자가 허용되며, 2Byte 언어도 지원하기 때문에 한글도 사용할 수 있는데요. 하지만 유효성을 일관성 있게 유지하기 위해서 encodeURIComponent() 함수를 사용하여 name, value 값을 이스케이프 처리해주는 것이 좋다고 합니다.

 

(encodeURIComponent 함수를 사용하는 이유에 대한 내용은 구글링을 통해 조금 더 자세하게 찾아볼 수 있으며, 해당 함수를 통해 이스케이프 된 값을 서버에 다시 전달하게 되었을 때, 서버에서는 decode 하는 과정이 필요할 수 있습니다.)

 

 

- 쿠키의 경로 path 옵션

path 옵션을 통해 도메인의 하위 경로로 사용할 쿠키를 지정할 수 있습니다.

사이트에서 사용하는 쿠키의 종류가 많거나, 하위 URL 단위로 쿠키를 따로 사용해야 하는 경우에 해당 path 옵션을 통해 쿠키를 관리할 수 있습니다.

 

일반적으로는 path 옵션을 path=/ 처럼 root로 설정하여 웹 브라우저의 모든 페이지에서 쿠키에 접근할 수 있도록 합니다.

 

 

- 만료일 expires 옵션

만료일은 GMT(Greenwich Mean Time) 포맷을 사용하며, toUTCString() 함수를 사용하여 해당 포맷으로 변경합니다.

toGMTString() 함수를 사용하는 예시도 볼 수 있는데, 해당 함수는 Deprecated 되었기 때문에 toUTCString() 함수 사용이 권장됩니다.

개인정보 관련된 쿠키의 경우 보안적인 문제로 인해 가능한 만료 기간을 짧게 잡는 것이 좋은데요. 또한 쿠키는 삭제 기능이 없기 때문에 위 코드에서 볼 수 있는 것처럼 만료일을 현재 시각 이전으로 잡아서 쿠키가 만료되어 삭제되도록 만드는 방식을 사용합니다.

(만료 기간 expires 옵션이 지정되지 않은 경우에는 웹 브라우저가 닫힐 때 쿠키도 함께 삭제됩니다.)

 

 

- 쿠키 사용에서 알아두어야 할 부분

먼저 쿠키는 용량의 제한이 있는데요. encodeURIComponent로 인코딩한 이후의 name=value 쌍은 4KB(=4096Byte)를 넘을 수 없다는 것입니다.

또한 도메인당 저장할 수 있는 쿠키의 개수는 20여 개 정도로 제한되어 있습니다. (브라우저에 따라 다를 수 있습니다.)

 

 

***

기본적인 옵션인 path, expires 외에도 HTTPS로 통신할 때만 쿠키가 전송되는 secure 옵션, expires의 대안으로 사용할 수 있는 max-age 등의 옵션도 있지만 여기서는 생략되었기 때문에 필요하시다면 구글링을 조금 더 알아보시면 좋을 듯합니다.

 

해당 함수를 직접 구현하기 귀찮은 경우, 자바스크립트에서 쿠키를 쉽게 관리하기 위한 라이브러리인 'js-cookie'를 찾아보시는 방법도 있습니다.

 

 

 

 

< 참고 자료 >

쿠키와 document.cookie

 

<함께 보면 좋은 자료 >

(Web) HTTP 통신의 개념과 예제