메뉴 건너뛰기

2016.09.21 18:25

jQuery Cookie

조회 수 6864 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

쿠키값을 읽고, 쓰고, 삭제할 수 있는 단순하고 가벼운 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/


  1. jquery timer, javascript countdown (타이머 예제)

    Date2018.11.07 Views81491
    Read More
  2. jquery selector / jquery 선택자 / 자주 사용하는 jquery selector 선택자 / selecter

    Date2016.09.09 Views8149
    Read More
  3. jQuery Selector (셀렉터)

    Date2016.11.18 Views6931
    Read More
  4. jQuery selectBox 컨트롤.

    Date2018.07.25 Views2558
    Read More
  5. jquery radio checked (라디오 버튼 값으로 선택), 검색 조건 초기 셋팅

    Date2016.11.17 Views10046
    Read More
  6. jQuery Quick API

    Date2016.09.13 Views6934
    Read More
  7. jQuery Plugin : Slider

    Date2019.01.10 Views1113
    Read More
  8. jquery function 생성

    Date2016.09.11 Views6963
    Read More
  9. jquery enter key event submit (jquery 엔터키 이벤트)

    Date2016.11.17 Views6857
    Read More
  10. jQuery datepicker 팝업창 사이즈 바꾸기

    Date2019.01.10 Views1503
    Read More
  11. jquery css div, li 리스트 선택한 메뉴 변경 출처: http://okkks.tistory.com/1062 [이건없지]

    Date2017.07.05 Views5806
    Read More
  12. jQuery Cookie

    Date2016.09.21 Views6864
    Read More
  13. jQuery - 클릭이벤트 동적 처리하기($("").click(), on('click') 차이)

    Date2021.03.09 Views580
    Read More
  14. jQuery - 드래그앤드롭(DragAndDrop)을 통한 파일 업로드

    Date2021.03.09 Views291
    Read More
  15. jQuery - 드래그, 리사이즈 이벤트에 따른 영역 침범 막기

    Date2021.03.09 Views363
    Read More
  16. jquery - select option 선택값 가져오기

    Date2018.09.06 Views5330
    Read More
  17. jQuery - radio, checkBox값 가져오기, 선택하기, 제어 등

    Date2021.03.09 Views543
    Read More
  18. jQuery - checkbox 전체 선택, 해제 기능 및 단일 체크박스가 해제되었을때 전체 선택 해제 하기

    Date2021.03.09 Views613
    Read More
  19. jQuery - ajaxSubmit 사용법 및 유의사항(페이지 리로드 현상)

    Date2021.03.09 Views1470
    Read More
  20. jQuery - ajax xhr을 활용한 파일 업로드 진행 상태 확인하기

    Date2021.03.09 Views586
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved