🌏 WEB/📰 HTML

HTML 기초 - 쿠키

쿠키

웹 브라우저에서 서버로 어떤 데이터를 요청하면,

서버측에서는 알맞은 로직을 수행한 후 데이터를 웹 브라우저에 응답

서버는 웹 브라우저와의 관계를 종료

웹브라우저에 응답 후 관계를 끊는 것은 http 프로토콜의 특징

연결이 끊겼을 때 어떤 정보를 지속적으로 유지하기 위한 수단으로 쿠키라는 방식을 사용

쿠키는 서버에서 생성, 클라이언트 측에 특정 정보를 저장

서버에 요청 할 때 마다 쿠키의 속성값을 참조 또는 변경 가능

쿠키 관련 메소드

setMaxAge() : 쿠키 유효기간을 설정 합니다.

setpath() : 쿠키사용의 유효 디렉토리를 설정 합니다.

setValue() : 쿠키의 값을 설정 합니다.

setVersion() : 쿠키 버전을 설정 합니다.

getMaxAge() : 쿠키 유효기간 정보를 얻습니다.

getName() : 쿠키 이름을 얻습니다.

getPath() : 쿠키사용의 유효 디렉토리 정보를 얻습니다.

getValue() : 쿠키의 값을 얻습니다.

getVersion() : 쿠키 버전을 얻습니다.

// login-form.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
	<h1>로그인 페이지</h1>
	<form action="login-ok.jsp" method="get">
		ID : <input type="text" class="id" name="id"><br>
		PW : <input type="password" id="pw" name="pw"><br>
		<input type="checkbox" name="id-check" value="ok"> 아이디 저장
		<input type="submit" value="로그인">
	</form>

</body>
</html>

// login-ok.jsp
// 처음 쿠키 생성

<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
	<h1> 쿠키 생성 완료 </h1>
	<%
		Cookie info = new Cookie("test",URLEncoder.encode("hello cookie","utf-8"));
		
		info.setMaxAge(60*60);
		info.setPath("/");
		
		response.addCookie(info);
	%>

</body>
</html>

// 클라이언트가 어떠한 요청을 하고, 서버에서 클라이언트에게 받은 쿠키를 추출 
// login-form.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
	<%
		Cookie[] cookie = request.getCookies();
		String id ="";		
		
		for(int i=0 ; i<cookie.length ; i++){
			if(cookie[i].getName().equals("test")){
				id = cookie[i].getValue();
			}
		}
	%>
	<h1>로그인 페이지</h1>
	<form action="login-ok.jsp" method="get">
		ID : <input type="text" class="id" name="id" value="<%=id%>"><br>
		PW : <input type="password" id="pw" name="pw"><br>
		<input type="checkbox" name="id-check" value="ok"> 아이디 저장
		<input type="submit" value="로그인">
	</form>

</body>
</html>

// login-ok.jsp

<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
	<h1> 쿠키 생성 완료 </h1>
	<%
		String[] idCheck = request.getParameterValues("id-check");
		String id = request.getParameter("id");
		
		if(idCheck !=null && idCheck[0].equals("ok")){
			
			Cookie info = new Cookie("test",URLEncoder.encode(id,"utf-8"));
			
			info.setMaxAge(60*60);
			info.setPath("/");
			
			response.addCookie(info);
			
		}else{
			// 쿠키 삭제
			Cookie[] cookie = request.getCookies();
			for(int i=0; i<cookie.length; i++){
				
				if(cookie[i].getName().equals("test")){
					cookie[i].setMaxAge(0);
					cookie[i].setPath("/");
					response.addCookie(cookie[i]);
					
				}
			}
			
		}

	%>

</body>
</html>

아이디 저장을 눌렀을 때 쿠키로 인해 새로고침을 해도 아이디가 사라지지 않음

저작자표시 비영리 동일조건

'🌏 WEB > 📰 HTML' 카테고리의 다른 글

HTML 기초 - 실습 ( 게시판 만들기 ) (0)	2022.06.15
HTML 기초 - 세션 (0)	2022.06.15
HTML 기초 - JSP (0)	2022.06.15
HTML 기초 - CSS (0)	2022.06.15
HTML 기초 - 로그인 창 (0)	2022.06.15

Contents

새소식

인기 검색어

HTML 기초 - 쿠키

'🌏 WEB > 📰 HTML' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바