쿠키와 세션 및 HTML5 저장소
- HTTP 나 HTTPS는 연결형 통신이기는 하지만 한 번 요청을 하고 응답을 하면 연결이 해제됩니다.
- 이전에 무엇을 했고 지금 무엇을 하고 있는지를 알 수 가 없습니다.
- 이전 상태나 현재 작업한 내용을 사용할 필요가 있을 때 이를 저장하기 위한 방법이 필요
- Cookie: 클라이언트에 데이터를 저장하고 서버가 사용할 수 있도록 해주는 기술
- Session: 서버에 저장하고 서버가 사용할 수 있도록 해주는 기술
- HTML5 저장소: 클라이언트에 저장하고 클라이언트에서 사용
- Cookie는 클라이언트에 저장된 데이터인데 사용을 하기 위해서는 서버에 전송을 하고 사용을 해야 하기 때문에 클라이언트에서만 필요한 데이터인데 불필요한 전송을 하게 됩니다.
- 대표적인 예가 id 저장 같은 개념입니다.
- id 저장은 웹 브라우저에서만 사용하는데 쿠키를 사용하게 되면 서버에 전송한 후 클라이언트가 다시 돌려받아서 사용해야 합니다.
- 이러한 문제를 해결하기 위해서 HTML5에서 등장한 기술이 WebStorage, WebSQL, Indexed DB 의 개념입니다.
- 최근의 미국의 대형 포털 들에서 Cookie를 이용해서 사용자의 동작을 저장한 후 이를 분석해서 UI 개선에 이용하는 사례가 늘고 있습니다. 대표적인 곳이 Oracle 입니다.
Cookie
- 데이터를 클라이언트에 저장해두고 서버와 클라이언트가 사용하는 데이터
- 서버 측에서 쿠키에 데이터를 저장하는 명령을 호출하면 클라이언트의 브라우저에 쿠키가 생성되고 클라이언트에서 요청을 서버에게 하면 쿠키의 모든 내용은 서버에 전달됩니다.
분석의 목적 및 방법 - 분석을 하는 것은 log 파일이 많이 쓰인다.
1.직접 log 파일을 남기는 것
2.쿠키를 사용하는 방법
1) 쿠키의 구성
- name
- value
- 유효 시간 : 쿠키의 수명을 설정하기 위한 값
- 도메인 : 이 쿠키를 사용할 수 있는 도메인(웹 애플리케이션 - 프로젝트)을 설정
- 경로 : 쿠키를 사용할 수 있는 경로를 설정
2) 쿠키 생성 - 서버에서 생성(Java 가 생성)
Cookie ? = new Cookie(String name, String value);
response.addCookie(?);
- 만들기는 서버가 만들지만 저장은 클라이언트에 저장됨
- IE 같은 경우는 이러한 쿠키가 파일로 만들어져서 임시 인터넷 파일 디렉토리에 저장됩니다.
3) Cookie 클래스의 메소드
String getName()
String getValue()
String getDomain()
String getPath()
int getMaxAge()
void setName(String name)
void setValue(String value)
void setDomain(String domain)
void setPath(String path)
void setMaxAge(int maxAge) : 현재 시간을 기준으로 초 단위로 설정을 합니다.
이 때 음수를 대입하면 브라우저가 닫힐 때 삭제됩니다.
4) 서버에서 클라이언트가 전송한 모든 쿠키 읽기
Cookie [] request.getCookies() : 배열 , 쿠키캑체가 전부 리턴됨
5) 쿠키 삭제
- 쿠키는 삭제하는 메소드가 없고 setMaxAge(0)을 호출해서 수명을 0로 만들어 줍니다.
6) 쿠키의 이름과 값에 한글이 포함되어 있으면 인코딩을 해서 저장해야 합니다.
실습 : 쿠키
1) Dynamic Web Project 생성(web.xml 파일을 포함하도록 생성)
2) Tomcat의 lib 디렉토리의 servlet-api.jar 파일을 프로젝트의 WebContent/WEB-INF/lib 디렉토리에 복사
3) WebContent 디렉토리에 index.jsp 파일을 만들고 쿠키 생성 파일로 링크를 생성
<a href="./cookie/cookiecreate.jsp">쿠키 생성</a><br/>
4) WebContent 디렉토리에 cookie라는 디렉토리를 만들고 cookiecreate.jsp 파일을 만들어서 작성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쿠키 생성</title>
<%
//쿠키 생성
Cookie cookie = new Cookie("language", "java");
//쿠키 저장
response.addCookie(cookie);
%>
</head>
<body>
<a href="./cookieread.jsp">쿠키 읽기</a>
</body>
</html>
5) 실행
- 실행해서 쿠키 생성까지 이동한 후 크롬에서 마우스 오른쪽을 누르고 [검사]를 실행한 후 application 탭에서 cookies에 확인
6) cookie 디렉토리에 cookieread.jsp 파일을 만들고 쿠키를 읽어서 출력하는 코드를 작성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쿠키 읽어서 출력하기</title>
</head>
<body>
<%
//모든 쿠키 가져오기
Cookie [] cookies = request.getCookies();
//모든 쿠키를 순회하면서 쿠키의 값을 출력
for(Cookie cookie : cookies){
out.println("<p>" + cookie.getName() +
":" + cookie.getValue() + "</p>");
}
%>
</body>
</html>
7) 쿠키의 수명을 설정하는 코드를 cookiecreate.jsp 파일에 추가
<%
//쿠키 생성
Cookie cookie = new Cookie("language", "java");
//쿠키의 수명을 설정
cookie.setMaxAge(60);
//쿠키 저장
response.addCookie(cookie);
%>
8) index.jsp 파일에서 쿠키 생성을 다시 클릭
- 브라우저 창에서 검사 기능을 이용해서 쿠키의 수명을 확인해보면 됩니다.
9) cookieread.jsp 파일로 이동해서 쿠키의 내용을 확인하고 60초 후에 새로 고침을 해서 쿠키의 내용이 소멸되는지 확인
10) cookiecreate.jsp 파일의 코드를 수정
<%
//다른 브라우저에서 한글이 깨진다면 자바를 직접 입력하지 말고
//java.net.URLEncoder.encode("자바", "utf-8")로 인코딩해서 대입하면 됩니다.
//쿠키 생성
Cookie cookie = new Cookie("language", "자바");
//쿠키의 수명을 설정
cookie.setMaxAge(60);
//쿠키 저장
response.addCookie(cookie);
%>
실습 : 쿠키를 이용한 ID 저장
1) index.jsp 파일에 아이디와 비밀번호 입력란을 만들고 아이디 저장 체크박스를 체크할 수 있는 화면으로 이동할 수 있는 링크 생성
<a href="./cookie/login.jsp">쿠키를 이용한 아이디 저장</a><br/>
2) cookie 디렉토리에 login.jsp 파일을 만들고 코드를 작성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
<form action="./loginprocess.jsp" method="post">
<label for="id">아이디</label>
<input type="text" name="id" required="required" /><br/>
<label for="pw">비밀번호</label>
<input type="password" name="pw" required="required" /><br/>
<input type="checkbox" name="idsave" value="idsave" />아이디 저장<br/>
<input type="submit" value="로그인" />
</form>
</body>
</html>
3) loginprocess.jsp 파일을 생성해서 로그인 처리하는 코드를 작성
- idsave 란에 체크가 되어 있으면 id 라는 쿠키를 만들어서 아이디를 저장
- 체크가 되어 있지 않으면 id 라는 쿠키를 삭제
- 처리가 끝나면 loginresult.jsp 파일로 리다이렉트
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
//파라미터 읽기
String id = request.getParameter("id");
String pw = request.getParameter("pw");
String idsave = request.getParameter("idsave");
//idsave 란에 체크가 안되어 있으면 id라는 쿠키를 삭제
//idsave 란에 체크가 되어 있으면 id 라는 쿠키에 입력한 아이디를 저장
Cookie cookie = new Cookie("id", id);
if(idsave == null){
cookie.setMaxAge(0);
}
response.addCookie(cookie);
//결과 페이지로 리다이렉트
response.sendRedirect("./loginresult.jsp");
%>
</body>
</html>
4) loginresult.jsp 파일을 만들고 작성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 처리 결과</title>
</head>
<body>
<h3>로그인 처리를 수행했습니다.</h3>
<a href="./login.jsp">로그인</a>
</body>
</html>
5) login.jsp 파일을 수정
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
<%
//쿠키를 전부 가져오기
Cookie [] cookies = request.getCookies();
//아이디 와 체크박스에 출력할 문자열 변수
String id = "";
String check = "";
//쿠키가 1개라도 있다면
if(cookies != null){
//쿠키를 순회하면서 쿠키의 이름이 id인 것을 찾습니다.
for(Cookie cookie : cookies){
//쿠키의 이름이 id라면 그 때 값을 id변수에 저장
//check에 체크박스 체크 여부를 저장
if(cookie.getName().equals("id")){
id = cookie.getValue();
check = "checked='checked'";
break;
}
}
}
%>
<form action="./loginprocess.jsp" method="post">
<label for="id">아이디</label>
<input type="text" name="id" required="required" value='<%=id %>'/>
<br/>
<label for="pw">비밀번호</label>
<input type="password" name="pw" required="required" />
<br/>
<input type="checkbox" name="idsave" value="idsave" <%=check%> />
아이디 저장
<br/>
<input type="submit" value="로그인" />
</form>
</body>
</html>