쿠키값을 읽고, 쓰고, 삭제할 수 있는 단순하고 가벼운 jQuery plugin 이다.
설치
다운로드한 jquery.cookie.js 파일을 사이트의 /js 디렉토리에 저장했다면 아래와 같이 코드를 넣어준다. 아래 코드는 jQuery library를 소스상에 포함시킨 후에 추가해야 한다.
<script src="/js/jquery.cookie.js"></script>
사용법
$.cookie(the_cookie , the_value , 쿠키옵션);
the_cookie : 쿠키명
the_value : 쿠키값
1. 세션쿠키 생성
$.cookie('the_cookie', 'the_value');
2. 생성일로부터 7일후에 만료되는 쿠키를 생성
$.cookie('the_cookie', 'the_value', { expires: 7 });
3. 경로가 사이트 루트이고, 생성일로부터 7일후에 만료되는 쿠키 생성
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
4. 쿠키값 읽기
$.cookie('the_cookie'); // 'the_value' 값을 반환한다.
$.cookie('not_existing'); // 선언되지 않은 변수명을 적용하면 undefined 를 반환한다.
5. 모든 쿠키변수의 값을 읽기
모든 값이 json 형태로 반환된다.
$.cookie(); // { 'the_cookie' : 'the_value', ... }
6. 쿠키 삭제
$.removeCookie('the_cookie'); // 쿠키 'the_cookie' 를 삭제한다. 성공하면 true, 실패하면 false 를 반환한다.
$.removeCookie('the_cookie', { path: '/' }); // 동일한 경로를 갖는 쿠키들을 삭제한다.
설정
raw
쿠키값을 쓰거나 읽을때 기본적으로 encodeURIComponent/decodeURIComponent 를 이용해서 엔코딩/디코딩 처리를 한다. 엔코딩/디코딩 없이 쓰거나 읽기를 원하면 raw 속성에 true 를 설정한다.
$.cookie.raw = true;
json
Turn on automatic storage of JSON objects passed as the cookie value. Assumes JSON.stringify
and JSON.parse
$.cookie.json = true;
쿠키옵션
expires
쿠키의 유효기간을 정의한다. 이 값을 지정하지 않으면 쿠키는 세션쿠키로 생성된다. 값은 생성 시점의 시간 또는 날짜를 기준으로 일수로 표시한다.
expires : 365
path
쿠키의 경로를 정의한다. 기본값은 쿠키를 생성한 페이지의 경로값이 된다.
If you want to make it available for instance across the entire domain use path: '/'
.
domain
쿠키가 유효한 도메인을 지정한다. 기본값은 쿠키가 생성된 페이지의 도메인이다.
domain : 'example.com'
secure
이 값이 true 이면, 쿠키값을 전달하기 위해서 https 를 요구한다. 기본값은 false 이다.
변환
1. 쿠키값을 숫자로 반환하기 위한 예제
$.cookie('foo', '42');
$.cookie('foo', Number); //반환되는 값은 숫자 42 가 된다.
2. escape()를 이용해서 엔코딩 된 쿠키값을 디코딩하기 위한 예제
$.cookie.raw = true; // 기본 엔코딩/디코딩을 무시한다.
$.cookie('foo', unescape); // 쿠키 foo 값을 반환할때 unescape() 를 이용해서 디코딩 해서
사이트
http://plugins.jquery.com/cookie/
'프로그램 > jQuery' 카테고리의 다른 글
[plugin] Dynatree - JavaScript dynamic tree view plugin (0) | 2014.04.07 |
---|---|
슬라이드 쇼 (0) | 2014.04.06 |
체크박스 또는 라디오 버튼의 체크여부 변경하기 (0) | 2014.04.02 |
hover 메소드를 이용해서 메뉴 on, off를 구현 (0) | 2014.04.01 |
화면 이동시에 레이어가 따라다니게 하기 (0) | 2014.03.31 |