Archive

쿠키를 이용해 팝업창 제한하기

07 Mar 2021 | Javascript

쿠키를 이용해 팝업창 제한하기

  1. 쿠키를 이용해 팝업창 제한하기

    • 팝업창의 체크박스를 선택하면 더 이상 팝업창이 뜨지 않는 기능을 구현한다
    • 체크박스 선택시 쿠키의 유효시간을 설정하여 쿠키를 만든다
    • 메인 페이지에서는 쿠키의 값을 읽어서 팝업창을 띄울지 말지 여부를 결정한다
    • 쿠키 삭제 버튼을 누르면 쿠키가 삭제되고 팝업창이 다시 나타난다

  2. 팝업창 (popUp.html)

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
	function setPopUpStart(obj) {
		// 체크박스 체크시
		if(obj.checked == true) {
			let expireDate = new Date();
            //쿠키 유효시간 한 달 설정
			expireDate.setMonth(expireDate.getMonth()+1); 
			// 쿠키 재설정
			document.cookie =
                "notShowPop=true;path=/;expires="+expireDate.toGMTString();
			window.close();
		}
	}
</script>
<body>
	Pop Up!
	<br><br><br><br><br><br><br>
	<form>
		<input type="checkbox" onClick="setPopUpStart(this)" />한 달간 팝업창 띄우지 않기
	</form>
</body>
</html>


  3. 메인페이지 (popupTest.html)

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS 쿠키사용</title>
<script type="text/javascript">
	window.onload = pageLoad; // 페이지 로드시 pageLoad 실행
	function pageLoad() {
		let notShowPop = getCookieValue();
		if(notShowPop != 'true') {
			window.open("popUp.html","pop",
				"width=400,height=500,history=no,menubar=no,status=no");
		}
	}
	// notShowPop 값 구하기
	function getCookieValue() {
		let result = 'false';
		let element;
		let value;
		let cookie;
		if(document.cookie != '') {
			cookie = document.cookie.split(';');
			for(let 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>


  4. 실행 결과

    팝업

    최초 팝업시 체크박스를 선택하면 쿠키가 생성되고 자바스크립트에 의해 더 이상 팝업창이 뜨지 않게 된다.

    쿠키


참고 자료

자바 웹을 다루는 기술

Related Posts