자바스크립트 쿠키관련
컨텐츠 정보
- 21,315 조회
- 5 추천
- 목록
본문
문자열 처리
쿠키를 만드려면 문자열 처리와 관련된 내용을 조금 아셔야 합니다. 필요한 내용은 indexOf()의 활용, 그리고 split()의 활용 입니다.
indexOf() 는 괄호안의 문자가 어떤 문자열의 몇번째에 나오는가를 알려주는 함수 입니다. 예를들어,
var name="myonghon";
var position1 = name.indexOf("m");
이 경우 position1 변수에는 0 이 담깁니다.
(m 이 myonghon 이라는 문자열의 첫번째자리에 나오므로 0 입니다. 컴퓨터는 0 부터 세죠. 배열을 공부하셨으면 잘 아시겠지만)
같은식으로,
var position2 = name.indexOf("g");의 경우엔 position2 변수에 4 가 담기죠.
"m" 처럼 한 자가 아니라 한 단어를 입력하는 경우 그 단어 첫글자의 위치를 리턴합니다. 예를들어,
var positon3 = name.indexOf("hon");의 경우 position3 변수에는 5 가 담깁니다.
만약 찾는 문자가 없으면 -1 을 리턴 합니다.
어떤 문자열에 특정 문자가 있는지 없는지 알아보려면 이걸 쓰면 되겠죠. 예를들어,
var address ='';
while (address.indexOf("@") == -1) {address = prompt("이메일 주소는요?", "")};
이렇게 하면 @ 가 들어간 내용을 입력할때까지 계속 이메일 주소를 묻게 됩니다. 물론 이메일 주소의 유효성 확인은 그렇게 간단한 것이 아닙니다. ^_^ 엄청 복잡하죠, 사실은..ㅋㅋ
그 다음, split()은 어떤 문자열을 split() 괄호 안에 들어있는 것을 기준으로 쪼개서 그 결과를 배열로 리턴하는 겁니다.
var name="george&paul&john&lingo";
var beatle = name.split("&");
라고 하면, beatle[0] 에는 george 가, beatle[1] 에는 paul 이, beatle[2] 에는 john 이 들어가 있게 됩니다.
쉽죠?
이제 도구는 다 갖췄으니, 쿠키를 공략해 봅시다.
쿠키를 만드는건 정말 쉽습니다.
쿠키 굽기
복잡하게 들어가면 많은 얘기가 있지만, 이번 씨리즈에서 필요한 내용 정도는 정말 간단합니다. 쿠키는 한마디로 다음과 같은 형태를 갖는 문자열에 다름 아닙니다.
쿠키이름 = 쿠키값쿠키 이름은 우리 마음대로 정하면 되는거구요. 쿠키값은 콤마, 콜론, 공백, 세미콜론이 오면 안된다는 규칙만 지키면 됩니다. 콜론이나 공백은 escape() 함수를 이용하면 적절한 형태로 변형됩니다.
이렇게 쿠키이름에 쿠키값을 할당한 다음,
document.cookie=쿠키이름;이렇게만 해주면 그 html 문서에 해당하는 쿠키가 세팅 됩니다.
<head>
<script name="javascript">
function readCookie() {
var cookie2 = document.cookie;
my_cookie = unescape(cookie2);
var cookie_value = my_cookie.split(":");
var name2 = cookie_value[1];
alert("당신이름은 " + name2 + "이군요");
}
</script>
</head>
<body onload="readCookie()">
setCookie 함수의 두번째줄은 이름을 묻는 대화상자를 띄워주는 거구요, 예를들어 myonghon 이라고 입력했다면, 그 다음 줄은 my_cookie 라는 변수에 cookie1=name%3myonghon 이라고 저장하게 됩니다. name:myonghon 이라는 문자열이 escape() 함수에 의해서 name%3myonghon 으로 바뀌는 겁니다. escape() 함수가 콜론을 "%3" 으로 바꾼것이죠. 그런데. . 이런건 전혀 신경쓸 필요가 없습니다. 그냥 콜론이나 공백등이 들어가 있는 문자열은 escape() 함수에다가 넣어줘야 쿠키에 저장된다는 것만 기억하시면 됩니다.
그 다음 줄은 my_cookie를 그 문서의 쿠키로 지정하라는 내용 입니다.
<body> 테그에는 onload="setCookie()" 를 넣어서, 그 페이지가 로딩되면서 자동으로 setCookie() 함수가 호출되도록 하면 됩니다.
다 입력하셨으면 이 html 문서를 웹브라우져에서 불러보세요.
이름을 묻는 대화상자가 뜰겁니다. 거기다가 예를들어 "myonghon" 이라고 입력을 하게 되면,
쿠키 파일에는 cookie1=name%3myonghon 이라고 저장하게 됩니다.
cookie1은 쿠키이름, = 다음 부분은 쿠키값 입니다.
이제 이 쿠키가 정말로 저장되었는지 확인을 해봅시다. 쿠키를 읽어들이는 것도 굉장히 간단합니다. 위에서 했던 과정을 반대로만 해주면 되죠.
쿠키 읽기
새로 html 문서를 하나 열고 다음과 같이 입력해 보세요.
<head>
<script name="javascript">
function readCookie() {
var cookie2 = document.cookie;
my_cookie = unescape(cookie2);
var cookie_value = my_cookie.split(":");
var name2 = cookie_value[1];
alert("당신이름은 " + name2 + "이군요");
}
</script>
</head>
<body onload="readCookie()">
함수의 두번째 줄은 쿠키를 읽어들여서 cookie2 라는 변수에 할당 하는 겁니다. 아까 저장했던 my_cookie 안에 담겨있던 쿠키값, name%3myonghon 이 cookie2 변수에 담기게 됩니다.
세번째줄은 escape() 를 통해서 변환했던 공백이나 콜론등을 다시 원상태로 (%3-->:) 되돌리는 겁니다. unescape() 니까 escape() 의 반대죠. (그런데, unescape란 영어 단어는 없습니다)
네번째줄은 그렇게 원상태로 되돌려놓은 값을 ":" 을 중심으로 쪼개고 (split)
그 다음줄에서는 쪼갠 값중에 2번째 값, 즉 콜론 다음값 (myonghon) 을 name2 변수에 담습니다.
마지막줄은 name2 에 있는 이름을 이용해서 경고상자를 띄우는 거구요.
역시 처음 예와 마찬가지로, <body> 테그에는 onload="setCookie()" 를 넣어서, 그 페이지가 로딩되면서 자동으로 readCookie() 함수가 호출되도록 하면 됩니다.
이 스크립트를 입력한 html 문서를 웹브라우져에서 불러보십시오.
경고상자가 뜨면서 위에서 입력한 이름이 보이실 겁니다.
간단하죠?
쿠키 관련 라이브러리
라이브러리씩이나 되지는 않지만, 쿠키를 만들고 읽어들일때 무척 자주 쓰이는 루틴이 있습니다. 여러 싸이트들이 다들 이 루틴을 카피해서 사용하고 있죠. 그 루틴들이 어떻게 이뤄진 것인지 하나 하나 설명해 드리겠습니다.
먼저 쿠키를 세팅하는 루틴 부터..
쿠키이름과 값만 세팅하는 경우는 앞시간에 보신것처럼 escape() 함수와 document.cookie 만 활용하면 간단하게 할 수 있었습니다. 그런데 그건 제일 간단한 쿠키의 경우일때 이야기이고, 사실은 쿠키는 여러가지 조건과 함께 세팅을 할 수 있습니다. 제일 대표적인 것이 쿠키를 '언제까지 저장할 것인가' 입니다.
쿠키는 사용자 하드디스크에 저장된다고 했는데요, 앞시간처럼 아무 값을 주지 않고 쿠키 이름과 쿠키 값만을 세팅하면 그 쿠키는 하드디스크에 실제로 저장되지는 않고 웹브라우져 창을 닫음과 동시에 사라지게 됩니다. (이런것을 쿠키가 그 '세션' 에서만 유효하다라고 합니다) 만약 쿠키를 '정말로' 하드디스크에 저장하고 싶다면 name=value 다음에 세미콜론을 써주고 expires= 란것을 붙여주면 됩니다. (name=value;expires=)
이때 expires= 다음에 써주는 시간은 반드시 표준화된 시간, 즉 GMT 로 바꿔줘야 합니다. 바꿔주는건 toGMTString() 이라는 함수가 알아서 해주니까 신경 쓰실 필요 없습니다.
예를들어 지금 현재 시간을 GMT 형식으로 한번 출력해보려면,
var today = new Date();
var mytime = today.toGMTString();
document.writeln(mytime);이렇게 해보면 7 Jan 2002 13:40:12 UTC 라고 출력됩니다. 바로 이런게 GMT 형식이죠.
그리고 '지금으로부터 얼마뒤'를 하려면 계산을 편리하게 하기 위해 모두 다 초로 고치는것이 좋습니다. 이때 주로 밀리세컨드(즉, 천분의 일초)를 사용하는데요, 이렇게 날짜(Date)를 밀리세컨드로 바꿔주는 함수가 getTime() 이라는 함수 입니다. 다음의 코드를 보시죠.
var today = new Date();
var millisec = today.getTime();
document.writeln(millisec);
지금 시간을 해보니까 1010410299350 이라고 되는군요. 그러면 지금으로부터 28일 뒤는 어떻게 될까요.
(today.getTime() + 28 * 24 * 60 * 60 * 1000);이걸 Date() 함수에 (엄밀하게 얘기하자면 Date() 객체에) 넣어주면 다시 날짜로 바꿔주게 되죠.
이제 쿠키를 세팅해 보죠. 쿠키세팅 함수는 setCookie() 이고, 퍼래미터는 name과 value, expires 입니다.
var today = new Date();
var expiry = new Date(today.getTime() + 28 * 24 * 60 * 60 * 1000);
function setCookie(name, value, expires) {
document.cookie=name + "=" + escape(value) +
((expires)? "; expires=" + expiry.toGMTString() : "");
}
쉽게 이해되시죠? expires? a : b 는 전달받은 퍼래미터에 expires 항목이 있으면 a , 없으면 b 를 택한다는 의미죠. 위의 경우 expires 항목이 있으면 ;expires=날짜 를 쿠키값뒤에 붙여주고, 없으면 "" 아무것도 안붙이는 겁니다.
쿠키 읽어들이기
먼저 약간의 설명이 필요하겠습니다. 앞에서 얘기 드린 문자열관련 함수중에 substr()이 있었죠. 이건 이렇게 사용합니다.
var myname = "paul gilbert";
var a = myname.substr(0,4);
이렇게 하면 a에는 paul이 담깁니다. 즉 substr(a,b) 라고 하면, 어떤 문자열의 a 번째 위치에서 부터 b 개를 세서 리턴 합니다. 위의 경우 첫글자부터 4글자를 세서 리턴하는 것이죠. 문자열을 셀때는 0부터 센다는것만 주의하시면 됩니다. 그 다음, indexOf 를 조금더 확장해 보겠습니다. 만약 indexOf("a",3) 이라고 하면 어떤 문자열에서 a를 찾아서 위치를 돌려주되, 3번째 글자에서 부터 찾는다는 의미 입니다. 마지막으로 length에 대해서 알아보죠. 이름 그대로 입니다. 글자수를 세서 리턴해주죠. 예를들어 위에서 a.length는 4를 리턴합니다. 정리하는 의미에서 예를 하나 들어볼까요?
var wb = "webbiz";
var b = wb.length;
b에는 6이 담깁니다.
자, 이제 쿠키를 읽는 루틴 나갑니다. 이렇게 생겼습니다.
function getCookie(name) {
var index = document.cookie.indexOf(name + "=");
if (index == -1) return null;
index = document.cookie.indexOf("=", index) + 1;
var endstr = document.cookie.indexOf(";", index);
if (endstr == -1) endstr = document.cookie.length;
return unescape(document.cookie.substring(index, endstr));
}
복잡해 보이죠?
이 함수는 쿠키 이름(name)을 던져주면 쿠키값(value)을 리턴해주는 함수 입니다. 개략적으로 설명드리자면, "name=" 다음 글자에서 부터 맨 마지막 글자까지(즉 쿠키 value)를 뽑아내서 리턴하는것 입니다. 따라서 name= 다음 글자 위치와 맨 마지막 글자 위치를 알아낸 다음 substr()을 이용해서 값 부분만 뽑아내는 것이죠.
첫줄은 쿠키이름을 받아들이는 것이구요.
그 다음줄은 쿠키를 읽어들여서 그 중에 name= 이라는 문자열의 첫글자가 몇 번째에 나오는가를 세서 그 값을 index에 담습니다. document.cookie는 쿠키를 읽어들이는 것이라고 했죠?
그 다음줄, index 가 -1 즉, name= 라는 문자열이 쿠키에 없는 경우는 그 이름에 해당하는 쿠키가 없는거니까 null 을 리턴합니다.
그 다음줄은 name= 다음 문자의 위치를 index 값에 할당합니다. name= 다음값은 당연히 그 이름에 해당하는 쿠키의 값(value)의 시작위치죠. 생각 나시나요? 쿠키는 name=value;의 형태로 되어 있다고 했었습니다.
그 다음줄은 쿠키값의 마지막 위치인 ; 을 찾아서 그 위치를 endstr 이라는 변수에 할당한다는 의미죠. 즉, document.cookie 의 마지막 위치를 endstr 이라는 값에다 담는 것입니다.
indexOf(";",index) 의 의미는 ; 의 위치를 찾되, index 값의 위치에서부터 찾아라는 의미라고 했죠? 그리고 현재 index 값은 "=" 다음값(--> 쿠키 value) 의 첫글자의 위치입니다.
그 다음줄은 만약 세미콜론이 안 나온 경우 읽어들인 쿠키의 길이를 endstr 에 할당하는 것입니다.
마지막 줄은 document.cookie 를 index 에서 부터 세서 endstr 개만큼 뽑아내서 그걸 unescape() 시키는 것입니다.
여기서 주의할 점은요, 세미콜론이 있는 경우는 0 부터 세니까 글자수 -1 개를 뽑아내게 되고, 세미콜론이 없는 경우는 글자수 만큼 뽑아내게 되니까 결국엔 세미콜론이 나오기 전까지의 문자열만 substr 해내는게 됩니다. (즉 세미콜론 앞의 쿠키 value만 뽑아내는 것이죠)
그러면 counter 라는 이름의 쿠키를 이용해서 페이지 방문횟수를 계산해보죠. 다음과 같이 해주면 됩니다.
var visits = getCookie("counter");
// counter 라는 쿠키가 있으면 그 값을 꺼내서 visits 에 담아라는 얘기 입니다
if (!visits) { // 만약 visits 가 거짓이라면, 즉 counter 라는 쿠키가 없다면
visits = 1; // visits 를 1 로 세팅하고
document.write("이 페이지에 처음 오셨군요");
} else {
// visits 값이 있다면 1 을 증가시킵니다
visits = parseInt(visits) + 1; } // parseInt() 는 정수로 바꿔주는 함수..
document.write("이 페이지에 " + visits + " 번째 오신거군요");
setCookie("counter", visits, today);
// 다시 counter 쿠키에 visits 값을 할당한 뒤 쿠키세팅
한 번 테스트 해볼까요?
보세요 !! ---->여기에 4 번째시군요
이페이지를 다시 보기(F5 또는 CTRL-R) 해보시기 바랍니다. 위 숫자가 하나씩 올라가는걸 확인하실 수 있을 겁니다. 그리고 쿠키가 저장되는 디렉토리에 가보시면 web&biz 에서 저장한 counter 쿠키를 확인하실 수 있을 겁니다.ㅋㅋㅋ
즉시 활용하실 수 있도록 소스를 정리해 드립니다.
<script language="javascript">
<!--
function getCookie(name) {
var index = document.cookie.indexOf(name + "=");
if (index == -1) return null;
index = document.cookie.indexOf("=", index) + 1;
var endstr = document.cookie.indexOf(";", index);
if (endstr == -1) endstr = document.cookie.length;
return unescape(document.cookie.substring(index, endstr));
}
var today = new Date();
var expiry = new Date(today.getTime() + 28 * 24 * 60 * 60 * 1000);
function setCookie(name, value, expires) {
document.cookie = name + "=" + escape(value) +
((expires)? "; expires=" + expiry.toGMTString() : "");
}
var visits = getCookie("counter");
if (!visits) {
visits = 1;
document.write("<p><font color=#990099>이 페이지에 처음 오셨군요</font>");
} else {
visits = parseInt(visits) + 1;
document.write("<p><font color=#990099>여기에 " + visits + " 번째시군요</font>");}
setCookie("counter", visits, today);
//-->
</script>
쿠키를 만드려면 문자열 처리와 관련된 내용을 조금 아셔야 합니다. 필요한 내용은 indexOf()의 활용, 그리고 split()의 활용 입니다.
indexOf() 는 괄호안의 문자가 어떤 문자열의 몇번째에 나오는가를 알려주는 함수 입니다. 예를들어,
var name="myonghon";
var position1 = name.indexOf("m");
이 경우 position1 변수에는 0 이 담깁니다.
(m 이 myonghon 이라는 문자열의 첫번째자리에 나오므로 0 입니다. 컴퓨터는 0 부터 세죠. 배열을 공부하셨으면 잘 아시겠지만)
같은식으로,
var position2 = name.indexOf("g");의 경우엔 position2 변수에 4 가 담기죠.
"m" 처럼 한 자가 아니라 한 단어를 입력하는 경우 그 단어 첫글자의 위치를 리턴합니다. 예를들어,
var positon3 = name.indexOf("hon");의 경우 position3 변수에는 5 가 담깁니다.
만약 찾는 문자가 없으면 -1 을 리턴 합니다.
어떤 문자열에 특정 문자가 있는지 없는지 알아보려면 이걸 쓰면 되겠죠. 예를들어,
var address ='';
while (address.indexOf("@") == -1) {address = prompt("이메일 주소는요?", "")};
이렇게 하면 @ 가 들어간 내용을 입력할때까지 계속 이메일 주소를 묻게 됩니다. 물론 이메일 주소의 유효성 확인은 그렇게 간단한 것이 아닙니다. ^_^ 엄청 복잡하죠, 사실은..ㅋㅋ
그 다음, split()은 어떤 문자열을 split() 괄호 안에 들어있는 것을 기준으로 쪼개서 그 결과를 배열로 리턴하는 겁니다.
var name="george&paul&john&lingo";
var beatle = name.split("&");
라고 하면, beatle[0] 에는 george 가, beatle[1] 에는 paul 이, beatle[2] 에는 john 이 들어가 있게 됩니다.
쉽죠?
이제 도구는 다 갖췄으니, 쿠키를 공략해 봅시다.
쿠키를 만드는건 정말 쉽습니다.
쿠키 굽기
복잡하게 들어가면 많은 얘기가 있지만, 이번 씨리즈에서 필요한 내용 정도는 정말 간단합니다. 쿠키는 한마디로 다음과 같은 형태를 갖는 문자열에 다름 아닙니다.
쿠키이름 = 쿠키값쿠키 이름은 우리 마음대로 정하면 되는거구요. 쿠키값은 콤마, 콜론, 공백, 세미콜론이 오면 안된다는 규칙만 지키면 됩니다. 콜론이나 공백은 escape() 함수를 이용하면 적절한 형태로 변형됩니다.
이렇게 쿠키이름에 쿠키값을 할당한 다음,
document.cookie=쿠키이름;이렇게만 해주면 그 html 문서에 해당하는 쿠키가 세팅 됩니다.
<head>
<script name="javascript">
function readCookie() {
var cookie2 = document.cookie;
my_cookie = unescape(cookie2);
var cookie_value = my_cookie.split(":");
var name2 = cookie_value[1];
alert("당신이름은 " + name2 + "이군요");
}
</script>
</head>
<body onload="readCookie()">
setCookie 함수의 두번째줄은 이름을 묻는 대화상자를 띄워주는 거구요, 예를들어 myonghon 이라고 입력했다면, 그 다음 줄은 my_cookie 라는 변수에 cookie1=name%3myonghon 이라고 저장하게 됩니다. name:myonghon 이라는 문자열이 escape() 함수에 의해서 name%3myonghon 으로 바뀌는 겁니다. escape() 함수가 콜론을 "%3" 으로 바꾼것이죠. 그런데. . 이런건 전혀 신경쓸 필요가 없습니다. 그냥 콜론이나 공백등이 들어가 있는 문자열은 escape() 함수에다가 넣어줘야 쿠키에 저장된다는 것만 기억하시면 됩니다.
그 다음 줄은 my_cookie를 그 문서의 쿠키로 지정하라는 내용 입니다.
<body> 테그에는 onload="setCookie()" 를 넣어서, 그 페이지가 로딩되면서 자동으로 setCookie() 함수가 호출되도록 하면 됩니다.
다 입력하셨으면 이 html 문서를 웹브라우져에서 불러보세요.
이름을 묻는 대화상자가 뜰겁니다. 거기다가 예를들어 "myonghon" 이라고 입력을 하게 되면,
쿠키 파일에는 cookie1=name%3myonghon 이라고 저장하게 됩니다.
cookie1은 쿠키이름, = 다음 부분은 쿠키값 입니다.
이제 이 쿠키가 정말로 저장되었는지 확인을 해봅시다. 쿠키를 읽어들이는 것도 굉장히 간단합니다. 위에서 했던 과정을 반대로만 해주면 되죠.
쿠키 읽기
새로 html 문서를 하나 열고 다음과 같이 입력해 보세요.
<head>
<script name="javascript">
function readCookie() {
var cookie2 = document.cookie;
my_cookie = unescape(cookie2);
var cookie_value = my_cookie.split(":");
var name2 = cookie_value[1];
alert("당신이름은 " + name2 + "이군요");
}
</script>
</head>
<body onload="readCookie()">
함수의 두번째 줄은 쿠키를 읽어들여서 cookie2 라는 변수에 할당 하는 겁니다. 아까 저장했던 my_cookie 안에 담겨있던 쿠키값, name%3myonghon 이 cookie2 변수에 담기게 됩니다.
세번째줄은 escape() 를 통해서 변환했던 공백이나 콜론등을 다시 원상태로 (%3-->:) 되돌리는 겁니다. unescape() 니까 escape() 의 반대죠. (그런데, unescape란 영어 단어는 없습니다)
네번째줄은 그렇게 원상태로 되돌려놓은 값을 ":" 을 중심으로 쪼개고 (split)
그 다음줄에서는 쪼갠 값중에 2번째 값, 즉 콜론 다음값 (myonghon) 을 name2 변수에 담습니다.
마지막줄은 name2 에 있는 이름을 이용해서 경고상자를 띄우는 거구요.
역시 처음 예와 마찬가지로, <body> 테그에는 onload="setCookie()" 를 넣어서, 그 페이지가 로딩되면서 자동으로 readCookie() 함수가 호출되도록 하면 됩니다.
이 스크립트를 입력한 html 문서를 웹브라우져에서 불러보십시오.
경고상자가 뜨면서 위에서 입력한 이름이 보이실 겁니다.
간단하죠?
쿠키 관련 라이브러리
라이브러리씩이나 되지는 않지만, 쿠키를 만들고 읽어들일때 무척 자주 쓰이는 루틴이 있습니다. 여러 싸이트들이 다들 이 루틴을 카피해서 사용하고 있죠. 그 루틴들이 어떻게 이뤄진 것인지 하나 하나 설명해 드리겠습니다.
먼저 쿠키를 세팅하는 루틴 부터..
쿠키이름과 값만 세팅하는 경우는 앞시간에 보신것처럼 escape() 함수와 document.cookie 만 활용하면 간단하게 할 수 있었습니다. 그런데 그건 제일 간단한 쿠키의 경우일때 이야기이고, 사실은 쿠키는 여러가지 조건과 함께 세팅을 할 수 있습니다. 제일 대표적인 것이 쿠키를 '언제까지 저장할 것인가' 입니다.
쿠키는 사용자 하드디스크에 저장된다고 했는데요, 앞시간처럼 아무 값을 주지 않고 쿠키 이름과 쿠키 값만을 세팅하면 그 쿠키는 하드디스크에 실제로 저장되지는 않고 웹브라우져 창을 닫음과 동시에 사라지게 됩니다. (이런것을 쿠키가 그 '세션' 에서만 유효하다라고 합니다) 만약 쿠키를 '정말로' 하드디스크에 저장하고 싶다면 name=value 다음에 세미콜론을 써주고 expires= 란것을 붙여주면 됩니다. (name=value;expires=)
이때 expires= 다음에 써주는 시간은 반드시 표준화된 시간, 즉 GMT 로 바꿔줘야 합니다. 바꿔주는건 toGMTString() 이라는 함수가 알아서 해주니까 신경 쓰실 필요 없습니다.
예를들어 지금 현재 시간을 GMT 형식으로 한번 출력해보려면,
var today = new Date();
var mytime = today.toGMTString();
document.writeln(mytime);이렇게 해보면 7 Jan 2002 13:40:12 UTC 라고 출력됩니다. 바로 이런게 GMT 형식이죠.
그리고 '지금으로부터 얼마뒤'를 하려면 계산을 편리하게 하기 위해 모두 다 초로 고치는것이 좋습니다. 이때 주로 밀리세컨드(즉, 천분의 일초)를 사용하는데요, 이렇게 날짜(Date)를 밀리세컨드로 바꿔주는 함수가 getTime() 이라는 함수 입니다. 다음의 코드를 보시죠.
var today = new Date();
var millisec = today.getTime();
document.writeln(millisec);
지금 시간을 해보니까 1010410299350 이라고 되는군요. 그러면 지금으로부터 28일 뒤는 어떻게 될까요.
(today.getTime() + 28 * 24 * 60 * 60 * 1000);이걸 Date() 함수에 (엄밀하게 얘기하자면 Date() 객체에) 넣어주면 다시 날짜로 바꿔주게 되죠.
이제 쿠키를 세팅해 보죠. 쿠키세팅 함수는 setCookie() 이고, 퍼래미터는 name과 value, expires 입니다.
var today = new Date();
var expiry = new Date(today.getTime() + 28 * 24 * 60 * 60 * 1000);
function setCookie(name, value, expires) {
document.cookie=name + "=" + escape(value) +
((expires)? "; expires=" + expiry.toGMTString() : "");
}
쉽게 이해되시죠? expires? a : b 는 전달받은 퍼래미터에 expires 항목이 있으면 a , 없으면 b 를 택한다는 의미죠. 위의 경우 expires 항목이 있으면 ;expires=날짜 를 쿠키값뒤에 붙여주고, 없으면 "" 아무것도 안붙이는 겁니다.
쿠키 읽어들이기
먼저 약간의 설명이 필요하겠습니다. 앞에서 얘기 드린 문자열관련 함수중에 substr()이 있었죠. 이건 이렇게 사용합니다.
var myname = "paul gilbert";
var a = myname.substr(0,4);
이렇게 하면 a에는 paul이 담깁니다. 즉 substr(a,b) 라고 하면, 어떤 문자열의 a 번째 위치에서 부터 b 개를 세서 리턴 합니다. 위의 경우 첫글자부터 4글자를 세서 리턴하는 것이죠. 문자열을 셀때는 0부터 센다는것만 주의하시면 됩니다. 그 다음, indexOf 를 조금더 확장해 보겠습니다. 만약 indexOf("a",3) 이라고 하면 어떤 문자열에서 a를 찾아서 위치를 돌려주되, 3번째 글자에서 부터 찾는다는 의미 입니다. 마지막으로 length에 대해서 알아보죠. 이름 그대로 입니다. 글자수를 세서 리턴해주죠. 예를들어 위에서 a.length는 4를 리턴합니다. 정리하는 의미에서 예를 하나 들어볼까요?
var wb = "webbiz";
var b = wb.length;
b에는 6이 담깁니다.
자, 이제 쿠키를 읽는 루틴 나갑니다. 이렇게 생겼습니다.
function getCookie(name) {
var index = document.cookie.indexOf(name + "=");
if (index == -1) return null;
index = document.cookie.indexOf("=", index) + 1;
var endstr = document.cookie.indexOf(";", index);
if (endstr == -1) endstr = document.cookie.length;
return unescape(document.cookie.substring(index, endstr));
}
복잡해 보이죠?
이 함수는 쿠키 이름(name)을 던져주면 쿠키값(value)을 리턴해주는 함수 입니다. 개략적으로 설명드리자면, "name=" 다음 글자에서 부터 맨 마지막 글자까지(즉 쿠키 value)를 뽑아내서 리턴하는것 입니다. 따라서 name= 다음 글자 위치와 맨 마지막 글자 위치를 알아낸 다음 substr()을 이용해서 값 부분만 뽑아내는 것이죠.
첫줄은 쿠키이름을 받아들이는 것이구요.
그 다음줄은 쿠키를 읽어들여서 그 중에 name= 이라는 문자열의 첫글자가 몇 번째에 나오는가를 세서 그 값을 index에 담습니다. document.cookie는 쿠키를 읽어들이는 것이라고 했죠?
그 다음줄, index 가 -1 즉, name= 라는 문자열이 쿠키에 없는 경우는 그 이름에 해당하는 쿠키가 없는거니까 null 을 리턴합니다.
그 다음줄은 name= 다음 문자의 위치를 index 값에 할당합니다. name= 다음값은 당연히 그 이름에 해당하는 쿠키의 값(value)의 시작위치죠. 생각 나시나요? 쿠키는 name=value;의 형태로 되어 있다고 했었습니다.
그 다음줄은 쿠키값의 마지막 위치인 ; 을 찾아서 그 위치를 endstr 이라는 변수에 할당한다는 의미죠. 즉, document.cookie 의 마지막 위치를 endstr 이라는 값에다 담는 것입니다.
indexOf(";",index) 의 의미는 ; 의 위치를 찾되, index 값의 위치에서부터 찾아라는 의미라고 했죠? 그리고 현재 index 값은 "=" 다음값(--> 쿠키 value) 의 첫글자의 위치입니다.
그 다음줄은 만약 세미콜론이 안 나온 경우 읽어들인 쿠키의 길이를 endstr 에 할당하는 것입니다.
마지막 줄은 document.cookie 를 index 에서 부터 세서 endstr 개만큼 뽑아내서 그걸 unescape() 시키는 것입니다.
여기서 주의할 점은요, 세미콜론이 있는 경우는 0 부터 세니까 글자수 -1 개를 뽑아내게 되고, 세미콜론이 없는 경우는 글자수 만큼 뽑아내게 되니까 결국엔 세미콜론이 나오기 전까지의 문자열만 substr 해내는게 됩니다. (즉 세미콜론 앞의 쿠키 value만 뽑아내는 것이죠)
그러면 counter 라는 이름의 쿠키를 이용해서 페이지 방문횟수를 계산해보죠. 다음과 같이 해주면 됩니다.
var visits = getCookie("counter");
// counter 라는 쿠키가 있으면 그 값을 꺼내서 visits 에 담아라는 얘기 입니다
if (!visits) { // 만약 visits 가 거짓이라면, 즉 counter 라는 쿠키가 없다면
visits = 1; // visits 를 1 로 세팅하고
document.write("이 페이지에 처음 오셨군요");
} else {
// visits 값이 있다면 1 을 증가시킵니다
visits = parseInt(visits) + 1; } // parseInt() 는 정수로 바꿔주는 함수..
document.write("이 페이지에 " + visits + " 번째 오신거군요");
setCookie("counter", visits, today);
// 다시 counter 쿠키에 visits 값을 할당한 뒤 쿠키세팅
한 번 테스트 해볼까요?
보세요 !! ---->여기에 4 번째시군요
이페이지를 다시 보기(F5 또는 CTRL-R) 해보시기 바랍니다. 위 숫자가 하나씩 올라가는걸 확인하실 수 있을 겁니다. 그리고 쿠키가 저장되는 디렉토리에 가보시면 web&biz 에서 저장한 counter 쿠키를 확인하실 수 있을 겁니다.ㅋㅋㅋ
즉시 활용하실 수 있도록 소스를 정리해 드립니다.
<script language="javascript">
<!--
function getCookie(name) {
var index = document.cookie.indexOf(name + "=");
if (index == -1) return null;
index = document.cookie.indexOf("=", index) + 1;
var endstr = document.cookie.indexOf(";", index);
if (endstr == -1) endstr = document.cookie.length;
return unescape(document.cookie.substring(index, endstr));
}
var today = new Date();
var expiry = new Date(today.getTime() + 28 * 24 * 60 * 60 * 1000);
function setCookie(name, value, expires) {
document.cookie = name + "=" + escape(value) +
((expires)? "; expires=" + expiry.toGMTString() : "");
}
var visits = getCookie("counter");
if (!visits) {
visits = 1;
document.write("<p><font color=#990099>이 페이지에 처음 오셨군요</font>");
} else {
visits = parseInt(visits) + 1;
document.write("<p><font color=#990099>여기에 " + visits + " 번째시군요</font>");}
setCookie("counter", visits, today);
//-->
</script>
관련자료
-
링크
댓글 0
등록된 댓글이 없습니다.
