JSP 쿠키를 활용하여 ‘오늘 하루 창 보지 않기’ 기능 구현 예제

이 글에서는 JSP를 사용하여 ‘오늘 하루 창 보지 않기’ 기능을 구현하는 방법을 알아보겠습니다. 이 기능은 쿠키를 활용하여 사용자가 ‘오늘 하루 창 보지 않기’를 선택했을 때, 일정 기간 동안 팝업이 다시 나타나지 않도록 설정합니다.

1. 개념 설명

쿠키는 웹 브라우저에 저장되어 사용자의 상태나 설정 정보를 저장하는 데 사용됩니다. 이 예제에서는 ‘오늘 하루 창 보지 않기’ 버튼을 클릭하면 쿠키에 저장하고, 페이지를 다시 로드할 때 쿠키의 존재 여부에 따라 팝업을 보여줄지 결정합니다. JSP에서 쿠키를 사용하는 방법은 아래 이전 글을 참고하시면 됩니다.

JSP 쿠키 사용하기: 생성, 읽기, 삭제 방법

2. JSP 코드 구현

2.1 부모 페이지 (parent.jsp)

부모 페이지에서는 쿠키를 확인하여 팝업을 표시할지 결정합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>부모 페이지</title>
</head>
<body>
    <h1>부모 페이지</h1>
    
    <% 
        // 쿠키 확인
        Cookie[] cookies = request.getCookies();
        boolean showPopup = true;

        if (cookies != null) {
            for (Cookie cookie : cookies) {
                if ("popupClosed".equals(cookie.getName())) {
                    showPopup = false;
                    break;
                }
            }
        }

        // 쿠키가 없으면 팝업 표시
        if (showPopup) {
            out.println("<script>window.open('popup.jsp', 'popup', 'width=400,height=300');</script>");
        }
    %>
    <p>이 페이지에서는 사용자가 '오늘 하루 창 보지 않기'를 선택할 경우, 팝업이 다시 나타나지 않도록 설정합니다.</p>
</body>
</html>

1. 쿠키 확인

request.getCookies() 메서드를 사용해 클라이언트로부터 전송된 모든 쿠키를 가져옵니다.
쿠키 배열을 반복하면서 이름이 “popupClosed”인 쿠키가 있는지 확인합니다. 해당 쿠키가 존재하면 showPopup 변수를 false로 설정하여 팝업을 표시하지 않도록 합니다.

2. 팝업 표시

showPopup 변수가 true로 남아 있는 경우, window.open 자바스크립트를 사용하여 팝업 창을 엽니다.

2.2 팝업 페이지 (popup.jsp)

팝업 페이지에서는 사용자가 ‘오늘 하루 창 보지 않기’를 선택했을 때 쿠키를 설정합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>팝업 페이지</title>
</head>
<body>
    <h1>팝업 페이지</h1>
    
    <form method="post" action="popup.jsp">
        <p><input type="checkbox" name="dontShowToday" id="dontShowToday"> 오늘 하루 창 보지 않기</p>
        <button type="submit" name="closePopup" value="close">닫기</button>
    </form>

<%
    // 폼이 제출되었는지 확인
    String dontShowToday = request.getParameter("dontShowToday");
    String closePopup = request.getParameter("closePopup");

    if (closePopup != null) {
        if ("on".equals(dontShowToday)) {
            // 하루 동안 유효한 쿠키 설정
            Cookie popupCookie = new Cookie("popupClosed", "true");
            popupCookie.setMaxAge(60 * 60 * 24); // 24시간 유효
            popupCookie.setPath("/"); // 전체 경로에서 유효
            response.addCookie(popupCookie); // 쿠키를 클라이언트에 전송
        }
        // 창을 닫음
        %>
        <script>
            window.close();
        </script>
        <%
    }

    response.setContentType("text/html; charset=UTF-8");
%>
</body>
</html>

1. 폼 제출 확인 및 쿠키 설정

사용자가 체크박스를 선택하고 닫기 버튼을 클릭하면 폼이 제출됩니다.
폼 제출 후, dontShowToday 파라미터 값이 “on”인 경우, “popupClosed”라는 이름의 쿠키를 생성하여 24시간 동안 유효하도록 설정합니다.

2. 창 닫기

폼이 제출된 후, 자바스크립트 window.close()를 호출하여 현재 팝업 창을 닫습니다.

JSP 쿠키를 활용하여 ‘오늘 하루 창 보지 않기’ 기능 구현 예제

1. 개념 설명

2. JSP 코드 구현

2.1 부모 페이지 (parent.jsp)

2.2 팝업 페이지 (popup.jsp)

관련 이전 게시글

동일 카테고리 게시글