14. 쿠키

- 쿠키

- 쿠키의 특징

• 정보가 클라이언트 PC에 저장됨
• 저장 정보 용량에 제한이 있음(파일 용량은 4kb)
• 보안이 취약
• 클라이언트 브라우저에서 사용 유무를 설정할 수 있음
• 도메인당 쿠키가 만들어짐(웹 사이트당 하나의 쿠키가 만들어짐)

 

- 쿠키의 종류

속성	Persistence 쿠키	Session 쿠키
생성 위치	파일로 생성	브라우저 메모리에 생성
종료 시기	쿠키를 색제하거나 쿠키 설정 값이 종료된 경우	브라우저를 종료한 경우
최초 접속 시 전송 여부	최초 접속 시 서버로 전송	최초 접속 시 서버로 전송되지 않음
용도	로그인 유무 또는 팝업창을 제한할 때	사이트 접속 시 Session 인증 정보를 유지할 때

 

 

- 쿠키 API

메서드	설명
getComment()	쿠키에 대한 설명을 가져옴
getDomain()	쿠키의 유효한 도메인 정보를 가져옴
getMaxAge()	쿠키 유효 기간을 가져옴
getName()	쿠키 이름을 가져옴
getPath()	쿠키의 디렉터리 정보를 가져옴
getValue()	쿠키의 설정 값을 가져옴

setComment(String)	쿠키에 대한 설명을 설정함
setDomain(String)	쿠키의 유효한 도메인을 설정함
setMaxAge(int)	쿠키 유효 기간을 설정함
setPath(String)	쿠키의 디렉터리 정보를 설정함
setValue(String)	쿠키 값을 설정함

 

 

 

- 세션 쿠키 사용하기

 

- SetCookieValue 서블릿 생성

package sec02.ex01;

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLEncoder;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/set")
public class SetCookieValue extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		Date date = new Date(); // 현재 날짜 import는 util
		
		// 쿠키 생성, 쿠키값 지정시 인코딩을 해야함
		Cookie c1 = new Cookie("jsp", URLEncoder.encode("JSP 프로그래밍", "utf-8"));
		Cookie c2 = new Cookie("oracle", URLEncoder.encode("오라클 데이터베이스", "utf-8"));
		
		// 쿠키 유효시간을 지정하지 않으면 세션쿠키 생성(브라우저 메모리 - 브라우저 종료시 삭제)
		// 쿠키 유효시간을 지정하면 퍼시스턴트 쿠키 생성(파일로 저장)
		c1.setMaxAge(60*60*24); // 단위 : 초 (지금 값은 24시간)
		c1.setMaxAge(-1); // 유효시간을 음수로 하면 세션 쿠키로 바뀐다. 
		
		response.addCookie(c1); // 생성된 쿠키를 브라우저로 전송
		response.addCookie(c2);
		
		out.print("현재 시간 : " + date + "<br>");
		out.print("문자열의 Cookie에 저장");
	}

}

 

- GetCookieValue 서블릿 생성

package sec02.ex01;

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/get")
public class GetCookieValue extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		Cookie[] cookies = request.getCookies();
		
		if(cookies != null) {
			for(Cookie c : cookies) {
				out.print("쿠키 이름 : " + c.getName() + "<br>");
				out.print("쿠키 값 : " + URLDecoder.decode(c.getValue(), "utf-8") + "<br>");
			} 
		} else {
			out.print("지정된 쿠키 없음");
		}
	}

}

쿠키값 지정시에는 인코딩 해야함

인코딩없이 공백을 넣으면 예외가 뜸

인코딩하고 출력시엔 디코딩도 해줘야함

 

http://localhost:8090/pro10/set 요청 해보자 (set)

 

브라우저에서 F12 눌러서 개발자 도구

크롬 기준으로 애플리케이션에 쿠키를 확인해보자

Expires 보면 쿠키 삭제되는 시간이 나온다 한국시간이 아니고 GMT 런던시를 기준으로함

한국시로 바꾸려면 9시간을 더하면 됨

쿠키가 확인된다.

 

 

 

 

http://localhost:8090/pro10/get 요청 해보자 (get)

 

브라우저를 종료후 다시 실행해서 get 요청 해보자

 

세션 쿠키는 삭제됐고 비어진걸 알수있다.

 

 

setMaxAge(-1) 음수로 지정하면 세션쿠키로 변함

 

 

 

- 모든 쿠키 삭제

 

- DelAllCookieValue 서블릿 생성

package sec02.ex01;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/delAll")
public class DelAllCookieValue extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		Cookie[] cookies = request.getCookies();

		if(cookies != null) {
			for(Cookie c : cookies) {
				c.setMaxAge(0); // 유효시간을 0으로 지정하면 쿠키가 삭제된다.
				response.addCookie(c); // 브라우저에 알려줘야함
			}
		}
		out.print("<h1>모든 쿠키를 삭제함</h1>");
	}

}

 

http://localhost:8090/pro10/set 으로 요청해서 쿠키 만들고

get으로 확인후 

delAll 로 요청해보면 모든 쿠키가 삭제돼 있다

 

 

 

- 특정 쿠키 삭제

 

- DelCookieValue  서블릿 생성

package sec02.ex01;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/delCookie")
public class DelCookieValue extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		
		// 특정 쿠키 삭제
		Cookie cookie = new Cookie("jsp", null);
		cookie.setMaxAge(0);
		response.addCookie(cookie);
		
		out.print("jsp 쿠키 삭제");
	}

}

 

set으로 요청해서 쿠키 생성후

get으로 확인

delCookie로 요청해서 해당 쿠키만 삭제됐는지 확인

 

 

 

 

- 자바스크립트로 쿠키 사용

 

- cookie.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
cookie.html

</body>
<script>
let time = 86400e3; // 하루 86400e3  --> e3: 10의 세제곱 (1000)
let date = new Date(Date.now() + time); // Date.now() 현재시간, 추가되는 시간 단위 : 밀리세컨드
date = date.toUTCString(); // GMT포맷(UTC, 세계협정시, 런던기준, 대한민국시간-9시간)

document.cookie = "user=John;expires="+date;
// max-age 만료시간 지정 (단위 초)
document.cookie = "person=John;max-age=86400";

console.log(document.cookie);

// 쿠키삭제 : 만료시간을 0으로 지정하면 쿠키가 삭제된다.
document.cookie = "person=John;max-age=0";

// 삭제후
console.log(document.cookie);
</script>
</html>

 

브라우저 개발자 도구에 애플리케이션을 확인 해보자 (만료시간 설정됨)

 

브라우저 개발자 도구에 콘솔을 확인해보면

위가 삭제전

아래가 삭제후

 

 

- cookie2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>cookie2.html

</body>
<script>
	let name = "name";
	let value = "John Smith";
	name = encodeURIComponent(name);
	value = encodeURIComponent(value);
	document.cookie = name + " = " + value;

	name = encodeURIComponent("jsp");
	value = encodeURIComponent("jsp프로그래밍");
	document.cookie = name + " = " + value;

	// 특정이름의 쿠키 값 가져오기
	let jspValue = getCookie("jsp");
	console.log(jspValue);
	
	
	function getCookie(name) {
		let matches = document.cookie.match(new RegExp("(?:^|; )"
				+ name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1')
				+ "=([^;]*)"));
		return matches ? decodeURIComponent(matches[1]) : undefined;
	}
</script>
</html>

콘솔 확인

 

 

 

- 쿠키 이용해 팝업창 제한하기

 

- popupTest.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	// 문서를 다 읽으면 pageLoad함수 호출
	window.onload = pageLoad;

	function pageLoad() {
		if(getCookie("notShowPop")!="true") {
			window.open("popUp.html", "pop", "width=400, height=500");	
		}
	}
	
	function getCookie(name) {
		let matches = document.cookie.match(new RegExp("(?:^|; )"
				+ name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1')
				+ "=([^;]*)"));
		return matches ? decodeURIComponent(matches[1]) : undefined;
	}
</script>
</head>
<body>

</body>
</html>

 

- popUp.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>팝업창</title>
<script>
	function setPopUpStart(obj) {
		if(obj.checked) {
			let expiredDate = new Date();
			let days = 1;
			expiredDate.setDate(expiredDate.getDate() + days);
			expiredDate = expiredDate.toUTCString();
			document.cookie = "notShowPop=true;expires="+expiredDate;
		}
		window.close(); // 창닫기
	}
</script>
</head>
<body>
	<h1>알림 팝업창입니다.</h1>
	<form>
		<input type="checkbox" onclick="setPopUpStart(this)"> 오늘 더이상 팝업창을 띄우지 않기
	</form>
</body>
</html>

 

체크하고 쿠키 확인함

쿠키가 true로 들어있을때 새로고침 해보자

팝업이 안뜨면 됨.