자바스크립트(Javascript) 쿠키(Cookies) 란 무엇인가

자바스크립트

자바스크립트(Javascript) 쿠키(Cookies) 란 무엇인가

 

환경: Internet Explorer 11

 

쿠키란 사용자가 웹사이트를 방문할 경우 해당 사이트에서 사용자의 컴퓨터에 설치하는 기록 정보들을 말합니다. 쿠키 같은 상태 정보는 서버에 저장되지 않고 로컬에서 관리합니다. 이런 쿠키 정보는 다른 페이지들 사이의 세션정보를 유지하는데 아주 유용하며 웹사이트를 방문한 사용자의 성향을 분석하거나 통계에 필요한 정보를 추적 관리하는데도 사용하고 있습니다. 웹 개발할 때 많이 사용하는 만큼 기본 사용법은 숙지하고 있어야겠죠.

 

서버에서 저장하는 쿠키의 형태는 키=값 형태로 이루어져 있습니다. 이것은 사용자 컴퓨터에 텍스트 형태로 저장이 됩니다. 보통 방문자가 다른 페이지로 이동 했을 때 브라우저가 서버에서 방문자 쿠키를 보내게 됩니다. 서버는 이것을 기억하고 있다가 동일한 사용자임을 판단하는 것입니다. 쿠기는 아래 5가지 키와 값을 저장할 수 있습니다. 

  •          유효기간(Expires) : 쿠키의 만료날짜를 설정합니다. 이것이 비어있다면 방문자가 브라우저를 종료하게 되면 쿠키가 만료됩니다.

  •         도메인(Domain) : 사이트의 도메인 이름입니다.

  •         경로(Path) : 쿠키가 저장되는 디렉토리나 웹페이지 경로를 나타냅니다.

  •         보안(Secure) : 이 필드에 단어가 포함될 경우 안점함을 보장합니다.

  •         이름= : 실질적인 쿠키 설정값이 되는데 키와 값의 쌍으로 저장이 되게 됩니다. 

쿠키는 원래 CGI 프로그램에서 데이터가 자동으로 웹 브라우저와 서버사이에 값을 전송할 수 있도록 설계되었던 것입니다. 자바스크립트는 이런 쿠키의 구성요소들을 저장,삭제, 수정 할 수가 있는 것이죠.

 

쿠키의 저장방법

 

쿠키를 저장하는 가장 간단한 방법은 document.cookie 오브젝트에 스트링으로 값을 저장하는 것입니다. 문법은 다음과 같습니다.

 

document.cookie = "key1=value1;key2=value2;expires=date";

 

여기에서 expires 는 위에서 만료시간을 나타냅니다. 날짜나 시간이 들어가게 되며 시간이 지나면 쿠키값을 읽어들 일수 없습니다. 그리고 키=값을 여러 개 들어가는 경우 세미콜론 “;” 으로 구분해서 넣습니다. 아래는 간단한 샘플입니다. 에디터 박스에 값을 넣고 버튼을 클릭하게 되면 Name 변수에 그 값이 저장하는 구조 입니다.

 

<html>

<head>

<script type="text/javascript">

<!--

function WriteCookie()

{

   if( document.myform.customer.value == "" ){

      alert("Enter some value!");

      return;

   }

 

   cookievalue= escape(document.myform.customer.value) + ";";

   document.cookie="name=" + cookievalue;

   alert("쿠키 Cookies : " + "name=" + cookievalue );

}

//-->

</script>

</head>

<body>

<form name="myform" action="">

이름입력 : <input type="text" name="customer"/>

<input type="button" value="쿠키셋팅" onclick="WriteCookie();"/>

</form>

</body>

</html>


자바스크립트(Javascript) 쿠키(Cookies) 란 무엇인가

 

쿠키값 읽기

 

위에서 저장한 쿠키값을 읽어 보도록 하겠습니다. 읽는 것은 간단합니다. Document.cookie 에 오브젝트로 저장 되어 있기 때문에 바로 읽어 들이면 되고 하나씩 추출하려면 세미콜론 split 함수를 이용해 분리합니다. 아래 소스에서 첫 번째 split 는 세미콜론으로 구분되어 있는 키=값을 분리하는 과정이고 두 번째 split 는 키=값을 따로 분리하는 것입니다.

 

<html>

<head>

<script type="text/javascript">

<!--

function ReadCookie()

{

   var allcookies = document.cookie;

   alert("모든쿠키값 : " + allcookies );

 

   // Get all the cookies pairs in an array

   cookiearray  = allcookies.split(';');

 

   // Now take key value pair out of this array

   for(var i=0; i<cookiearray.length; i++){

      name = cookiearray[i].split('=')[0];

      value = cookiearray[i].split('=')[1];

      alert(" : " + name + " , : " + value);

   }

}

//-->

</script>

</head>

<body>

<form name="myform" action="">

<input type="button" value="Get Cookie" onclick="ReadCookie()"/>

</form>

</body>

</html>

 

그림은 1번에서 저장한 쿠키값을 읽어 와서 보여 주는 결과 화면입니다. 키가 name 이고 값이 gon 이네요

자바스크립트(Javascript) 쿠키(Cookies) 란 무엇인가


저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군