본문 바로가기
Back/Servlet

쿠키와 세션 - 쿠키를 이용한 웹 페이지 연동 기능

by Hyeon_ 2021. 12. 29.

쿠키와 세션 - 쿠키를 이용한 웹 페이지 연동 기능

쿠키(Cookie)란?

  • 웹 페이지들 사이의 공유 정보를 클라이언트 PC에 저장해 놓고 필요할 때 여러 웹 페이지들이 공유해서 사용할 수 있도록 매개 역할을 하는 방법

쿠키의 특징

  • 정보가 클라이언트 PC에 저장됨
  • 저장 정보 용량에 제한이 있음 (4kb)
  • 보안에 취약함
    • 클라이언트에 저장되기 때문. 민감한 정보는 저장하지 X
  • 클라이언트 브라우저에서 사용 유무 설정 가능
  • 도메인당 쿠키가 만들어짐(웹 사이트당 하나의 쿠키 생성)

쿠키의 생성 및 저장 과정

  1. 서버에서 쿠키 생성
    • Cookie 클래스로부터 쿠키 객체 생성
    • Cookie cookie = new Cookie(이름, 값);
  2. 속성 설정
    • setter 사용해서 쿠키 객체의 유효기간 설정
    • cookie.setMaxAge(유효기간);
  3. 클라이언트에 전송되어 저장
    • response 내장 객체의 addCookie() 메소드로 전송
    • response.addCookie(쿠키객체);

쿠키 유형(종류)

  • Persistence 쿠키
    • 클라이언트에 파일로 정보 저장하는 기능
    • 유효기간 동안 지속됨
  • Session 쿠키
    • 브라우저가 사용하는 메모링 생성되는 쿠키
    • 브라우저가 종료되면 메모리의 Session 쿠키도 자동 소멸

쿠키 API

쿠키는 Cookie 클래스 객체를 생성하여 정보 저장 후 서버에서 클라이언트로 전송해 파일로 저장된다. 쿠키 관련 API의 특징은 다음과 같음

  • javax.servlet.http.Cookie 이용
  • HttpServletResponseaddCookie() 메서드를 이용해 클라이언트 브라우저에 쿠키 전송 후 저장
  • HttpServletRequestgetCookie() 메서드를 이용해 쿠키를 서버로 가져옴

쿠키 클래스의 메서드

  • getComment() : 쿠키에 대한 설명 가져옴
  • getDomain() : 쿠키의 유효한 도메인 정보 가져옴
  • getMaxAge() : 쿠키 유효 기간을 가져옴
  • getName() : 쿠키 이름을 가져옴
  • getPath() : 쿠키의 디렉터리 정보를 가져옴
  • getValue() : 쿠키의 설정 값 가져옴
  • setComment(String) : 쿠키에 대한 설명 설정
  • setDomain(String) : 쿠키의 유효한 도메인 설정
  • setMaxAge(int) : 쿠키 유효 기간 설정
  • setValue(String) : 쿠키 값 설정
  • setPath(String) : 쿠키 디렉터리 정보 설정
  • cookie.setMaxAge(0) : 쿠키 제거
  • response.addCookie(cookie) : 클라이언트에 전송되어 변경된 값으로 저장

서블릿에서 쿠키 사용하기

서블릿에서 쿠키 API 이용해 직접 쿠키 만들기

SetCookieValueServlet
@WebServlet(name = "SetCookieValueServlet", value = "/set")
public class SetCookieValueServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        Date d = new Date();
        Cookie c = new Cookie("cookieTest", URLEncoder.encode("JSP 프로그래밍입니다.", "utf-8"));
        c.setMaxAge(24*60*60);
        response.addCookie(c);

        out.println("현재시간 : " +d);
        out.println("문자열을 Cookie에 저장합니다.");
    }
}
GetCookieServlet
@WebServlet(name = "GetCookieServlet", value = "/get")
public class GetCookieServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();

        Cookie[] allValues = request.getCookies();
        for(int i = 0; i<allValues.length; i++){
            if(allValues[i].getName().equals("cookieTest")){
                out.println("<h2>Cookie값 가져오기 : "
                + URLDecoder.decode(allValues[i].getValue(), "utf-8"));
            }
        }
    }
}

세션 쿠키 사용하기

쿠키를 파일에 저장하지 않고 브라우저가 사용하는 메모리에 저장하는 Session 쿠키 만들기

SetCookieServlet
@WebServlet(name = "SetCookieValueServlet", value = "/set")
public class SetCookieValueServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        Date d = new Date();
        Cookie c = new Cookie("cookieTest", URLEncoder.encode("JSP 프로그래밍입니다.", "utf-8"));
        c.setMaxAge(-1);
        response.addCookie(c);

        out.println("현재시간 : " +d);
        out.println("문자열을 Cookie에 저장합니다.");
    }
}

쿠키 이용해 팝업창 제어하기

쿠키를 이용해 팝업창 제한하는 기능 구현하기.

팝업창 제어는 서버에서 쿠키를 다루지 않고 자바스크립트 이용해서 쿠키에 직접 접근

popUp.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>팝업창</title>
    <script type="text/javascript">
        function setPopUpStart(obj){
            if(obj.checked == true){
                var expireDate = new Date();
                //alert(expireDate); // 오늘 날짜
                var days = 1;
                expireDate.setDate(expireDate.getDate() + days);
                //alert(expireDate); //오늘 날짜 + 1일
                // 쿠키 값 설정 : 쿠키 이름, 패스, 유효 기간
                document.cookie = "notShowPop=" + "true" + ";path=/;expires=" +
                    expireDate.toGMTString();
                // 팝업창 닫기
                window.close()
            }
        }
    </script>
</head>
<body>
알림 팝업창입니다.  <br><br><br><br><br><br>
<form>
    <input type="checkbox" onClick="setPopUpStart(this)">오늘 더 이상 팝업창 띄우지 않기
</form>
</body>
</html>
popUpTest.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>popUpTest</title>
    <script type="text/javascript">
        // 시작 시 페이지 로드 함수 호출
        window.onload = pageLoad;

        /* 페이지 로드 함수 : 팝업창(popUp.html) 띄우는 함수 */
        function pageLoad(){
            //  쿠키 읽어 오는 함수  getCookieValue() 함수 호출해서 저장된 쿠키 읽어 오기
            var notShowPop = getCookieValue();

            // 읽어 온 쿠키 값이 "true"가 아니면 popUp.html 열기
            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*/,'');// 앞 공백 제거 정규식

                    // 쿠키 이름이 notShowPop 이면
                    if(value == "notShowPop") {
                        result = element[1]; //쿠키 값 가져오기 ("true") (배열 두 번째 요소)
                    }
                }

            }
            return result;
        }

        // 쿠키 삭제하는 함수 : 유효 기간을 -1로 설정
        function deleteCookie(){
            document.cookie = "notShowPop=" + "false" + ";path=/;expires=-1";
        }

    </script>
</head>
<body>
<form>
    <input type="button" value="쿠키삭제" onClick="deleteCookie()">
</form>
</body>
</html>