JSP 피피티 06강 쿠키

쿠키의 이해

웹 사이트 방문자 컴퓨터(웹브라우저)에 데이터를 저장해 놓는 텍스트 파일 

 

-HTTP 프로토콜은 상태가 없다. 이전에 무엇을 했고, 지금 무엇을 했는지에 대한 정보를 갖고 있지 않다.
즉, 웹브라우저(클라이언트)의 요청에 대한 응답을 하고 나면 해당 클라이언트와의 연결을 지속하지 않는다.

 

-쿠키는 웹 브라우저를 통해 특정 사이트에 접속하면 웹 브라우저에 쿠키가 저장되어 접속한 사용자의 정보가 유지되는 것이다. 상태가 없는 HTTP프로토콜을 위해 상태를 지속시키기 위한 방법이다. 

 

 

 

 

-JSP에서 쿠키를 사용하려면 Javax.servlet.http 패키지에 있는 Cookie 클래스의 객체를 생성해야 한다. 이렇게 생성된 쿠키에는 각각의 웹브라우저를 판별할 수있는 정보가 포함되어 있다. 쿠키는 웹서버가 웹브라우저의 요청에 응답할 때 response 객체에 실려 사용자의 웹브라우저에 저장된다.

 

-웹브라우저에 저장된 쿠키는 사용자가 다시 웹 서버에 요청을 할 때 request 객체에 실려 다시 웹서버에 전달. 이때 웹 서버는 전달된 쿠키의 값을 읽어 동일한 웹브라우저로부터 온 요청인지 판별

 

쿠키 생성및 사용(더보기)

(1) 쿠키 생성하기

<%
	// 쿠키를 생성한다. 이름:testCookie, 값:Hello Cookie
	Cookie info = new Cookie("testCookie", "Hello Cookie"); 
    
	// 쿠키의 유효기간을 365일로 설정한다.
	info.setMaxAge(365*24*60*60);  

	// 쿠키의 유효한 디렉토리를 "/" 로 설정한다.
	info.setPath("/");                                                    

	// 클라이언트 응답에 쿠키를 추가한다.
	response.addCooke(info);                                    
%>

(2)쿠키에 저장된 정보 읽어오기

<%
	// 요청정보로부터 쿠키를 가져온다.
	Cookie[] cookies = request.getCookies();            

	// 쿠키가 저장된 배열의 길이를 가져온다.
	out.println("현재 설정된 쿠키의 개수 : " + cookies.length);    

	// 쿠키 배열을 반복문으로 돌린다.
	for(int i = 0 ; i<cookies.length; i++){                            

		// 쿠키의 이름을 가져온다.
		out.println(i + "번째 쿠키 이름 : " + cookies[i].getName());            
		// 쿠키의 값을 가져온다.
		out.println(i + "번째 쿠키에 설정된 값 : " + cookies[i].getValue());    

	}
%>

(3)설정된 쿠키를 모두 삭제하기

<%

	// 요청정보로부터 쿠키를 가져온다.
	Cookie[] cookies = request.getCookies();            

	// 쿠키 배열을 반복문으로 돌린다.
	for(int i = 0 ; i<cookies.length; i++){                            

		// 특정 쿠키를 더 이상 사용하지 못하게 하기 위해서는 쿠키의 유효시간을 만료시킨다.
		cookies[i].setMaxAge(-1);                      
		// 해당 쿠키를 응답에 추가(수정)한다.
		response.addCookie(cookies[i]);            

	}
%>

쿠키 관련 메소드

메소드	설명
String getCommnet()	쿠키에 대한 설명을 가져온다.
String getDomain()	쿠키의 유효한 도메인 정보를 가져온다.
int getMaxAge()	쿠키의 사용할 수 있는 기간에 대한 정보를 가져온다.
String getName()	쿠키의 이름을 가져온다.
String getPath()	쿠키의 유효한 디렉토리 정보를 가져온다.
boolean getSecure()	쿠키의 보안이 어떻게 설정되어 있는지 가져온다.
String getValue()	쿠키에 설정된 값을 가져온다.
int getVersion()	쿠키의 버전을 가져온다.
void setComment(String)	쿠키에 대한 설명을 설정한다.
void setDomain(String)	쿠키에 유효한 도메인을 설정한다.
void setMaxAge(int)	쿠키의 유효한 기간을 설정한다.
void setPath(Striong)	쿠키의 유효한 디렉토리를 설정한다.
void setSecure(boolean)	쿠키의 보안을 설정한다.
void setValue(String)	쿠키의 값을 설정한다.
void setVersion(int)	쿠키의 버전을 설정한다.

 

↑hyeonstorage.tistory.com/114 참조

 

 

• 지정된 시간 동안은 브라우저를 재실행 하더라도 데이터가 삭제되지 않는다. (임시파일)
• 사이트 내의 모든 페이지에서 읽기/수정/삭제가 가능한 전역변수가 된다.

이름	-쿠키에 저장되는 데이터에 개발자가 부여하는 이름. -저장된 데이터를 읽어올 때, 이 이름으로 접근한다.
데이터	-실제로 저장되는 값 -한글, 공백등이 저장될 수 없기 때문에 저장을 위해서는 URLEncoding처리 되어야 한다.
유효시간	-쿠키를 영구적으로 저장할수는 없다. 반드시 저장될 기간을 지정해 주어야 하낟. -기간을 지정하지 않거나 '-1'로 설정할 경우, 브라우저를 닫는 즉시 자동으로 삭제된다.
유효 도메인/경로	-쿠키는 서로 다른 도메인끼리 공유되지 않는다. ex)www.naver.com과 blog.naver.com 에서 저장한 쿠키는 소로 도메인이 다르므로 공유되지 않지만, 유효 도메인을 "naver.com"으로 설정 잘 경우 두 도메인 간에 쿠키가 공유된다. -같은 도메인 안에서도 특정 폴더 안에서만 유효하도록 제한 할 수 있다.

 

 

쿠키 살펴보기

크롬 부라우저의 개발자 도구를 통해 확인 가능.

-누구나 손쉽게 확인할 수 있고 쉽게 삭제가 가능하기 때문에 보안이 필요하거나 반드시 존재해야 하는 중요한 데이터에는 사용할 수 없다.

 

쿠키 사용 실습

저장 시점과 읽는 시점확인

-데이터가 저장된 후에는 사이트 내의 모든 페이지에서 읽기, 수정, 삭제가 가능한 전역 변수의 역할을 한다.

cookie.jsp	------------------------> <------------------------	cookie_ok.jsp
(1) 사용자 입력값 전송 (5) 쿠키값 추출 / 출력		(2) 파라미터 추출 (3) 쿠키값 저장/삭제 (4) 페이지 이동

※쿠키를 저장/삭제 하는 페이지와 저장되어있는 쿠키를 읽어서 출력하는 페이지가 서로 다르다는것을 확인!

 

▒ 쿠키에 저장할 값을 입력하기 위한 입력 폼 준비

cookie.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ page import="java.net.URLDecoder" %>
<%
	//쿠키값을 저장할 문자열
	String myCookie = null;
	System.out.println("--------------");	//콘솔확인
	//저장된 모든 쿠키 목록을 배열로 가져온다.
	Cookie[] cookies = request.getCookies(); 
	System.out.println("쿠키배열"+cookies);	//콘솔확인
	//쿠키목록이 있다면
	if(cookies != null){
		//가져온 배열의 길이만큼 반복
		for(int i=0; i< cookies.length; i++){
			// i번째 쿠키의 이름을 취득한다.
			String cookieName = cookies[i].getName();
			System.out.println("쿠키이름"+cookieName);		//콘솔확인
			//이름이 내가 원하는 값일 경우 값을 복사한다.
			if(cookieName.equals("mycookie")){
				//쿠키값을 취득한다.
				String value = cookies[i].getValue();
				System.out.println("쿠키값"+value);	//콘솔확인
				//저장된 값의 문자열 길이가 0보다 크다면?
				if(value.length()>0){
					//인코딩된 값이므로 디코딩 처리하여 원래값으로 복원한다.
					myCookie = URLDecoder.decode(value,"UTF-8");
					System.out.println("디코드된쿠키값"+myCookie); //콘솔확인
				}
			}
		}
	}
%>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello JSP</title>
</head>
<body>
    <h1>쿠키 예제</h1>
    <%
    	if(myCookie == null){
    		out.println("<h2>myCookie값 없음</h2>");
    	}else{
    		out.println("<h2>myCookie="+ myCookie + "</h2>");
    	}
    %>
    <form method="post" action="cookie_ok.jsp">
    	<label for="user_input">저장할  내용 입력</label>
    	<input type="text" name="user_input" id="user_input"/>
    	<button type="submit">쿠키저장</button>
    </form>
</body>
</html>

 사용자가 cookie.jsp 하고 웹 페이지에 접속했을때 이렇게 화면이 표시된다.

위의 사진에서 볼 수 있듯이 아직 생성된 쿠키는 없다. 왜냐하면 쿠키는 '저장할 내용 입력' 이라는 input태그에 입력받은 값을 쿠키로 생성하도록 했기 때문에! input 태그에 'superstarHJ'라고 값을 입력 한다면 

이와 같이'mycookie'라는 이름의 'superstarHJ' 라는 값이 생긴걸 확인 할 수있다.

 

cookie_ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ page import="java.net.URLEncoder" %>
<%
	//파라미터 수신에 사용할 문자셋 설정 (각 페이지당 최 상단에서 1회 설정)
	request.setCharacterEncoding("UTF-8"); //파라미터를 읽으려고 하는 페이지는 앞에 무조건 이 코드를 써야한다.
	
	//<input>태그의 name속성값을 사용하여 사용자의 입력값을 받는다.
	String input = request.getParameter("user_input");
	
	//입력값의 존재 여부에 따라 쿠키를 저장하거나 삭제
	if(input != null){
    
		//입력값이 존재할 경우 쿠키 저장(혹은 덮어쓰기)
		System.out.println("cookeOK1"+input);	//콘솔확인
        
		input = URLEncoder.encode(input,"UTF-8");	//저장할 값에 대한 URLEncoding
		System.out.println("cookeOK2"+input);	//콘솔확인
        
		Cookie info = new Cookie("mycookie", input);	//쿠키 생성(이름, 값 설정)
		System.out.println("cookeOK3"+info);	//콘솔확인
        
		info.setMaxAge(30);	//쿠키의 유효시간(초) - 지정하지 않을 경우 브라우저를 닫으면 즉시 삭제
		info.setPath("/");	//쿠키가 유효한 경로 설정 - 사이트 최상단 디렉토리 지정(사이트 전역에서 유효)
		info.setDomain("localhost");//쿠키가 유효한 도메인 설정 - 상용화시에는 사이트에 맞게 수정해야 함
		System.out.println("cookeOK4"+info);//콘솔확인
        
		response.addCookie(info); 	//쿠키 저장하기
        
	}else{
    
		//입력값이 존자하지 않을 경우 쿠키 삭제
		//유효시간을 과거 시점으로 지정하면 즉시 삭제된다.
		//그 밖의 정보 (유효경로, 도메인)는 저장시에 설정한 값과 동일해야 한다.
		Cookie info = new Cookie("mycookie", null);
		info.setMaxAge(-1);  //시간을 -1로 하면 바로 삭제
		info.setPath("/");
		info.setDomain("localhost");
		response.addCookie(info);
	}
    
	//결과 확인을 위한 페이지 강제 이동
	response.sendRedirect("cookie.jsp");
	
	
%>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello JSP</title>
</head>
<body>
    
</body>
</html>

cookie.jsp 페이지에서 그 input 태그에 값을 입력했을때 cookie_ok.jsp(웹서버 기능을 하는 페이지)에서 쿠키 생성 작업이 진행된다.

 

-request.getParameter("user_input")을 통해 입력값을 받아온다. 입력값이 있으니 if 문이 실행되었다.

-input 값이 한글일 수도 있어 URLEncoding을 해주었고 쿠키를 생성하였다.

-생성된 쿠키의 유효시간, 유효경로, 유효도메인을 설정해 주었고 

-response.addCookie()를 통해 응답을 해주었다. 

 

이렇게 응답을 받은 웹브라우저에 저장되어있는 쿠키를 확인하였다.

 

갑자기 response.sendRedirect()의 기능이 더 궁금해져 검색해 보았다.

response.sendRedirect() 더보기 

response.sendRedirect()의 실행에 대한 올바른 이해

response.sendRedirect()의 실행에 대한 올바른 이해

쿠키의 활용

쿠키의 특성

-영구적으로 저장 할 수 없다. (유효시간 존재)

-사용자마다 다른 값을 저장하기 때문에 개인화가 가능하다. (사용자 PC에 저장됨)

-사용자가 직접 값을 학인하고 쉽게 삭제 할 수 있다.

 

쿠키특성의 한계

-보안이 필요하거나 반드시 존재해야 하는 데이터에는 사용할 수 없다.

 

쿠키의 활용 사례

예시	설명
오늘 하루 이 창 열지 않음	유효시간을 24시간으로 설정하여 저장한다.
아이디 기억하기	유효시간을 1주일 정도로 설정하여 저장한다. 1주일 안에 사이트에 재방문 하지 않을 경우 저장된 값이 삭제 된다.
오늘 본 상품	쇼필몰의 우측에서 표시되는 오늘 살펴본 상품 목록들. 유효시간을 24기간으로 설정하여 저장한다.

▒오늘 하루 이 창 열지 않음 팝업창 실습

팝업창을 열기위한 부모 페이지

opener.jsp

<%@page import="java.net.URLDecoder" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
	//쿠키값을 저장할 문자열\
	String isPopup = null;

//저장된 모든 쿠키 목록을 배열로 가져온다.
	Cookie[] cookies = request.getCookies(); 
	System.out.println("쿠키배열"+cookies);	//콘솔확인
	//쿠키목록이 있다면
	if(cookies != null){
		//가져온 배열의 길이만큼 반복
		for(int i=0; i< cookies.length; i++){
			// i번째 쿠키의 이름을 취득한다.
			String Name = cookies[i].getName();
			System.out.println("쿠키이름"+Name);		//콘솔확인
			//이름이 내가 원하는 값일 경우 값을 복사한다.
			if(Name.equals("is_popup")){
				//쿠키값을 취득한다.
				String value = cookies[i].getValue();
				System.out.println("쿠키값"+value);	//콘솔확인
				//저장된 값의 문자열 길이가 0보다 크다면?
				if(value.length()>0){
					//인코딩된 값이므로 디코딩 처리하여 원래값으로 복원한다.
					isPopup = URLDecoder.decode(value,"UTF-8");
					System.out.println("디코드된쿠키값"+isPopup); //콘솔확인
				}
			}
		}
	}
%>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello JSP</title>
</head>
<body>
    <h1>팝업창 열기</h1>
    <% if(isPopup == null){ %>
    <script type='text/javascript'>
    	//javascript 팝업창 열기
    	var popup = window.open("child.jsp", 'child-win', 'width=350, height=300');
    	if(!popup){
    		alert("팝업창을 허용해 주세요.");
    	}
    </script>
    <%} %>
</body>
</html>

※ window.open 더보기

웹브라우저에서 새창을 열기 위해서 가장 간단히 사용할 수 있는 방법이  자바스크립트 window 객체의 open() 함수를 사용하는 것입니다.

문법

var ret = window.open(url, name, specs, replace);

1.1. 반환값(ret)

새로 만들어진 창 객체가 반환됩니다. 창의 생성에 실패하면 null을 반환합니다. 이 객체를 통해서 새창을 제어할 수 있습니다. 예로 ret.close(); 로 창을 닫을 수 있습니다.

 

1.2. url

새창에 보여질 주소 입니다. 선택적인 값으로 비워두면 빈창(about:blank)이 보입니다.

 

1.3. name

새로 열릴 창의 속성 또는 창의 이름을 지정합니다. 선택적인 값으로 기본값은 "_blank" 입니다. 사용 가능한 값을 다음과 같습니다.

- _blank : 새 창에 열립니다. 이것이 기본값입니다.

- _parent : 부모 프레임에 열립니다.

- _self : 현재 페이지를 대체합니다.

- _top : 로드된 프레임셋을 대체합니다.

- name(임의의 이름) : 새 창이 열리고 창의 이름을 지정합니다. 동일한 이름에 다시 open() 을 하면 기존의 열린창의 내용이 바뀝니다. 다른 이름을 사용하면 또다른 새창이 열립니다.

 

1.4 specs

선택적인 값으로 창의 크기, 스크롤여부, 리사이즈 가능등의 속성을 지정합니다. 사용가능한 값을 다음과 같습니다.

 

- channelmode=yes|no|1|0 : 전체화면으로 창이 열립니다. IE에서만 동작합니다.

- directories=yes|no|1|0 : (사용되지 않습니다.) 디렉토리 버튼의 표시여부

- fullscreen=yes|no|1|0 : 전체 화면 모드. IE에서만 동작합니다.

- height=pixels : 창의 높이를 지정합니다.(height=600)

- width=pixels : 창의 너비를 지정합니다.(width=500)

- left=pixels : 창의 화면 왼쪽에서의 위치를 지정합니다. 음수는 사용할 수 없습니다.

- top=pixels : 창의 화면 위쪽에서의 위치를 지정합니다. 음수는 사용할 수 없습니다.

- location=yes|no|1|0 : 주소 표시줄 사용여부를 지정합니다. Opera에서만 동작합니다.

- menubar=yes|no|1|0 : 메뉴바 사용여부를 지정합니다.

- resizable=yes|no|1|0 : 창의 리사이즈 가능 여부를 지정합니다. IE에서만 동작합니다.

- scrollbars=yes|no|1|0 : 스크롤바 사용여부를 지정합니다. IE, Firefox, Opera에서 동작합니다.

- status=yes|no|1|0 : 상태바를 보여줄지 지정합니다.

- titlebar=yes|no|1|0 : 타이틀바를 보여줄지 지정합니다. 호출 응용 프로그램이 HTML 응용 프로그램이거나 신뢰할 수있는 대화 상자가 아니면 무시됩니다.

- toolbar=yes|no|1|0 : 툴바를 보여줄지 지정합니다. IE, Firefox에서 동작합니다.

 

 

IE11에서 테스트 해본결과 channelmode는 타이틀바가 보이고, fullscreen모드는 타이틀바 없이 창이 떳습니다.

 

 

1.5 replace

히스토리 목록에 새 항목을 만들지 현재 항목을 대체할지 지정합니다.

 

- true : 현재 히스토리를 대체합니다.

- false : 히스토리에 새 항목을 만듭니다.

출처: https://offbyone.tistory.com/312 [쉬고 싶은 개발자]

사용자가 opener.jsp페이지를 들어왔을 때 브라우저의 팝업을 허용하지 않으면  if(!=popup){}이 실행된다.

 

사용자가 팝업을 허용 했다면 설정해 놓은 팝업창처럼 보이는 윈도우 창이 뜬다. window.open()을 사용한 윈도우 창인데 그 안의 내용은 다음에 나오는 소스코드의 페이지(child.jsp)이다. 

child.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello JSP</title>
</head>
<body>
	<h1>팝업창</h1>
	<p>opener.jsp에 의해서 열려진 팝업창 입니다.</p>
	
	<form method="post" action="child_close.jsp">
		<label><input type="checkbox" name="is_popup" value='Y'>1분간 창 열지 않음</label>
		<button type="submit">닫기</button>
	</form>    
</body>
</html>

여기서 '1분간 창 열지 않음'에 체크표시를 하고 닫기 버튼을 누르면 child_close.jsp(웹서버 역할을 하는 페이지)에 체크박스 입력 값으로 "Y"가 전달 된다. 

 

child_close.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ page import="java.net.URLEncoder" %>
<%
	//파라미터의 문자열 셋을 설정한다. (페이지 상단에서 최초 1회)
	request.setCharacterEncoding("UTF-8");

	//같은 이름의 체크박스가 하나인 경우는 일반 파라미터와 처리가 동일하다.
	//체크박스가 선택되었다면 value속성의 "Y"가 전달될 것이고,
	//선택되지 않았다면 null이 된다.
	String isPopup = request.getParameter("is_popup");
	
	//체크박스가 선택되었다면 60초의 유효시간을 갖는 is_popup이라는 이름의 쿠키를 생성한다.
	if(isPopup != null){
		//전송된 값이 있는 경우 저장(혹은 덮어쓰기)\
		String enc = URLEncoder.encode(isPopup,"UTF-8");
		Cookie info = new Cookie("is_popup", enc);
		info.setMaxAge(60); //쿠키의 유효시간(초)
		info.setPath("/"); //쿠키가 유효한 경로 설정
		info.setDomain("localhost"); //쿠키가 유효한 도메인 설정 --> 상용화시에는 사이트에 맞게 수정해야 함
		response.addCookie(info); //쿠키 저장하기
	}
%>
<script type='text/javascript'>
	window.close(); //javascript 현재 창 닫기
</script>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello JSP</title>
</head>
<body>
    
</body>
</html>

opener.jsp에서 if(!isPopup == null){} 일 때 팝업(child.jsp)이 띄워지도록 설정해 놨는데, 팝업(child.jsp)에서 체크박스에 체크를 하고 닫음으로써 child_close.jsp 를 통해 확인 할 수 있듯이 isPopup에 값이 생겼고 쿠키가 생성되었다. 쿠키가 생성 되고 60초 동안은 isPopup은 null값이 아니라서 opener.jsp에 팝업창(child.jsp)이 뜨지 않는다.