[jQuery cookie] jquery로 쿠키($.cookie, $.removeCookie) 를 저장/불러오기/삭제해보도록 하자

쿠키는 보통 아이디 저장하기 체크박스 클릭시 아이디정보를 저장한 후 재접속시 아이디 값을 유지할때 필요하다

사용 스크립트

● jQuery  [다운로드] 

    또는 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

● jQuery cookie [다운로드]

압축 해제 후 jquery-cookie-master\src\jquery.cookie.js 를 include하도록 하자

index.jsp페이지에 샘플코드를 작성하고자 한다.

include 파일

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

body 내에 들어갈 샘플 HTML 코드

저장값 : <input type="text" id="save" />
<input type="button" value="쿠키저장" id="saveButton" /><br/>
쿠키값호출 : <input type="text" id="load" />
<input type="button" value="쿠키불러오기" id="loadButton" />
<input type="button" value="쿠키삭제" id="deleteButton" />

이벤트 코드 스크립트

$(function(){
        //저장버튼 클릭
	$("#saveButton").click(function(){
                //입력값 
		var cookie_value = $("#save").val();
                //'cookie'라는 key값으로  입력값을 저장한다.
               //1번째 parameter = 쿠키명
              // 2번째 parameter = 저장하고자 하는 쿠키값
		$.cookie('cookie', cookie_value);
        });
        //불러오기버튼 클릭
	$("#loadButton").click(function(){
                //저장버튼클릭시 'cookie' key값을 불러온다.
		var cookie_value = $.cookie('cookie');
                // load라는 id text태그에 cookie_value변수에 들어있는 값을 담는다.
		$("#load").val(cookie_value);
	})
       //삭제버튼 클릭
	$("#deleteButton").click(function(){
                //'cookie' 라는 key값의 쿠키를 삭제한다
		$.removeCookie("cookie");
	})
})

※ 이외에 상세적인 옵션을 주고자 한다면 3번째 parameter를 정해주면 될것이다.

$.cookie('key값','value',{

                                         expires : 10

                                        ,domain : 'roqkffhwk.tistory.com'

                                        ,secure : false

                                   });

expires : 쿠키를 저장하는 기간이다 (10이라고 주었다면 10일동안 쿠키정보를 저장한다)

path : 쿠키경로 설정부분

domain : 쿠키를 저장할 도메인 - 지정안할시 호출한 url의 domain이 된다.

secure : https url에 사용을 하고자 한다면 true 

테스트를 해보도록 하자

본인은 default값으로 화면 출력을 해보았음

1) 쿠키저장

2) 쿠키불러오기

3) 쿠키삭제 -> 쿠키값 호출하기

위와같이 확인되었다. 잘 사용하시길...

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!