cookie 생성 및 삭제

Jquery cookie 사용하기

POSTED AT 2012/01/09 11:40 | POSTED IN DEV/JQUERY

다운로드 경로 : https://github.com/carhartl/jquery-cookie

간단 사용법

js 파일(jquery.cookie.js) 임포트 한 후

<쿠키생성>

1. 세션 쿠키(Session Cookie)

세션 쿠키는 브라우저 열려있는 동안만 유지된다

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

2. 만료일 지정한 쿠키

$.cookie('key' , 'value', { expires : 값 });

값의 단위는 일(日)단위 이다

주의할 점은 위 생성방식 모두 디폴트로 쿠키가 만들어진 페이지 경로에만 쿠키가 적용된다

모든 페이지에 쿠키를 적용하려면 아래와 같이 path : '/' 를 설정 해야 한다

$.cookie('key' , 'value', { expires : 값, path : '/' });

$.cookie('key' , 'value', { path : '/' });

<쿠키 읽기>

$.cookie('key');

위처럼 하면 저장된 값을 반환한다. 해당 key가 없다면 null 반환

<쿠키삭제>

$.cookie('key', null);

path 옵션을 주어 쿠키를 만들었다면 삭제할때 역시 같은 path 옵션을 줌 (이것 떄문에 삽질 대박함)

<쿠키 생성시 옵션 항목>

expires : 365

쿠키 만료를 일단위로 설정한다 생략하면 세션 쿠키로 만들어진다

path : '/'

쿠키가 적용되는 페이지 경로. 사이트 전체 페이지에 적용하려면 위와같이 설정

domain : 'domain.com'

쿠키가 적용될 도메인 디폴트가 쿠키가 만들어진 도메인이다

secure : true

디폴트는 false 다. true로 설정하면 쿠키전송은 https 프로토콜로만 가능

raw : true

디폴트는 false이다 false 일 경우는 쿠키는 생성되거나 읽을 떄 기본적으로 인코딩/디코딩을 한다(encodeURIComponent / decodeURIComponent 이용)

출처 - http://pengs.pe.kr/294

===================================================================================

<script language="JavaScript"> <!--      // 쿠키 생성      function setCookie(cName, cValue, cDay){           var expire = new Date();           expire.setDate(expire.getDate() + cDay);           cookies = cName + '=' + escape(cValue) + '; path=/ '; // 한글 깨짐을 막기위해 escape(cValue)를 합니다.           if(typeof cDay != 'undefined') cookies += ';expires=' + expire.toGMTString() + ';';           document.cookie = cookies;      }      // 쿠키 가져오기      function getCookie(cName) {           cName = cName + '=';           var cookieData = document.cookie;           var start = cookieData.indexOf(cName);           var cValue = '';           if(start != -1){                start += cName.length;                var end = cookieData.indexOf(';', start);                if(end == -1)end = cookieData.length;                cValue = cookieData.substring(start, end);           }           return unescape(cValue);      } //--> </script> 쿠키 생성 버튼을 누른 후 쿠키 보기를 눌러 보세요.<br> 쿠키 삭제 버튼을 누른 후 쿠키 보기도 눌러 보세요.<br> <br> 쿠키 생성 버튼을 누른 후 이 페이지를 닫고 다시 들어와서 쿠키 보기를 눌러보세요.<br> <br> <input type="button" value="쿠키 생성" onclick="setCookie('test', 'cookie test, 쿠키 테스트', 1)"> <input type="button" value="쿠키 보기" onclick="alert(getCookie('test'))"> <input type="button" value="쿠키 삭제" onclick="setCookie('test', '', -1)">

소스 설명

setCookie() - 쿠키를 만드는 함수입니다. setCookie('쿠키이름', '쿠키값', 만료일) 쿠키이름 : 쿠키이름을 영문으로 넣어주세요. 쿠키값 : 쿠키의 값을 문자열로 넣어주세요. 만료일 : 쿠키의 만료일을 숫자로 넣어주세요 예) 만료일이 1 이면 하루동안 지속되는 쿠키입니다. 예) 만료일이 -1 이면 쿠키가 삭제됩니다. getCookie() - 쿠키값을 가져오는 함수입니다. getCookie('쿠키이름') 쿠키이름을 넣어 주면 해당 쿠키의 값을 반환합니다. 쿠키가 있을때만 반환하며 없으면 공백이 반환됩니다.

출처 - http://www.superkts.pe.kr/helper/view.php?seq=263&PHPSESSID=cdf657ead7ae8cc1489d107afa893f49