자바스크립트 쿠키 - jQuery Cookie Plugin

Cookie는 웹 브라우저에 데이터를 저장할 수 있는 방법중에 하나 입니다. 서버 측에서 Set-Cookie 헤더 정보를 설정하여 클라이언트로 보내면 브라우저는 이 값을 저장하고 있다가 다음 요청부터 계속 서버로 보내게 됩니다.

웹 프로그래명 초기에는 세션 유지를 이 쿠키를 사용해서 했었습니다. 요즘에는 클라이언트 측에 자료를 두는 것이 보안문제가 발생할 수 있으므로 세션 데이터를 서버측 세션 객체에 저장하고, 이 세션 객체를 찾기 위한 세션 키만을 쿠키를 사용해서 전달을 하는 방식으로 바꼈습니다. 이제는 세션정보는 쿠키를 사용하여 저장하지 않습니다.

보통 쿠키는 서버측에서 set-cookie 헤더를 사용하여 부여하지만, 클라이언트 쪽에서 자바스크립트를 사용해서 쿠키를 다루는 것도 가능합니다. 가장 많이 사용하는 곳은 팝업창을 열었을때 오늘은 그만 보기 기능 같은 곳입니다.

자바스크립트에서 쿠키를 다루기 위해서는 document.cookie 객체를 다루어야 되는데, 이것을 간단하게 해주는 jquery cookie plugin에 대해서 알아보겠습니다.

1. 다음 사이트에서 다운 받을 수 있습니다.

https://plugins.jquery.com/cookie/

2. 다운로드 받은 js 파일을 페이지에 포함 시킵니다. jquery 플러그인 이므로 jquery 도 있어야 합니다.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./jquery.cookie.js"></script>

3. 쿠키 만들기

// 세션 쿠키 생성 - 브라우저를 닫으면 없으집니다.
$.cookie('name', 'value');

// 7일 뒤에 만료되는 쿠키 생성
$.cookie('name', 'value', { expires: 7 });

// 전체 사이트에 대해 7일 뒤에 만료되는 쿠키 생성
$.cookie('name', 'value', { expires: 7, path: '/' });// 세션 쿠키 생성 - 브라우저를 닫으면 없으집니다.
$.cookie('name', 'value');

// 7일 뒤에 만료되는 쿠키 생성
$.cookie('name', 'value', { expires: 7 });

// 전체 사이트에 대해 7일 뒤에 만료되는 쿠키 생성
$.cookie('name', 'value', { expires: 7, path: '/' });

4. 쿠키 읽기

// 키로 사용한 이름으로 값을 읽습니다.
// 키로 저장된 값이 없으면 undefined 가 반환됩니다.
$.cookie('name');

// 모든 쿠키 읽기
// 모든 쿠키를 { "name": "value" } 형태의 객체로 반환합니다.
$.cookie();

5. 쿠키 삭제하기

// 성공적으로 삭제되면 true 를 반환하고, 삭제 못했을때는 false를 반환합니다.
$.removeCookie('name');

// 쿠키 삭제시 생성할때 와 같은 path와 domain 을 사용해야 합니다.
// 아래와 같이 생성했다면,
$.cookie('name', 'value', { path: '/' });

// 이렇게 삭제할 수 없습니다.
$.removeCookie('name'); // => false

// 이렇게 삭제해야 합니다.
$.removeCookie('name', { path: '/' }); // => true

이것으로 자바스크립트 jQuery cookie plugin 사용법을 알아 보았습니다.