Working with cookies using jQuery and JavaScript
오늘은 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 하는 부분의 코드를 볼까요.
- <html>
- <head>
- <script src="http://code.jquery.com/jquery-latest.js"></script>
- <script src="jquery.cookie.js"></script>
- <script>
- $(document).ready(function(){
- // set cookie
- $.cookie('my_cookie_name', 'value inside of it');
- // get cookie
- alert($.cookie('my_cookie_name'));
- // delete cookie
- $.cookie('my_cookie_name', null);
- });
- </script>
- </head>
- <body>
- <a class="setme">Set Me</a>
- <a class="tellme">Tell Me</a>
- <a class="delete">DeleteM</a>
- </body>
- </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 까지 저장하는 방법 같은 것을 알아보겠습니다.
- // cookie expires in 10 days
- $.cookie('cookie_name', 'our value', { path: '/', expires: 10 });
- // cookie expires in a set JavaScript Date
- var date = new Date();
- $.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
아래에는 일반 자바스크립트에서 쿠키를 다루는 예제입니다.
- function setCookie(key, value) {
- var expires = new Date();
- expires.setTime(expires.getTime() + 31536000000); //1 year
- document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
- }
- function getCookie(key) {
- var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
- return keyValue ? keyValue[2] : null;
- }
- setCookie('test', '5');
- alert(getCookie('test'));
두개의 함수를 만들었습니다. setCookie와 getCookie 입니다. setCookie에는 두개의 변수를 pass 해야 합니다. key와 value 한 쌍이죠. 위 예제에서는 쿠키의 expire 날을 1년으로 잡았습니다. 물론 여러분이 바꿀 수도 있죠. 위에 javascript date에 대한 링크가 있죠? 거길 참조하세요.
이 글을 읽으시고 쿠키에 대해서 그리고 쿠키를 다루는 법에 대해서 감을 잡으셨기를 바랍니다.
======================================================
위 글은 jQuery Mobile 이 아니라 jQuery 에서 쿠키 관련 플러그인을 사용하는 법을 알려주고 있습니다.
하지만 jQuery Mobile에서도 같은 방법으로 이용하시면 됩니다.
예제를 하나 공부하려고 하는데 거기에 저 플러그인을 사용했길래 먼저 이 플러그인을 한번 훑어 봤습니다.
'jQuery Mobile > JQM codes' 카테고리의 다른 글
| jQuery Mobile 로 iOS arrow button 효과 내기 (2) | 2012.11.23 |
|---|---|
| jQuery Mobile 샘플코드 분석, Cascading Selects - .empty() .val() - (0) | 2012.08.11 |
| jQuery Mobile 샘플코드 분석, Dynamic Add (0) | 2012.08.10 |
| jQuery Mobile 로 만든 To-Do List 분석하기 04 (0) | 2012.08.09 |
| jQuery Mobile 로 만든 To-Do List 분석하기 03 (0) | 2012.08.08 |
| jQuery Mobile 로 만든 To-Do List 분석하기 02 (0) | 2012.08.07 |
| jQuery Mobile 로 만든 To-Do List 분석하기 01 (0) | 2012.08.07 |
| json2.js 플러그 인 알아보기 (0) | 2012.08.04 |
| jQuery.tmpl 플러그 인 튜토리얼 (0) | 2012.08.04 |