37일차(2)/jsp(26) : cookie 예제
- test_cookie폴더 예제
- ${ } EL을 사용하는 방식이 아닌, jsp에서 쿠키를 저장하는 방법!
<cookie_form.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/cookie_form.jsp</title>
</head>
<body>
<h1>쿠키 테스트</h1>
<p>
클라이언트의 웹브라우저에 특정 key 값으로 문자열을 저장할수 있다.
저장할수 있는 문자열은 Base64 인코딩 형식의 64가지 문자열을 저장할수 있다.
</p>
<form action="cookie_save.jsp" method="post">
<label for="msg">웹브라우저(client side)에 저장할 문자열 </label>
<input type="text" name="msg" id="msg"/>
<button type="submit">저장</button>
</form>
</body>
</html>- msg라는 키값에 입력된 내용을 쿠키로 저장한다.
<cookie_save.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//폼전송되는 문자열 읽어오기
String msg=request.getParameter("msg");
//1. 쿠키 객체 생성 new Cookie("key", value);
Cookie cook=new Cookie("savedMsg", msg);
//2. 쿠키 유지시간 (초단위)
cook.setMaxAge(60); //60초 테스트
//3. HttpServletResponse 객체에 담는다.
response.addCookie(cook);
//4. 응답할때 쿠키가 자동으로 응답되고 클라이언트의 웹브라우저에 저장이 된다.
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/cookie_save.jsp</title>
</head>
<body>
<p>웹 브라우저에 savedMsg 라는 키값으로 "<%=msg %>" 를 저장했습니다.</p>
<a href="cookie_read.jsp">저장된 문자열 확인 해보기</a>
</body>
</html>- 특정 키값으로 문자열을 빼내서 저장한다.
- new Cookie() 로 객체를 생성하고 유지시간을 입력한 후 addCookie()로 쿠키 값이 저장된다.
response.addCookie(key값) : 쿠키 저장 방법
<cookie_read.jsp>
- 저장한 쿠키를 읽어낼 때는?
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//HttpServletRequest 객체를 이용해서 요청과 함께 전달된 쿠키 읽어내기
Cookie[] cooks=request.getCookies();
//"savedMsg" 라는 키값으로 저장된 문자열을 저장할 변수
String savedMsg=null;
if(cooks!=null){
//반복문 돌면서 쿠키 객체를 하나씩 참조
for(Cookie tmp:cooks){
//쿠키의 키값을 읽어온다.
String key=tmp.getName();
if(key.equals("savedMsg")){//만일 우리가 찾는 키값이라면
//해당 키값으로 저장된 value 를 읽어낸다.
savedMsg=tmp.getValue();
}
}
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/cookie_read.jsp</title>
</head>
<body>
<p>savedMsg 라는 키값으로 저장된 문자열 : <%=savedMsg %></p>
<%-- EL을 활용하면 아래와 같다 --%>
<p>savedMsg 라는 키값으로 저장된 문자열 : ${cookie.savedMsg.value }</p>
<a href="cookie_form.jsp">다시 테스트</a>
</body>
</html>- 쿠키가 여러개 저장되어 있을 수 있다.
request.getCookies();
- request 객체 안에 getCookies라는 메소드가 있다! 리턴타입은 cookie 배열 [ ] 이다.
- 반복문을 돌면서 쿠키 객체를 하나씩 참조해서, key값을 읽어와서 우리가 찾는 값을 발견하면 value를 추출한다.
- savedMsg라는 키 값과 비교해서 value를 읽어온다.
이때 읽어온 값을 savedMsg에 저장해 주는 것!
- EL을 활용하면 ${cookie.savedMsg.value} 만 작성하면 된다.
- 위에 있는 java 코드와 상관없이 ${} 부분만 있으면 된다!
- 클라이언트에게 단순히 출력하는 목적이라면 굳이 java 코드를 활용할 필요 없다.
- EL을 이용해서 같은 결과를 훨씬 간편하고 편리하게 추출 가능
<cookie_form2.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/cookie_form.jsp</title>
</head>
<body>
<h1>쿠키 테스트</h1>
<p>
클라이언트의 웹브라우저에 특정 key 값으로 문자열을 저장할수 있다.
저장할수 있는 문자열은 Base64 인코딩 형식의 64가지 문자열을 저장할수 있다.
(Tomcat 8.5 는 자동으로 처리 되어서 인코딩이 필요 없다)
</p>
<form action="cookie_save2.jsp" method="post">
<label for="msg">웹브라우저(client side)에 저장할 문자열 </label>
<input type="text" name="msg" id="msg"/>
<button type="submit">저장</button>
</form>
</body>
</html>
- 인코딩, 디코딩을 거치는 과정 추가!
- 공백을 포함해서 에러 없이 안전하게 모든 문자열을 저장하려면 인코딩→디코딩 과정을 거치는 것이 좋다.
- abcd1234가나다라 를 입력했을 때, 검사에서 저장된 value값을 보면 이렇게 보인다.
- 인코딩-디코딩을 거치는 작업!
<cookie_save2.jsp>
<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//폼전송되는 문자열 읽어오기
String msg=request.getParameter("msg");
//모든 문자열을 다 저장하려면 tomcat 8 이하 버전에서는 인코딩을 해서 저장을 한다.
String encodedMsg=URLEncoder.encode(msg, "utf-8");
//1. 쿠키 객체 생성 new Cookie("key", value);
Cookie cook=new Cookie("savedMsg", encodedMsg);
//2. 쿠키 유지시간 (초단위)
cook.setMaxAge(60); //60초 테스트
//3. HttpServletResponse 객체에 담는다.
response.addCookie(cook);
//4. 응답할때 쿠키가 자동으로 응답되고 클라이언트의 웹브라우저에 저장이 된다.
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/cookie_save2.jsp</title>
</head>
<body>
<p>웹 브라우저에 savedMsg 라는 키값으로 "<%=msg %>" 를 저장했습니다.</p>
<a href="cookie_read2.jsp">저장된 문자열 확인 해보기</a>
</body>
</html>- 인코딩, 디코딩 내용이 추가로 들어갔다.
<cookie_read2.jsp>
<%@page import="java.net.URLDecoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//HttpServletRequest 객체를 이용해서 요청과 함께 전달된 쿠키 읽어내기
Cookie[] cooks=request.getCookies();
//"savedMsg" 라는 키값으로 저장된 문자열을 저장할 변수
String savedMsg=null;
if(cooks!=null){
//반복문 돌면서 쿠키 객체를 하나씩 참조
for(Cookie tmp:cooks){
//쿠키의 키값을 읽어온다.
String key=tmp.getName();
if(key.equals("savedMsg")){//만일 우리가 찾는 키값이라면
//해당 키값으로 저장된 value 를 읽어내서 디코딩을 한다.
savedMsg=URLDecoder.decode(tmp.getValue(),"utf-8");
}
}
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/cookie_read2.jsp</title>
</head>
<body>
<p>savedMsg 라는 키값으로 저장된 문자열 : <%=savedMsg %></p>
<a href="cookie_form2.jsp">다시 테스트</a>
</body>
</html>
- 인코딩, 디코딩 여부만 다르고 다른부분은 이전 예제와 같다.
<cookie_form3.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//쿠키에 저장된 아이디와 비밀번호를 담을 변수
String savedId="";
String savedPwd="";
//쿠키에 저장된 값을 위의 변수에 저장하는 코드를 작성해 보세요.
Cookie[] cooks=request.getCookies();
if(cooks!=null){
//반복문 돌면서 쿠키객체를 하나씩 참조해서
for(Cookie tmp: cooks){
//저장된 키값을 읽어온다.
String key=tmp.getName();
//만일 키값이 savedId 라면
if(key.equals("savedId")){
//쿠키 value 값을 savedId 라는 지역변수에 저장
savedId=tmp.getValue();
}
if(key.equals("savedPwd")){
savedPwd=tmp.getValue();
}
}
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/cookie_form3.jsp</title>
</head>
<body>
<form action="login.jsp" method="post" >
<table>
<tr>
<th><label for="id">아이디</label></th>
<td><input type="text" name="id" id="id" value="<%=savedId %>"/></td>
</tr>
<tr>
<th><label for="pwd">비밀번호</label></th>
<td><input type="password" name="pwd" id="pwd" value="<%=savedPwd %>"/></td>
</tr>
<tr>
<td></td>
<td>
<label>
<input type="checkbox" name="isSave" value="yes" ${not empty cookie.savedId ? 'checked' : ' ' } />
로그인 정보 저장
</label>
</td>
</tr>
<tr>
<td></td>
<td><button type="submit">로그인</button></td>
</tr>
</table>
</form>
</body>
</html>
<login.jsp> 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//가상의 로그인 페이지
String id=request.getParameter("id");
String pwd=request.getParameter("pwd");
//체크박스를 체크한 상태로 로그인 버튼을 누르면 null이 아니다.(체크하지 않으면 null)
String isSave=request.getParameter("isSave");
if(isSave!=null){
//아이디 비밀번호를 쿠키로 응답하고 1주일 동안 유지되도록 한다.
Cookie cook1=new Cookie("savedId", id);
Cookie cook2=new Cookie("savedPwd", pwd);
cook1.setMaxAge(60*60*24*7);
cook2.setMaxAge(60*60*24*7);
response.addCookie(cook1);
response.addCookie(cook2);
}else{
//특정 키값으로 저장된 쿠키값 삭제하기(value에는 아무값이나 넣어도상관없다.)
Cookie cook1=new Cookie("savedId", "");
Cookie cook2=new Cookie("savedPwd", null);
cook1.setMaxAge(0);
cook2.setMaxAge(0);
response.addCookie(cook1);
response.addCookie(cook2);
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쿠키 테스트 페이지</title>
</head>
<body>
<p><%=id %>님 로그인 되었습니다.</p>
<a href="cookie_form3.jsp">다시 테스트</a>
</body>
</html>
- null이 아닐 경우, id,pwd를 저장해서 쿠키에 심어두기!
- isSave라는 이름의 체크박스에 체크되어있는지 아닌지 여부를 확인한다.
- 이미 저장된 savedId 와 savedPwd 가 있으면 폼에서 복구해서 보여준다.
- 60*60*24*7 초 로 정해두어서, 일주일 동안 이 값이 저장된다.
Cookie cook1=new Cookie("savedId", "");
cook1.setMaxAge(0);
response.addCookie(cook1);- 쿠키 삭제 방법 : 동일한 키 값으로 setMaxAge를 0으로 하면 된다.
- 어차피 삭제되므로 value는 아무 값이나 들어가도 상관없다.
<input type="checkbox" name="isSave" value="yes" ${true ? 'checked' : ''} />
- checked를 출력할 것인지 아무것도 출력하지 않을 것인지를 3항 연산자로 작성한 것!
<input type="checkbox" name="isSave" value="yes" ${ not empty cookie.savedId ? 'checked' : ' ' } />
- id,비번이 저장되어 있으면 checked를 출력하고, 아니면 아무것도 출력하지 않으려면 이렇게 작성.
- 위와 같이 저장하면 savedId에 값이 저장되어 있는 이상
새로고침해도 체크박스가 계속 체크된 상태로 나타난다.
'국비교육(22-23)' 카테고리의 다른 글
| 37일차(4)/jsp(28) : jQuery 예제 (1) | 2022.11.30 |
|---|---|
| 37일차(3)/jsp(27) : jQuery 기초 (0) | 2022.11.29 |
| 37일차(1)/jsp(25) : EL, cookie (1) | 2022.11.29 |
| 36일차(2)/jsp(24) : 회원가입시 유효성 검증(validation) 기능 구현 (0) | 2022.11.28 |
| 36일차(1)/CSS(7) : bootstrap CSS 적용하기 (0) | 2022.11.28 |