웹페이지의 팝업 호출시 많이 쓰이는 자바스크립트 쿠키 기능에 대해 알아보겠습니다.
쿠키란?
웹브라우저가 가지고 있는 데이터로써 보통 사용자 정보를 담고 있습니다. 웹브라우저를 통해 웹사이트에 접근할 때 사용자의 컴퓨터에 데이터가 저장됨.
세션과의 차이점
세션은 client 정보를 파악하기 위해 데이터를 서버에 저장하지만 쿠키는 서버의 정보를 저장하기 위해 client에 데이터를 저장합니다.
즉, 페이지 방문시 해당 페이지에 대한 쿠키 정보가 내 컴퓨터에 남게 됩니다.
쿠키 예제
이번에 만들 예제는 사이트 방문시 팝업이 뜨게 되는데요. 여기서 일주일간 보지 않기 버튼을 눌렀을 경우 client에 해당 쿠키정보를 저장하게 됩니다.
그리고 사용자가 다시 페이지를 방문하면 쿠키를 통해 접속 정보를 확인하여 팝업을 뜨지 않게 합니다.
쿠키를 알기위해선 정말 좋은 예제이니 javascript를 이용하여 쿠키 생성 삭제 방법에 대해서 알아보도록 하겠습니다.
예제는 이전에 포스팅했던 팝업 예제을 이용해서 진행하겠습니다.
팝업 페이지
<script type="text/javascript"> function setCookie(cname, value) { var today = new Date(); today.setMilliseconds(10000); //10초 document.cookie = cname+"="+escape(value)+"; path=/; expires="+today.toUTCString()+";"; window.close(); } </script> </head> <body> <center> <a onclick="setCookie('myname', 'onebin')" style="color: red">10초 동안 열지 않기</a> </center> </body>
메인 페이지
<script type="text/javascript"> function go_pop(){ var noticeCookie=getCookie("myname"); if (noticeCookie != "onebin"){ window.open("pop.jsp","new","width=370, height=360, resizable=no, scrollbars=no, status=no, location=no, directories=no;"); }else{ alert("쿠키가 만료되지 않았습니다."); } } function getCookie(name) { if(document.cookie.length != 0){ //쿠키 체크 var start = name.length + 1; //myname=onebin의 =이후 값을 가져오기 위한 변수 var result = document.cookie.substring(start); // onebin 저장 return result; //리턴 }else{ return 0; } } </script> <body onload="go_pop()">
페이지를 실행 시키면 onload를 통해 해당 팝업이 열리게 됩니다. 그리고 10초 동안 열지 않기를 누르면 setCookie 펑션이 작동하게 되고 오늘 날짜에 +10초가 추가된 쿠키가 생성됩니다.
그리고 다시 페이지를 호출하게 되면 getCookie펑션을 호출해 myname의 value값을 리턴하게 됩니다.
이 과정에서 리턴된 값이 onebin이면 제대로 팝업이 뜨고 아니면 경고창이 뜹니다. 아직 생성한 쿠키의 만료시간이 남았기 때문에 경고창이 뜬 모습입니다.
마치며…
자바스크립트 쿠키를 사용은 거의 팝업의 유효기간에 사용되는데요. 데이터가 회손되어도 웹사이트의 데이터에 영향이 미미하기 때문입니다.
보안이나 회손되지 않아야 할 데이터를 저장할 때에는 서버에 저장되는 세션을 이용하는 것이 좋습니다.
답글 남기기