11.29.(화) JSP(3): Cookie

콜라든포비 2022. 11. 30. 22:59

2022. 11. 30. 22:59

Cookie

쿠키란 서버에서 클라이언트에게 입력하는 정보를 말한다. 흔히 구글링하다가 들어간 웹사이트에서 쿠키를 허용하겠냐는 알림은 받곤 하는데, 허용하게 된다면 서버에서 내가 웹페이지를 접속하면서 취한 행동에 대해서 기록하고 임시 보관하여 다음에 접속했을때 보관된 쿠키를 사용하여 데이터처리를 할 수 있다.

가장 대표적인 예로 팝업창의 '일주일동안 보이지 않기' 설정하는 것이 대표적인 쿠키 활용 방안이다.

/webApp/jsp03_cookie 폴더에 createCookie.jsp, cookieView.jsp와 deleteCookie.jsp를 생성하자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>createCookie.jsp</title>
<script>
	// Javascript에서 쿠키 생성하기
	document.cookie = "food=pizza;path=./;expire=2023";
	document.cookie = "notice=true";
</script>
<%
	// Cookie : jsp사용자 컴퓨터(브라우저) 쿠키 기록하기
	Cookie coo = new Cookie("username"/*Name*/,"smg1024"/*Value*/);
	coo.setMaxAge(60*60);	// javascript의 expires와 같음, 유효시기(초 단위)
	
	// 쿠키 객체 coo를 클라이언트에게 보내기
	response.addCookie(coo);
%>
</head>
<body>
	<h1>쿠키 생성하기</h1>
	<a href="/webApp/jsp03_cookie/cookieView.jsp">쿠키 확인하기</a>
</body>
</html>

Cookie 클래스로 객체를 생성해서 추가해줄 수 있다. name과 value를 정해준 다음, setMaxAge()로 유효시간을 정해주면 된다. 단위는 초(second)이다. Cookie를 없애는 방법은 유효시간을 0으로 만들어주면 된다.

만든 쿠키를 확인하는 cookieView.jsp를 보자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cookieView.jsp</title>
</head>
<body>
	<h1>쿠키 정보 얻어오기</h1>
<%
	Cookie coo[] = request.getCookies();
	
	for(int i=0; i<coo.length; i++){
		%>
		<ul>
			<li><%= coo[i].getName() %>=<%= coo[i].getValue() %>, <%= coo[i].getMaxAge() %></li>
		</ul>
		<%
	}
%>
<a href="/webApp/jsp03_cookie/deleteCookie.jsp">쿠키 삭제하기</a>
</body>
</html>

이렇게 확인한 후 유효시간은 0으로 만들어서 새로 등록해주면 삭제처리된다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>deleteCookie.jsp</title>
</head>
<body>
<%
	Cookie coo[] = request.getCookies();
	
	for(int i=0; i<coo.length; i++){
		coo[i].setMaxAge(0);
		response.addCookie(coo[i]);
	}
	for(int i=0; i<coo.length; i++){
		%>
		<ul>
			<li><%= coo[i].getName() %>=<%= coo[i].getValue() %>, <%= coo[i].getMaxAge() %></li>
		</ul>
		<%
	}
%>
<a href="/webApp">홈으로</a>
</body>
</html>

대표적인 쿠키의 예시인 '하루동안 보지 않기'를 만들어보자.

cookieMain.html이라는 웹에 접속했을때 popup.html이라는 팝업창이 뜨게 되고, 거기서 하루동안 보지않기 체크박스로 쿠키를 등록해보자.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cookieMain.html</title>
<script>
	window.open("popup.html", "popup", "width=400, height=670, left=200, top=200");
</script>
</head>
<body>
<h1>Cookie Main Page</h1>
<img src="../img/flower.jpg" width="80%">
</body>
</html>

랜덤한 사진도 넣어줬다.

팝업창도 만들어주자.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>popup.html</title>
<style>
	img{width:90%;}
</style>
<script>
	function popupClose(){
		// checkbox 선택된 경우 쿠키에 정보 기록
		var check = document.getElementById("check").checked;	// boolean: check=true
		if(check){
			// popup쿠키변수, popOpen은 값, path는 쿠키값이 저장되는 위치
			// expires는 쿠키의 생명주기
			var now = new Date();
			// 년 : getFullYear(), 월 : getMonth()+1, 일 : getDate()
			// 시 : getHours(), 분 : getMinutes(), 초 : getSeconds()
			// 요일 : getDay() -> 일요일 시작
			
			// 내일 현재시각으로 날짜 변경
			now.setDate(now.getDate()+1);
			
			document.cookie = "popup=popOpen;path=/;expires="+now+";";
		}
		
		// 창 닫기
		window.close();	// self.close();
	}
</script>
</head>
<body>
<h2>Pop-up Page</h2>
<img src="../img/candle.jpg">
<hr>
<input type="checkbox" id="check">하루 동안 안 보기
<input type="button" value="Close" onclick="popupClose()">
</body>
</html>

checkbox로 하루 동안 안 보기를 만들어주고 check라는 id를 할당해주었다.

그리고 그 옆에 Close버튼을 만들고, 누르면 popupClose()라는 function을 실행하도록 구성했다.

popupClose()함수는 check체크박스가 선택되었는지에 따라 팝업창을 닫을때 쿠키를 남길지 말지 결정한다.

Date객체로 현재 시간을 내일로 설정하고 쿠키의 유효시간으로 할당해주었다.

이름은 popup, 값은 popOpen인 쿠키가 생성되었다.

이제 다시 cookieMain.html로 넘어와서 쿠키정보를 확인하고 팝업창을 띄울지 말지 결정하는 코드를 작성하자.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cookieMain.html</title>
</head>
<script>
	function popupShow(){
		// 팝업창을 쿠키정보 확인 후 띄워준다
		var cookie = document.cookie;	// "popup=popOpen"
		if(cookie.indexOf("popOpen")==-1){	// 없으면 -1, 있으면 0 혹은 양수
			// 새 창에 표시될 컨텐츠, 창 이름, 옵션
			window.open("popup.html", "popup", "width=400, height=670, left=200, top=200");
		}
	}
</script>
<body onload="popupShow()">
<h1>Cookie Main Page</h1>
<img src="../img/flower.jpg" width="80%">
</body>
</html>

popupShow()함수에서는 cookie라는 변수에 현재 등록된 쿠키들을 선언해주고, 그 중에 popOpen이라는 값을 가진 쿠키를 검색해준다.

만약에 있다면 index는 0, 없다면 index는 -1일테니, 후자일때만 popup.html을 띄우면 되겠다.

저작자표시 (새창열림)

'JSP' 카테고리의 다른 글

11.29.(화) JSP(6): 웹페이지 배포 (0)	2022.12.01
11.29.(화) JSP(5): Error (0)	2022.11.30
11.29.(화) JSP(4): Session (0)	2022.11.30
11.28.(월) JSP(2): JSP 내장객체 (0)	2022.11.30
11.24.(금) JSP(1): 톰캣 설치 (0)	2022.11.30

Poby의 코딩일지