세션 쿠키 사용하기
1. popUp.html, popupTest.html 파일을 준비합니다.
2. 먼저 popUp.html을 다음과 같이 작성합니다. 웹 페이지가 브라우저에 로드될 때 pageLoad() 함수를 호출한 후 쿠키에 접근해 팝업창 관련 정보를 가져옵니다. getCookieValue() 함수를 호출하여 쿠키 이름 notShowPop의 값 true가 아니면 팝업창을 나타내고, notShowPop의 값이 true면 팝업창을 나타내지 않습니다.
<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>
3. popUp.html에서는 오늘 더 이상 팝업창 띄우지 않기에 체크하면 자바스크립트 함수인 setPopUpStart() 함수를 호출해 notShowPop의 값을 true로 설정하여 재접속 시 팝업 창을 나타내지 않도록 설정합니다.
<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/>
4. 브라우저에 최초 접속 시 팝압창을 나타냅니다.
5. 오늘 더 이상 팝업 창 띄우지 않기에 체크하고 재요청하면 더 이상 팝업창이 나타나지 않습니다.
6. 쿠키삭제를 클릭한 후 재요청하면 다시 팝업창이 나타납니다.
'프로그래밍 언어 > 자바 웹' 카테고리의 다른 글
| 세션 기능 실행 과정 (1) | 2025.08.09 |
|---|---|
| 세션을 이용한 웹 페이지 연동 기능 (2) | 2025.07.31 |
| 세션 쿠키 사용하기 (1) | 2025.07.25 |
| 서블릿에서 쿠키 사용하기 (1) | 2025.07.22 |
| 쿠키 API (1) | 2025.07.22 |
