JQuery cookie 라이브러리 활용하기

애플리케이션에서 자주 사용하는 브라우저 쿠키의 옵션들을 다양하게 활용하게 해주는 jquery 의 cookie 라이브러리.

document.cookie 로 저장된 쿠키들을 불러올 수 있지만, url 파라미터처럼 name1=value&name2=value2 와 같이 한덩어리의 문자열로 값을 리턴해주기 때문에 일일히 파싱해서 값을 읽어들이기는 쉽지않다. 공통함수에 직접 선언하는것도 어렵진 않지만 옵션 지정까지 고려하면 무료의 훌륭한 라이브러리를 사용하지 않을 이유가 없다!

사실 쿠키 라이브러리는 설명이 따로 필요 없을 만큼 사용법이 간단하지만, 기본 CRUD 정도만 정리해보고자 한다.

 

참고 ) https://github.com/carhartl/jquery-cookie

carhartl/jquery-cookie

 

jquery 의 라이브러리인 만큼 MIT 라이센스 정책을 사용하고 있다.

 

쿠키 셋팅을 위해 라이브러리 js 파일을 선언하고 아래와 같이 지정만하면 기본세팅 끝

<script src="/js/jquery.cookie.js"></script>

 

• Create & Update

$.cookie('name', 'value');

 

아래와 같이 파라미터로 다양한 속성을 지정할 수 있다.

// 7일 뒤 만료
$.cookie('name', 'value', { expires: 7 });

// 현재 도메인 전체에서 해당 쿠키 사용
$.cookie('name', 'value', { path: '/' });

/*
  https 프로토콜에서만 쿠키 허용
  사이트의 보안을 위해 SSL인증서가 있는 경우라면 무조건 true 로 지정하는 것을 권장
  default = false
*/
$.cookie('name', 'value', { secure: true });

// 한번에 
$.cookie('name', 'value', { expires: 7, path: '/', secure: true });

 

• Read

$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined
$.cookie(); // => { "name": "value" , "name2": "value2" }

document.cookie; // => name=value&name2=value2 ... 

값을 객체형태로 받아오기때문에 활용하기가 편리하다.

 

• Delete

// 성공적으로 쿠키가 삭제되면 true 값을 반환한다.
$.removeCookie('name'); // => true

// 쿠키 세팅 시 특별한 속성을 설정한 경우 해당 속성을 동일하게 지정해주어야 한다.

// path 속성과 함께 세팅 했다면
$.cookie('name', 'value', { path: '/' });
// 성공 
$.removeCookie('name', { path: '/' }); // => true
// 실패 
$.removeCookie('name'); // => false

 

또한 아래와 같이 다양한 공통 옵션들을 지정할 수 있다. 아래 옵션들을 지정하지 않은경우는 false.

• raw
  기본적으로는 쿠키 값을 읽고 쓸때 URI 인코딩을 거치지만 raw 속성을 true 로 지정하면 인코딩을 하지 않는다.
  

  $.cookie.raw = true;

   

• json
  기본적으로는 일반 객체로 값을 읽지만, json 속성을 true 로 주면 JSON.parse / JSON.stringify처리 후에 값을 리턴한다.
  

  $.cookie.json = true;

   

• defaults 
  사이트의 쿠키 정책이 동일할 때 아래처럼 한번에 지정해버릴 수 있다. 
  

  $.cookie.defaults = { path: '/', expires: 365, domain: '', secure: true };

 

쿠키는 어플리케이션에서 많이 활용되지만, 잘못된 쿠키사용으로 보안에 취약해질 수 있으니 주의하도록 하자.