티스토리 뷰
쿠키를 이용한 팝업창 제어
아래 소스는 쿠키를 이용해 자바스크립트로 팝업창을 제어하는 기능이다.
popupTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쿠키 예제</title>
<script type="text/javascript">
window.onload = pageLoad; //웹 페이지가 로드할 때 pageLoad 함수를 호출한다.
function pageLoad() {
notShowPop = getCookieValue();
if (notShowPop != "true") {
window
.open(
"popUp.html",
"pop",
"width=400,height=500,history=no,resizable=no,status=no,scrollbars=yes,menubar=no");
}
}
function getCookieValue() {
var result = "false";
if (document.cookie != "") {
cookie = document.cookie.split(";");
for (var i = 0; i < cookie.length; i++) {
element = cookie[i].split("=");
value = element[0];
value = value.replace(/^\s*/, '');
if (value == "notShowPop") {
result = element[1];
}
}
return result;
}
}
function deleteCookie() {
document.cookie = "notShowPop = " + "false" + ";path=/; expires-1";
}
</script>
</head>
<body>
<form>
<input type=button value="쿠키삭제" onclick="deleteCookie()">
</form>
</body>
</html>popUp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function setPopUpStart(obj) {
if (obj.checked == true) {
var expireDate = new Date();
var days = 1;
expireDate.setDate(expireDate.getDate + days); // 유효시간을 하루로 설정한다
document.cookie = "notShowPop=" + "true" + ";path=/; expires="
+ expireDate.toGMTString();
// expires에 설정한 날짜가 지나면 쿠키는 자동으로 삭제된다.
window.close();
}
}
</script>
<title>쿠키 예제</title>
</head>
<body>
알림 팝업창입니다.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<form>
<input type=checkbox onclick="setPopUpStart(this)">오늘 더 이상 팝업창
띄우지 않기
</form>
</body>
</html>
실행 결과
- 브라우저 최초 접속 시 팝업창을 나타낸다.
- 오늘 더 이상 팝업창 띄우지 않기를 클릭하면 더 이상 팝업이 나타나지 않고, 새로고침을 눌러도 팝업창이 나타나지 않는다.
- 쿠키삭제를 클릭 후 새로고침을 누르면 팝업창이 다시 나타난다.
012
본 포스팅은 “자바 웹을 다루는 기술/이병승 저”를 읽고 학습한 내용을 정리한 것
댓글