Javascript에서 쿠키 처리하기

자바 스크립트의 큰 기능은 브라우저 쿠키를 허용하는 것이다. 이 튜토리얼에서는 어떻게 쿠키를 수행하는지에 대해서 볼 것이다. 간단한 예제를 통해서 모든 페이지마다 이름과 이스플리이를 기억하도록 해 볼 것이다.

What are cookies? (쿠키는 무엇인가?)

쿠키는 웹 브라우저에 저장하는 간단한 양의 데이터 조각이다. 이것은 사용자와 매번 페이지에 방문할때 나타내는 정보를 저장하도록 해준다. 각 사용자는 유일한 세트의 쿠키를 가지고 있다.

쿠키는 일반적으로 웹 웹 서버에 의해서 이용되며, 웹사이트 방문을 트래킹 하거나, 사이트에 로그인 하거나, 쇼핑카트를 저장하는 일을 수행한다. 어쨋든 우리는 웹서버를 이용하지 않도고 쿠키를 이용ㄹ할 수 있다. 우리는 JavaScript를 이용해서 이러한 기능을 수행할 수 있다.

The document.cookie property

자바스크립트에서 쿠키는 도큐먼트 객체의 쿠키 프로퍼티를 이용하여 접근할 수 있다. 단순한 이 용어를 통해 우리는 다음과 같이 쿠키를 생성할 수 있다.

document.cookie = "name=value; expires=date; path=path;
                   domain=domain; secure";

그리고 모든 우리의 이전 쿠키 셋을 접근할 수 있다.

var x = document.cookie;

이것을 보자, 이러한 방법을 통해서 우리는 쿠키를 설정하고, 접근할 수 있다.

Setting a cookie

쿠키를 설정한다. 우리는 document.cookie 프로퍼티를 이용하여 원하는 경우 쿠키 속성을 포함하는 문자를 지정할 수 있다.

document.cookie = "name=value; expires=date; path=path;
                   domain=domain; secure";

이러한 프로퍼티는 아래 테이블에서 설명된다.

Property	Description	Example
name=value	이것은 쿠키의 이름과 값을 설정한다.	username=matt
expires=date	이 옵션값은 쿠키가 익스파이어될 기간을 설정하는 값이다. 데이터는 Date객체의 toGMTString() 메소드를 이용하여 반환된 값을 설정한다. 만약 expires 값이 주어지지 않으면 쿠키는 브라우저가 닫히는 순간 소멸된다.	expires= 13/06/2003 00:00:00
path=path	이 옵션값은 쿠키가 적용될 사이트의 패스를 지정하고자 하는 경우 이용된다. 이 패스내의 문서에서만 쿠키값을 검색할 수 있다. ㅇ.ㅣㄹ반적으로 왼쪽 블랭크는 쿠키를 검색가능하는 범위를 나타낸다.	path=/tutorials/
domain=domain	이 옵션값은 쿠키를 적용할 도메인을 지정한다. 오직 이 도메인에 지정된 웹 사이트에서만 쿠키를 조회할 수 있다. 보통 왼쪽 블랭크는 쿠키를 접근할수 있는 도메인을 의미한다.	domain=elated.com
secure	이 옵션 플래그가 가리키는 것은 브라우저가 SSL을 이용하여 서버에 쿠키를 전송한다는 것이다. flag는 드물게 이용된다.	secure

몇가지 예제를 보자.

document.cookie = "username=John;
                  expires=15/02/2003 00:00:00";

이 코드는 username라는 쿠키를 설정하고 값으로 John을 지정한다. 이것은 2003년 2월 15일에 파기되도록 하고 있으며 유럽 시간 표준을 지정한다.

var cookie_date = new Date ( 2003, 01, 15 );

document.cookie = "username=John;
                  expires=" + cookie_date.toGMTString();

이 코드는 정확하게 이전 예제와 동일하다. 그러나 Date.toGMTString()메소드 대신에 특정한 날짜 값을 지정하고 있다. 월은 0부터 시작한다. 그래서 2월은 01로 표기한다.

document.cookie = "logged_in=yes";

이 코드 셋으로 쿠키에 logged_in이 호출된 경우 "yes"값이 들어온다. 파기된 애트리뷰트는 설정되지 않는다. 쿠키는 브라우저가 닫히는경우 즉시 사라진다.

var cookie_date = new Date ( );  // current date & time
cookie_date.setTime ( cookie_date.getTime() - 1 );
document.cookie = "logged_in=;
                  expires=" + cookie_date.toGMTString();

이 코드셋은 logged_in 쿠키가 expiry.date를 가지도록 하며, current time 이전값을 지정함으로 해서 쿠키를 파기한다. 이것은 직접 수작업으로 파기하는 방법이다.

There's no escape!

엄격하게 말해서, 우리는 우리의 쿠키 값을 escaping 할 수 있다. 비 알파뉴메릭 캐릭터 인코딩이 스페이스와 세미콜론과 같은 문자들을 제거할 수 있다. 이것은 우리 브라우저에서 value 프로퍼티가 인터프리터 할 수 있도록 하고 잇으며 운좋게도 JavaScript의 escape() 함수를 쉽게 이용할 수 있다.

document.cookie = "username=" + escape("John Smith")
                  + "; expires=15/02/2003 00:00:00";

A function to set a cookie

쿠키 설정은 매우 쉽다. 만약 우리가 단순함 함수를 이스케이프와 같은 쿠키 값을 이용할 수 있고, document.cookie스크링을 빌드할 수 있도록 되어 있다. 여기 쉽게 준비한 내용이 있다.

function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );

  if ( exp_y )
  {
    var expires = new Date ( exp_y, exp_m, exp_d );
    cookie_string += "; expires=" + expires.toGMTString();
  }

  if ( path )
        cookie_string += "; path=" + escape ( path );

  if ( domain )
        cookie_string += "; domain=" + escape ( domain );
  
  if ( secure )
        cookie_string += "; secure";
  
  document.cookie = cookie_string;
}

이 함수는 아규먼트로 전달된 데이터를 쿠키 데이터 기다린다. 이것은 적합한 쿠키 문자를 빌드하고, 쿠키를 설정하도록 한다.

이 예제를 보면 우리는 쿠키를 파기 일자 없이 함수를 이용할 수 있도록 하고 있다.

set_cookie ( "username", "John Smith" );

이것은 2003년 2월 15일 파기 되도록 설정된다.

set_cookie ( "username", "John Smith", 2003, 01, 15 );

파기 데이트와 elated.com의 도메인과 파기 날짜를 이용하여 보안 쿠키를 지정하고 있다. 그러나 패스틑 없다.

set_cookie ( "username", "John Smith", 2003, 01, 15, "",
             "elated.com", "secure" );

Feel free to use this function in your own scripts! :)

A function to delete a cookie

다른 유용한 쿠키 핸들링 함수는 아래처럼 제공한다. 이 함수는 "delete" 하도록 하며 쿠키 파기 데이트 설정에 의해서 쿠키에 의해 제공된다.

function delete_cookie ( cookie_name )
{
  var cookie_date = new Date ( );  // current date & time
  cookie_date.setTime ( cookie_date.getTime() - 1 );
  document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}

이 함수를 이용하여 쿠키의 내용을 삭제할 수 잇다.

delete_cookie ( "username" );

당신은 다음과 같은 형식으로 우리의 스크립트를 이용하여 쿠키 내용을 삭제할 수 있다.

Retrieving cookies

이전에 설정한 쿠키를 리트리브 하기 위헤서 현재 document에 document.cookie를 이용하여 처리할 수 있다.

var x = document.cookie;

이것은 name/value의 리스트를 포함한다. 세미콜론으로 분리되어 모든 쿠키값이 반환된다.

"username=John; password=abc123"

예제에서 2개의 쿠키값을 볼 수 잇다. username으로 John이 저장되어 있고, password에 abc123이 된다.

A function to retrieve a cookie

보통 우리는 적합한 시간에 쿠키 값을 읽기를 원한다. 우리의 모든 쿠키가 다 도움이 되는 것은 아니다. 그래서 여기에 다른 유용한 함수를 이용하여 document.cookie 스트링을 파싱할 수 있따. 그리고 우리가 필요로 하는 쿠키값을 반환할 수 있다.

function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );

  if ( results )
    return ( unescape ( results[2] ) );
  else
    return null;
}

Using the function is easy. For example, to retrieve the value of the username cookie:

함수를 이용하는 것은 쉽다. 예제에서는 username 쿠키의 값을 검색할 수 있다.

var x = get_cookie ( "username" );

A simple example

이 예제에서, 우리는 페이지 프롬프트를 생성할 것이다. 여기에는 이름과 당신이 방문한 시간이 저장된다. 그리고 당신의 이름을 쿠키에 저장하고 당신의 이름을 다음 차례에 방문할때 표시한다.

the page를 새로운 윈도우에서 오픈하면 첫번째로 방문한 시간을 나타낸다. 이름을 요구하며, 쿠키에 저장된다. 만약 어떠한 시점에 방문 페이지를 선택하면 이페이지는 쿠키로부터 이름을 가져와서 페이지를 디스플레이 하게 된다.

Try closing the window that pops up, then opening it again in a new window. Notice that this time it still displays the user name that it retrieved from the cookie!

The cookie is given an expiry date of 1 year from the current date, which means that the browser will remember your name even if you close it down and re-open it.

You can clear the cookie by clicking on the Forget about me! link, which calls our delete_cookie() function and then refreshes the page to prompt you for a name again.

You can view all the JavaScript source for the example page by switching to the other browser window now and using the View Source option in your browser. Here's the main part of the code:

if ( ! get_cookie ( "username" ) )
{
  var username = prompt ( "Please enter your name", "" );

  if ( username )
  {
    var current_date = new Date;
    var cookie_year = current_date.getFullYear ( ) + 1;
    var cookie_month = current_date.getMonth ( );
    var cookie_day = current_date.getDate ( );
    set_cookie ( "username", username, cookie_year, cookie_month, cookie_day );
  }
}
else
{
  var username = get_cookie ( "username" );
  document.write ( "Hi " + username + ", welcome to my website!" );
  document.write ( "<br><a href=\"javascript:delete_cookie('username');
                    document.location.reload ( );\">
                    Forget about me!</a>" );
}

Notice how the function uses our get_cookie(), set_cookie() and delete_cookie() library functions to do the hard work!

This tutorial has shown you how to use cookies in JavaScript to store information about your visitors. You can use the supplied functions in your own scripts to set, retrieve and delete cookies easily. Enjoy! :)