728x90
팝업창 제어는 서버에서 쿠키를 다루지 않고 자바스크립트를 이용해 쿠키에 직접 접근함
<!-- 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();
window.close();
}
}
</script>
</head>
<body>
알림 팝업창입니다.
<br><br><br><br><br><br><br>
<form>
<input type="checkbox" onClick="setPopUpStart(this)">오늘 더 이상 팝업창 띄우지 않기
</form>
</body>
</html>오늘 더 이상 팝업창 띄우지 않기에 체크하면 자바스크립트 함수인 setPopUpStart( ) 함수를 호출해 notShowPop의 값을 true로 설정하여 재접속 시 팝업창을 띄우지 않게 설정함
<!-- popupTest.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트에서 쿠키 사용</title>
<script type="text/javascript">
window.onload = 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>웹 페이지가 브라우저에 로드될 때 pageLoad( ) 함수를 호출한 후 쿠키에 접근해 팝업창 관련 정보를 가져온다.
getCookieValue( ) 함수를 호출해 쿠키 이름 notShowPop의 값이 true가 아니면 팝업창을 나타내고, notShowPop의 값이 true면 팝업창을 나타내지 않는다.
브라우저로 최초 popupTest.html을 요청하면 팝업(popUp.html)이 뜬다.
오늘 더 이상 팝업창 띄우지 않기에 체크 후 새로고침을 하면 더 이상 팝업창이 나타나지 않는 것을 확인할 수 있다.
쿠키삭제를 클릭 후 다시 재요청하면 다시 팝업창이 나타나는 것을 확인할 수 있다.
728x90
'웹 개발 기초 > 자바 웹을 다루는 기술' 카테고리의 다른 글
| 세션 API의 특징과 기능 (0) | 2023.02.22 |
|---|---|
| 세션을 이용한 웹 페이지 연동 기능 (0) | 2023.02.22 |
| 세션 쿠키 사용하기 (0) | 2023.02.22 |
| 서블릿에서 쿠키 사용하기 (0) | 2023.02.22 |
| 쿠키를 이용한 웹 페이지 연동 기능 (0) | 2023.02.22 |