본문 바로가기
[ View ]/JSP

[ JSP ] Cookie

by 환이s 2023. 3. 11.

이전 포스팅에서 JDBC 암호화 처리하는 방법까지 알아봤습니다!

오늘은 Cookie에 대해서 알아봅시다.

 

 

■  쿠키란?

 

평소에 인터넷을 많이 하신 분이라면, 쿠키를 한 번쯤은 들어 보셨을 텐데, 쿠키는 브라우저에 접속했을 때 값을 저장하기 역할을 합니다. 쿠키를 이해하기 위해서는 먼저 개념을 알고 가야 합니다.

 

HTTP 프로토콜에서 웹 브라우저가 서버로 요청을 하면, 서버는 알맞은 동작을 한 후 웹브라우저에  응답하고 연결을 종료합니다. 이처럼 연결이 끊었을 때 정보들을 지속적으로 유지하기 위한 수단으로 쿠키를 사용합니다. 즉 , 쿠키는 서버에서 생성하고 클라이언트 측에 저장됩니다.

서버에 요청할 때마다 쿠키의 속성값이 변경, 참조될 수 있습니다.

■  HTTP의 비연결성

 

웹 프로그램은 기본적으로 현재 페이지에서 다른 페이지로 이동하면 현재 페이지에 저장된 값들이 모두 소멸됩니다.

다수의 페이지로 구성된 웹 애플리케이션에서 사용자의 편의를 위해 인증 후의 값을 유지할 필요가 있고, 웹을 지원하는 통신 규약 HTTP는 비연결성(Connectionless) 또는 무상태(Stateless) 특성을 가집니다.

 

HTTP 비연결성의 장단점은 다음과 같습니다.

 

  • 장점

- 서버에 접속한 클라이언트 수가 많아도  서버의 부담이 적다.

- 웹의 비연결 특성은 초기에 웹 서비스를 빠르게 성장시킨 계기.

 

  • 단점

- 정보를 유지해야 할 부분도 있는데 정보를 유지할 수가 없습니다.

예 ) 인터넷 쇼핑몰에서 상품을 구매할 경우, 사용자는 장바구니에 상품을 담기도 하고 삭제하기도 합니다. 이럴 경우, 장바구니 페이지는 다른 페이지로 이동해도 장바구니의 정보를 유지해야 하는데 HTTP의 비연결성이 이것을 어렵게 합니다.

 

※ 이러한 비연결성을 보완하고 페이지 간의 지속성 서비스를 제공하기 위해서 쿠키, 세션이 있습니다.

 

■  쿠키 생성 및 수정

 

쿠키는 클라이언트 쪽에 데이터가 쌓이기 때문에 response 객체로 다룹니다.

즉, 응답헤더에 쿠키를 추가합니다.

 

response.addCookie( new Cookie("쿠키변수명", "값")); 
response.addCookie( new Cookie("age", "10") ); //("스트링", "스트링")만 된다

 

■  쿠키 읽기

 

쿠키를 읽는 방식은 두 가지 있습니다.   JAVA 코드로 읽는 방식과 EL(Expression Language) 방식인데 두 가지의 방식의 차이점은 코드에서 명확하게 확인할 수 있습니다.

 

1 ) JAVA Code 방식

Cookie[] cookies = request.getCookies(); 
if (cookies != null) {
for (int i = 0; i < cookies.length; i++) {
if (cookies[i].getName().equals("쿠키변수명")) {
out.println("이름 : " + URLDecoder.decode(cookies[i].getValue(), "utf-8"));
      }
   }
}

 

2 ) EL(Expression Language) 방식

${cookie.쿠키변수명.value}
//위 코드가 이 한줄로 가능하다

 

※ 쿠키 변수는  String Type만 가능하며 특수문자, 한글을 사용하고자 할 경우 인코딩을 시켜야 합니다.(단, 오래된 톰캣 서버 버전에 대해서만 인코딩 처리.)

response.addCookie(new Cookie("name", URLEncoder.encode("김기사", "UTF-8")));

 

그럼 정리해서 쿠키 관련 메서드를 알아봅시다.

메소드 설 명
setMaxAge() 쿠키의 유효기간 설정
setPath() 쿠키 사용의 유효 디렉토리를 성정
setValue() 쿠키의 값을 설정
setVersion() 쿠키 버전 설정
getMaxAge() 쿠키 유효기간 정보를 얻음
getName() 쿠키 이름을 얻음
getPath() 쿠키 사용의 유효 디렉토리 정보를 얻음
getValue() 쿠키의 값을 얻음
getVersion() 쿠키 버전을 얻음

 

그럼 예제를 통해서 알아봅시다.

예제 코드로는 페이지 클릭 시 회원 정보 및 쿠키 이름까지 출력하는 페이지입니다.

 

<예제 1>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>makeCookie</title>
<script src="../include/jquery-3.6.3.min.js"></script>
</head>
<body>
<%@ page import="java.net.URLEncoder" %>
<%
//new Cookie("쿠키변수","값"); String 타입만 가능
Cookie cookie = new Cookie("id","kim");
Cookie cookie2 = new Cookie("pwd","1234");
Cookie cookie3 = new Cookie("name","김철수");
Cookie cookie4 = new Cookie("age","20");


response.addCookie(cookie); //응답해더에 쿠키 추가
response.addCookie(cookie2);
response.addCookie(cookie3);
response.addCookie(cookie4);
%>
쿠키가 생성되었습니다. <br>
<a href="useCookie.jsp">쿠키 확인</a>

<!-- 만약 쿠키를 사용하지 않는다면 아래 쿼리스트링으로 값을 보내야 한다. -->
<!-- <a href="useCookie.jsp?id=kim&pwd=1234&name=김철수&age=20">쿠키 확인</a> -->
</body>
</html>

 

쿠키 변수에 값을 넣을 땐 String 타입만 가능합니다. 값을 넣어주고 응답 해더에 쿠키 추가를 해주고 요청을 보내는 페이지를 생성해 줍니다.

 

<예제 2>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>useCookie</title>
<script src="../include/jquery-3.6.3.min.js"></script>
</head>
<body>
<%
//클라이언트에 저장된 쿠키값은 배열로 받음
Cookie[] cookies= request.getCookies();
if(cookies != null){
	for(int i=0; i<cookies.length; i++){
		out.println("쿠키 이름 : "+cookies[i].getName());
		out.println(", 쿠키값 : "+cookies[i].getValue()+"<br>");
	}
	
}
%>
<hr>
<!-- EL 기법 -->
아이디 : ${cookie.id.value}<br>
비번 :  ${cookie.pwd.value}<br>
이름 :  ${cookie.name.value }<br>
나이 :  ${cookie.age.value }<br>

<a href="deleteCookie.jsp">쿠키 삭제</a>
<a href="editCookie.jsp">쿠키 변경</a>

</body>
</html>

맨 마지막에 쿠키를 삭제, 변경할 수 있는 페이지를 설정했습니다. 먼저 결과를 확인해 봅시다.

위 결과처럼 나오셨다면 쿠키 확인 페이지를 클릭해 봅시다.

결과를 확인해 보시면 클라이언트에 저장되어 있는 쿠키 name, value의 값을 확인할 수 있습니다.

그럼 이어서 쿠키 삭제 페이지와 변경 페이지도 생성해 봅시다.

 

<쿠키 삭제>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>deleteCookie</title>
<script src="../include/jquery-3.6.3.min.js"></script>
</head>
<body>
<%
//전체 쿠키 삭제
Cookie[] cookies = request.getCookies();
if(cookies != null){
	for(int i =0; i<cookies.length; i++){
		//쿠키의 유효시간을 0으로 설정하여 만료
		cookies[i].setMaxAge(0);
		//응답 헤더에 추가
		response.addCookie(cookies[i]);
	}
}
// 특정 쿠키만 삭제
//Cookie cookie = new Cookie("id","");//아이디 값만 삭제

%>
쿠키가 삭제되었습니다.
<a href = "useCookie.jsp">쿠키 확인</a>

</body>
</html>

 

<쿠키 변경>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../include/jquery-3.6.3.min.js"></script>
</head>
<body>
<%
//쿠키 수정
response.addCookie(new Cookie("id","park"));

%>
쿠키가 변경되었습니다. <br>
<a href="useCookie.jsp">쿠키 확인</a>


</body>
</html>

삭제 페이지와 변경 페이지는 간단하게 만들었습니다.

쿠키가 제대로 삭제되는지 확인해 봅시다.

 

위 사진처럼 모든 쿠키 값이 삭제되는 걸 확인할 수 있는데, 쿠키를 삭제할 때는. setMaxAge(0) 처리해 주시고, 응답 해더에 addCookie()로 추가해 주시면 삭제된 결과를 표출할 수 있습니다.

 

그렇다면 이번에는 쿠키 변경을 확인해 봅시다. 

 

쿠키 변경 페이지 소스를 확인해 보면 id 값을 park으로 수정하겠다는 선언을 했습니다. 수정은 간단합니다.

response 객체에서 addCookie("쿠키변수명", "값")을 넣어주시면 됩니다.

 

마치며

 

오늘은 쿠키에 대해서 알아보았습니다.

다음 포스팅인 session으로 뵙겠습니다.

728x90

'[ View ] > JSP' 카테고리의 다른 글

[ JSP ] JSTL(Jsp Standard Tag Library)  (2) 2023.03.15
[ JSP ] EL(Expression Language)  (0) 2023.03.14
[ JSP ] JDBC 암호화  (0) 2023.03.08
[ JSP ] JAVA Bean  (0) 2023.03.07
[ JSP ] 에러 처리  (0) 2023.03.06

관련글

티스토리툴바