JDBC 개발자 수업 86일차 - 쿠키(cookie) - 로그인시 아이디 기억하기

쿠키(cookie)

---

쿠키(cookie)

[ 정의 ]

- 브라우저가 관리하는 데이터 저장 파일(저장소)

- 텍스트 파일

- 특정 사이트에 현재 접속한 브라우저(사용자)에 대한 개인 정보를 저장하는 공간이다.

- 웹 서버가 사용자에 정보를 저장하는 용도 사용

- 쿠키에 대한 접근: JavaScript, Servlet(JSP)

 

[ 데이터 저장소 비교 ]

데이터 저장소	설명	장점	단점
DB (Oracle)	각 사용자별로 데이터를 저장	전문적이다.	비싸다.(비용, 노동력 등...)
session(Servlet/JSP)	개인 정보 저장 객체,   서버 메모리 위치	가볍고 빠르다. 추가 설치 비용X	대용량 데이터 저장X,   접속 종료되면 소멸(*****)
cookie	개인 정보 저장 파일	가볍고 빠르다. 추가 설치 비용X	대용량 데이터 저장X   (최대 4KB)

 

[ 게시판 만들때 로그인 기능에서 인증 티켓 방식 비교 ]

session	- 개인공간   - 전역공간(사이트내의 페이지를 이동해서 계속 유지)   - 유효 공간(접속 종료시)
cookie	- 개인공간   - 전역공간(사이트내의 페이지를 이동해서 계속 유지)   - 유효 기간(개발자 지정)

 

[ 쿠키 예제 ]

- 로그인 기능에서 아이디 기억하기 버튼을 추가하여 입력한 아이디 기억하기!

 

1) cookie.js > getCookie, setCookie 만들기

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let ca = document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

 

2) Servlet > 주소 가상 매핑

@WebServlet("/cookie/ex01.do")
public class Ex03 extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/cookie/ex01.jsp");
		dispatcher.forward(req, resp);
	}
}

 

3) JSP > 간단한 폼 만들기 + cookie.js에서 만든 getCookie, setCookie 함수 이용하기

<!-- 간단한 ID, PW 입력 폼 만들기 -->
<form method="POST" action="loginok.do">
  <table class="table table-bordered" style="width: 300px;">
      <tr>
          <th style="width: 100px;">아이디</th>
          <td><input type="text" name="txtid" id="txtid" class="form-control"></td>
      </tr>
      <tr>
          <th>암호</th>
          <td><input type="password" name="txtpw" id="txtpw" class="form-control"></td>
      </tr>
      <tr>
          <td colspan="2">
              <input type="button" class="btn btn-default" value="로그인" id="btn">
              <label><input type="checkbox" id="cb"> 아이디 저장하기</label>
          </td>
      </tr>
  </table>
</form>

<script src="<%= request.getContextPath() %>/asset/js/cookie.js"></script>
<!-- 쿠키 자바스크립트 -->
<script>

	$('#btn').click(function() {
				
		// 아이디 저장하기		
		if ($('#cb').prop('checked')) {
			setCookie('id', $('#txtid').val(), 100); // 100일 동안 저장
			
		} else {
			// 로그인 + 아이디 저장하기X
			// 만료 시간을 현재 시간보다 과거로 지정 > 쿠키 자동 소멸
			setCookie('id', '', -1); 
		}
		
		// 로그인 처리!!!
		this.form.submit(); // 폼 전송(에뮬레이터 함수)
		
	});//btn.click
	
	// 페이지 로드
	// -> 아이디 저장하기 쿠키가 있으면.. 아이디를 읽어서 텍스트 박스에 세팅하기
	if (getCookie('id') != "") {
		$('#txtid').val(getCookie('id'));
		$('#cb').prop('checked', true);
		$('#txtpw').focus();
	} else {
		$('#txtid').focus();
	}

</script>

 

4) 결과 페이지 (loginok.do는 따로 만들지 않았으므로, error가 뜨는게 정상)

- 아이디 저장하기 X

아이디 저장하기 버튼을 안눌렀으므로, 로그인 후, 다시 페이지를 돌아오면 ID가 비워져 있는 모습이다.

 

- 아이디 저장하기 O

아이디 저장하기 버튼을 클릭후 로그인하고 다시 페이지 화면으로 돌아오면 아이디가 기억되는 모습을 확인할 수 있다.

---

MEMO>

# Cookie를 사용할때 getCookie, setCookie 함수는 따로 만들 필요없이, 구글에 검색하면 쉽게 찾을 수 있다.

# Cookie에는 2가지 종류가 있다. 
      1) 메모리 쿠키 : 만료 시간을 지정하지 않은 경우, 브라우저가 종료되면 쿠키도 같이 소멸된다.
      2) 하드 쿠키    : 만료 시간을 지정하면 만료 시간까지 쿠키를 보관한다.

# 오늘도 오전 수업, 오후 팀작업!