반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함


Working with cookies using jQuery and JavaScript


jQuery나 Javascript를 통해 쿠키를 사용하는 overview 입니다.

오늘은 jQuery 나 pure javascript 를 통해서 쿠키를 쉽게 사용할 수 있도록 하는 몇가지 테크닉을 다루겠습니다.


What is a cookie?


쿠키는 Hypertext Transfer Protocol (HTTP) requests 와 response 를 포함하고 있는 text string 입니다. 쿠키는 state 정보를 유지하기 위해 사용됩니다. 여러 웹사이트를 돌아다니다가 그 웹사이트에 다시 돌아왔을 때 일관성을 유지시켜주기 위해 사용되는 것이죠. 이 글은 쿠키에 대한 정보를 제공하고 있습니다.


What do i do with cookies


요즘은 주로 쿠키가 유저의 로그인 정보를 저장하기 위해서 가장 많이 쓰이고 있습니다. 이 의미는 유저가 로그인 된 상태로 특정 시간동안 유지하도록 하는 기능을 쿠키가 제공해 주고 있다는 것이죠. 그 이외에도 그 웹사이트에 머물러 있었던 마지막 순간의 정보에 대한 아주 temporary 한 정보들을 저장하기도 합니다.


쿠키는 외부로부터 여러분의 웹사이트에 의해 혹은 유저에 의해 접근해야될 필요가 있는 정보 저장에는 사용하지 않습니다. 각각의 컴퓨터나 브라우저의 local에 쿠키들은 저장됩니다.





How do i actually use them


쿠키는 모든 웹 프로그래밍 언어에 의해 접근될 수 있습니다. 이 의미는 자바스크립트, python, php 그리고 다른 많은 언어들이 쿠키를 다룰 수 있다는 거죠. 첫번째로 쿠키를 다루는 가장 쉬운 방법인 jQuery를 이용한 쿠키 다루기를 설명하겠습니다.

jQuery는 jQuery library와 함꼐 사용하는 plugin을 가지고 있습니다. (이 링크에서 받으실 수 없으시면 아래 파일을 받으세요.)


jquery.cookie.js


이 플러그인을 이용하시면 정말 쉽게 쿠키를 저장하고 또 거기에 접근하실 수가 있습니다. 그럼 쿠키를 저장하고 displaying 하는 부분의 코드를 볼까요.



  1. <html>  
  2. <head>  
  3. <script src="http://code.jquery.com/jquery-latest.js"></script>  
  4. <script src="jquery.cookie.js"></script>  
  5. <script>  
  6. $(document).ready(function(){  
  7.     // set cookie  
  8.     $.cookie('my_cookie_name', 'value inside of it');  
  9.   
  10.     // get cookie  
  11.     alert($.cookie('my_cookie_name'));  
  12.   
  13.     // delete cookie  
  14.     $.cookie('my_cookie_name', null);  
  15. });  
  16. </script>  
  17. </head>  
  18. <body>  
  19. <a class="setme">Set Me</a>  
  20. <a class="tellme">Tell Me</a>  
  21. <a class="delete">DeleteM</a>  
  22. </body>  
  23. </html>  



이제 코드의 중요한 부분을 살펴보죠. 첫번째로 jQuery를 embed 해야죠. 그 다음에 jquery cookie 플러그인을 add 했습니다. 그리고 저 아름다운 jQuery code를 시작합니다.


set cookie 하는 부분은 그냥 보시기만 하셔도 아시겠죠? 딱 한 줄 입니다. 그러면 my_cookie_name이라는 쿠키가 세팅 될 겁니다. 그 값은 value inside of it 이 되겠죠. 

$.cookie() 플러그인에 두개의 파라미터를 pass 했습니다. 이름과 값에는 작은 따옴표나 큰 따옴표를를 붙여야 합니다.


쿠키를 get 하는 방법도 아주 직관적입니다. 그냥 쿠키 이름을 pass 하시면 됩니다. jQuery 플러그 인에요. 그러면 우리가 저장한 값을 가지게 될 겁니다.

그리고 마지막으로 쿠키를 지우는 것은 쿠키를 저장하는 것과 거의 같습니다.

단지 다른것이 있다면 값에 null 을 넣으시면 됩니다.


Now let’s go more advanced


이제 쿠키를 세팅하고 값을 add 하고 저장된 값을 delete 하는 것 까지 다 했습니다.

이제 쿠키를 특정 시간 동안 저장하는 것 같은 혹은 특정 date 까지 저장하는 방법 같은 것을 알아보겠습니다.



  1. // cookie expires in 10 days  
  2. $.cookie('cookie_name''our value', { path: '/', expires: 10 });  
  3.   
  4. // cookie expires in a set JavaScript Date  
  5. var date = new Date();  
  6. $.cookie('cookie_name''our value', { path: '/', expires: date });  



첫번째 코드는 이 쿠키가 10일 이후에 expire 되도록 세팅한 겁니다. 이게 끝입니다. 정말 간단하죠. 세번째 파라미터에 쿠키가 저장 될 path를 넣습니다. 그리고 / 를 넣어서 깔끔하게 정리하시고 다음으로는 expiration days를 넣으시면 됩니다.


두번째 코드는 우선 date 변수를 만듭니다. 이 date 변수에는 현재 날짜가 들어갑니다. 그리고 이것을 특정 JavaScript date 에 expire 되게 쿠키에 세팅할 겁니다. real date를 넣으면 여러분이 그 javascript date를 넣을 때까지는 작동을 하지 않을 겁니다. 자세한 사항은 JavaScript date 에 대한 글을 읽어 보세요.


How to do this with JavaScript

아래에는 일반 자바스크립트에서 쿠키를 다루는 예제입니다.


  1. function setCookie(key, value) {  
  2.    var expires = new Date();  
  3.    expires.setTime(expires.getTime() + 31536000000); //1 year  
  4.    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();  
  5.    }  
  6.   
  7. function getCookie(key) {  
  8.    var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');  
  9.    return keyValue ? keyValue[2] : null;  
  10.    }  
  11.   
  12. setCookie('test''5');  
  13. alert(getCookie('test'));  



두개의 함수를 만들었습니다. setCookie와 getCookie 입니다. setCookie에는 두개의 변수를 pass 해야 합니다. key와 value 한 쌍이죠. 위 예제에서는 쿠키의 expire 날을 1년으로 잡았습니다. 물론 여러분이 바꿀 수도 있죠. 위에 javascript date에 대한 링크가 있죠? 거길 참조하세요.


이 글을 읽으시고 쿠키에 대해서 그리고 쿠키를 다루는 법에 대해서 감을 잡으셨기를 바랍니다.


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


위 글은 jQuery Mobile 이 아니라 jQuery 에서 쿠키 관련 플러그인을 사용하는 법을 알려주고 있습니다.

하지만 jQuery Mobile에서도 같은 방법으로 이용하시면 됩니다.


예제를 하나 공부하려고 하는데 거기에 저 플러그인을 사용했길래 먼저 이 플러그인을 한번 훑어 봤습니다.


반응형

Comment

  1. 김성진 2012.10.30 23:53

    안녕하세요.. 글 보고 여쩌볼게 있어서요.
    제가 jquery mobile 로 작업하고 phoneGap으로 아이폰에 올렸는데 거기서 쿠키를 사용할려고요
    어플 실행시켜서 아이피 입력해서 서버에 접속하면 그 아이피를 쿠키에 담아놧다가 어플 종료후
    다시 실행시켰을때 쿠키에 있던 아이피를 가져올려고 하는데 위에 글처럼 하니 잘 안돼서요.
    아이피 입력하게되면 $.cookie('ip',ip); 이런식으러 넣고
    $.cookie('ip') 이런식으러 불러오는데.. 웹페이지에서만 가능한건가요?? 멀 잘못한건가요???