[JAVA](JSP)Cookie01_로그인_입문용

쿠키를 이용해서 아이디 체크박스 클릭에 대한 코드 작성해보기.

 

쿠키를 이용해서

1. 1주일간 상태 유지.

2. 체크가 되어있어야함.

3.체크하지 않는 상태 기억x 기억되고있어도 지우기.

 

해당 조건에 맞게끔 쿠키 사용.

 

보면 간단해 보이지만...(3시간 걸림...)ㅎㅎ

순서를 정해서 하나씩 차근차근 작성했다면 적어도 1시간 정도는 단축할 수 있었음.

 

1. .jsp파일에서 로그인 폼 만들기

<form action="<%=request.getContextPath() %>/login/loginCheck.do" method="post">
		<input type="text" name="mem_id" placeholder="아이디" value = "<%=Objects.toString(failed_id, "")%>"/>
		<input type="text" name="mem_pass" placeholder="비밀번호"/>
		<input type="checkbox" name ="saveId" value = "saveId">아이디기억하기
		<input type="submit" value="로그인"/>
</form>

ex) 실행 시.

쿠키고 머고 아무것도 없는 상태.

 

2. server_side에서 parameter와 cookie 세팅하기.

2_1. 파라미터 값 들고오기(확인)

2_2. 쿠키 세팅 및 저장하기(확인)

2_3. 값 validate(점검) 하기

2_4. 언체크로 로그인 시 쿠키 삭제하기.

	
		// parameter 받기		
		String checkBox = req.getParameter("saveId");
		String mem_id = req.getParameter("mem_id");
		String mem_pass = req.getParameter("mem_pass");
		// 쿠키 저장하기		
		Cookie CheckBoxCookie = null;
		CheckBoxCookie = new Cookie("saveId", mem_id);
		
		if(checkBox != null && !checkBox.isEmpty()) {
			// 쿠키 세팅 후 response에 담기
			CheckBoxCookie.setMaxAge(60*60*24*7);
			resp.addCookie(CheckBoxCookie);
		}else {
			// 비체크시 초기화시키기
			CheckBoxCookie.setMaxAge(0);
			resp.addCookie(CheckBoxCookie);
		}

 

3. 로그인 후 띄워줄 view 페이지 만들기

<%
		// 1, 2 -> LoginCheckServelt_cookie.java
		// 3. cookie 값 들고와서 변수 저장하기
		// 3_1. cookie 중 saveId(name)가 존재하면 value 저장하기
		// 4. 로딩 시 만약 존재한다면 아이디와 체크박스 채우기
		// 4_1 존재하지 않을 시 체크박스 풀고 아이디 공란.
		Cookie[] cookies = request.getCookies();
		String savedId = "";
		boolean checked = false;
		if(cookies!=null){
			for(Cookie tmp : cookies){
				String value = URLDecoder.decode(tmp.getValue(), "UTF-8");
				if(tmp.getName().contains("saveId")){
					savedId = value;
					checked = true;
				}
			}
			
		}
	%>

 

4. 서버사이드에 쿠키를 저장했다면 이제 로그인 페이지에서 저장된 쿠키를 사용해야한다.

<%
		Cookie[] cookies = request.getCookies();
		String savedId = "";
		boolean checked = false;
		if(cookies!=null){
			for(Cookie tmp : cookies){
				String value = URLDecoder.decode(tmp.getValue(), "UTF-8");
				if(tmp.getName().contains("saveId")){
					savedId = value;
					checked = true;
				}
			}
		}
%>

<form action="<%=request.getContextPath() %>/login/loginCheck.do" method="post">
		<input type="text" name="mem_id" placeholder="아이디" value = "<%=Objects.toString(failed_id, "")%>"/>
		<input type="text" name="mem_pass" placeholder="비밀번호"/>
		<input type="checkbox" name ="saveId" value = "saveId">아이디기억하기
		<input type="submit" value="로그인"/>
</form>

<script type="text/javascript">
		$(function(){
			var checked = <%= checked%>
			if(checked){
				$("input[name='mem_id']").val(<%=savedId%>);
				$("input[name='saveId']").attr("checked", true);
			}
		})
</script>

이렇게 작성해 보았다. 이제 확인하는 일만 남음.

 

4. 테스트 해보기.

다시 로그인 페이지로 오게되면 아이디가 저장되어있고 체크박스에 체크도 잘 되어있다.

cookie를 보면 쿠키 만료 기간과 값 모두 잘 들어가있다.

4_1. 언체크로 로그인 시

쿠키값들이 잘 삭제되어 있다.

 

끝.

 

Uploaded by Notion2Tistory v1.1.0