JavaScript Cookies
What is a Cookie?
cookie는 방문자 컴퓨터에 저장된 변수이다. 각각의 컴퓨터에 브라우져를 통해 cookie 정보를 저장할 수 있다. JavaScript를 통해 cookie 변수를 만들고 사용할 수 있다.
Create and Store a Cookie
방문자가 사이트에 처음 방문했다면 쿠키를 만들어 넣을 수 있다. 방문자에게 이름을 받았다면 그 이름을 쿠키에 넣을 수 있다. 그리고 다음번 방문 시, 같은 페이지에 접근했을 때, 방문자에게 인사 메시지를 보여줄 수 있는 것이다.
자, 쿠키를 생성해서 방문자 컴퓨터에 남기는 함수를 보도록 하자.
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
인자로 쿠키명, 쿠키값, 쿠키 만료일자를 받는다.
위 함수 내용은 만료일자를 검증하여 쿠키를 남기는 구문으로 되어 있다. 그런 후 document.cookie 오브젝트를 통해 쿠기값과 만료일자를 저장한다.
아래는 저장한 쿠키값을 꺼내는 내용이다.
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
이 함수는 배열을 사용해서 쿠키명과 값을 가져오고 있다.
마지막으로 쿠키가 있다면 그걸 이용해서 인사 메시지를 뿌려야 한다. 그리고 쿠키가 없다면 prompt box를 이용하여 방문자의 이름을 받아서 새로운 쿠키를 저장한다. setCookie() 함수를 이용하여 만료일자를 365일 경과한 후로 쿠키를 생성하게 된다.
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("Welcome again " + username);
}
else
{
username=prompt("Please enter your name:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("Welcome again " + username);
}
else
{
username=prompt("Please enter your name:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
아래는 위 예제를 하나의 파일로 만든 것이다.
Example
<!DOCTYPE html>
<html>
<head>
<script>
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("Welcome again " + username);
}
else
{
username=prompt("Please enter your name:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>
<html>
<head>
<script>
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("Welcome again " + username);
}
else
{
username=prompt("Please enter your name:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>
Try it yourself »
이 예제는 checkCookie() 함수를 페이지가 로드되었을 때 실행할 수 있게 하여야 한다.
'프로그래밍 > JavaScript' 카테고리의 다른 글
| JavaScript 타이밍 제어, Timing 이벤트 (2) | 2013.01.05 |
|---|---|
| JavaScript Number 객체 (0) | 2013.01.05 |
| JavaScript Date 객체 (2) | 2013.01.05 |
| JavaScript 배열 객체, Array (2) | 2013.01.05 |
| JavaScript History 객체 (0) | 2013.01.05 |
| JavaScript Location 객체 (0) | 2013.01.05 |
| JavaScript 스크린 객체 (0) | 2013.01.05 |
| JavaScript Navigator 객체 (0) | 2013.01.05 |