다음부터 이 창을 띄우지 않음
2001. 4. 9.
개 요
어느 정도 규모가 있는 사이트에서는(심지어는 개인 홈페이지에서도) 중요한 공지사항이 있을 때에는 별도의 작은 창을 띄워서 해당 내용을 표시하는 경우가 많다. 이러한 별도의 창은 처음 접속하는 사용자인 경우에는 필요한 경우가 많지만, 같은 내용을 여러 번 보는 것을 방지하기 위하여 자체적으로 "다음부터 이 창을 띄우지 않음"과 같은 선택 옵션을 제공하는 경우가 많다. 이러한 기능을 구현하기 위하여 CGI와 DB를 사용하는 경우도 있지만, 쿠키와 자바스크립트만을 이용해서도 같은 효과를 거둘 수 있다.
쿠키 다루기
쿠키를 제어하는 함수를 제작하기 전에, 쿠키의 구조부터 살펴보도록 하겠다. 쿠키는 일반적으로 다음과 같은 형태를 가지는 일련의 문자열로 구성되어 있다.
쿠키변수=쿠키값; path=유효한디렉토리; expires=만료일
쿠키를 참조하는 객체는 자바스크립트에서 document.cookie 객체이며, 이를 이용하여 쿠키를 설정하고 값을 참조하는 함수를 다음과 같이 범용적인 용도로 작성할 수 있다.
function setCookie (name, value, expires) {
document.cookie = name + "=" + escape (value) +
"; path=/; expires=" + expires.toGMTString();
}
function getCookie(Name) {
var search = Name + "="
if (document.cookie.length > 0) { // 쿠키가 설정되어 있다면
offset = document.cookie.indexOf(search)
if (offset != -1) { // 쿠키가 존재하면
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset)
// 쿠키 값의 마지막 위치 인덱스 번호 설정
if (end == -1)
end = document.cookie.length
return unescape(document.cookie.substring(offset, end))
}
}
}
쿠키로 제어하는 공지창 호출
이제, 특정 쿠키의 값에 따라서 새 창을 열 것인지의 여부를 결정하여 수행하는 함수를 작성해보자. 쿠키변수의 이름은 notice로 하고, 이 notice의 값이 deny이면 공지 창을 띄우지 않는 기능을 가진 openNotice() 함수를 만든다.
function openNotice() {
if (getCookie("notice") != "deny") {
window.open("notice.htm","notice",
"width=320,height=240,resizable=yes");
}
}
위의 함수는 첫 페이지에서 onLoad 이벤트 핸들러에 연결하여 사용할 수 있다. 이제 열리는 대상 창에서 사용자가 앞으로 이 창을 띄우지 않는 것을 선택하는 폼을 구성한다.
<form name="notice"> <input type="checkbox" name="neveropen"> 다음부터 이 창을 열지 않음 <input type="submit" value="확 인" onClick="Setting(document.notice)"> </form>
Setting() 함수의 용도는 쿠키변수인 notice에 deny라는 값을 대입시켜서 쿠키를 설정하는 기능이며, 쿠키가 설정된 다음에는 해당 창을 닫는다.
function Setting(form) {
var expdate = new Date();
expdate.setTime(expdate.getTime() + 1000 * 3600 * 24 * 365); // 365일
if (form.neveropen.checked) {
setCookie('notice', "deny", expdate);
}
window.close();
}
만료일의 경우에는 현재 시각을 기준으로 하여 1년 이후까지를 유효일로 설정하였다. 이 수치를 조정하여 공지사항을 띄우지 않을 기간을 마음대로 조정할 수 있다. 또한, 새로운 공지사항인 경우에는 deny가 아닌 새로운 값이나 새로운 쿠키 변수명을 사용하여 활용할 수도 있으므로, 실제로 이 코드를 참조하여 적용할 때에는 쿠키변수명과 쿠키의 값을 용도에 맞게 변경해서 사용해야 할 것이다.
최종 소스파일
지금까지 설명한 메인화면 코드와 공지창 코드 전체를 정리하면 다음과 같다.
메인 화면
<html>
<head>
<title>쿠키를 이용한 새창 제어</title>
<script language="javascript">
function getCookie(Name) {
var search = Name + "="
if (document.cookie.length > 0) { // 쿠키가 설정되어 있다면
offset = document.cookie.indexOf(search)
if (offset != -1) { // 쿠키가 존재하면
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset)
// 쿠키 값의 마지막 위치 인덱스 번호 설정
if (end == -1)
end = document.cookie.length
return unescape(document.cookie.substring(offset, end))
}
}
}
function openNotice() {
if (getCookie("notice") != "deny") {
window.open("notice.htm","notice",
"width=320,height=240,resizable=yes");
}
}
</script>
</head>
<body onLoad="openNotice()">
<h1>쿠키를 이용한 새창 제어</h1>
</body>
</html>
공지사항 화면
<html>
<head>
<title>공지사항</title>
<script language="JavaScript">
function setCookie (name, value, expires) {
document.cookie = name + "=" + escape (value) +
"; path=/; expires=" + expires.toGMTString();
}
function Setting(form) {
var expdate = new Date();
expdate.setTime(expdate.getTime() + 1000 * 3600 * 24 * 365); // 365일
if (form.neveropen.checked) {
setCookie('notice', "deny", expdate);
}
window.close();
}
</script>
</head>
<body>
<h1>공지사항</h1>
<form name="notice">
<input type="checkbox" name="neveropen">
다음부터 이 창을 열지 않음
<input type="submit" value="확 인" onClick="Setting(document.notice)">
</form>
</body>
</html>
