[jQuery] 로그인 시, ID를 쿠키에 저장하기
웹 브라우저에서 서버에 데이터를 요청하고 응답받는 과정에서
응답(response)에는 여러 데이터와 원하는 페이지 정보가 존재하게 된다.
응답(response)에는 웹 브라우저에 저장하고자 하는 쿠키(cookie)라는 것도 존재하는데
브라우저에 쿠키를 저장하면 유저가 해당 웹사이트에 방문할 때마다
브라우저는 요청(request)할 때 해당 쿠키도 같이 보내게 된다.
쿠키에는 유저의 정보 뿐만 아니라, 해당 웹사이트의 언어설정을 변경하면
서버에서는 쿠키를 주고 유저가 선택한 언어를 저장하게 된다.
다음 포스팅에서 자세히 설명하겠지만 쿠키와 세션(session)의 가장 큰 차이점은
쿠키는 브라우저에 저장 되는 것이고, 세션은 서버에 저장된다는 점이다.
이번 포스팅에서는 쿠키를 이용해서 유저의 아이디를 저장해보려고 한다.
웹 브라우저에서 로그인을 시도할 때에 쉽게 접할 수 있는 체크박스가 있다.
위의 이미지에서도 확인할 수 있듯이 'ID 저장' 이라는 체크박스다.
이 ID 저장이라는 기능은 따지고 보면 유저가 원하면 유저의 ID를 쿠키에 저장하는 것이다.
유저의 ID를 쿠키에 저장하는 방법을 jQuery로 구현해보려고 한다.
cookie.js
<script src="http://lab.alexcican.com/set_cookies/cookie.js" type="text/javascript" ></script>
우선, cookie.js 파일을 CDN 방식으로 import 한다.
해당 태그가 없다면 아래의 코드가 제대로 작동하지 않을 것이다.
login.jsp
<div class="checkbox">
<label> <input type="checkbox" value="remember-me" id="chk_save_id">
Remember me
</label>
</div>
<script type="text/javascript">
$(document).ready(function(){
let user_id = $.cookie("user_id");
if (user_id != null) {
$("#id").val(user_id);
$("#chk_save_id").prop("checked", true);
}
$("#chk_save_id").click(function() {
if ($("#chk_save_id").is(":checked")) {
if ($("#id").val().trim() == "") {
alert('ID를 입력해주세요');
$("#id").focus();
$("#chk_save_id").prop("checked", false);
} else {
// cookie를 저장 (expires : 유효기간)
$.cookie("user_id", $("#id").val().trim(), {
expires : 7,
path : './'
});
}
} else {
$.removeCookie("user_id", {
path : './'
});
}
});
});
체크박스의 id를 chk_save_id 라고 지정하고, 위와 같이 jQuery 코드를 작성하면 된다.
체크박스를 선택했을 때, 체크가 되어 있는 상태라면 유효성 검사를 실시하고 적절한 ID가 입력되면
해당 아이디를 쿠키에 저장한다. 체크를 해제하면 $.removeCookie를 통해 쿠키에서 삭제한다.
실행 결과
오늘은 jQuery를 이용해 쿠키를 브라우저에 저장하는 방법을 알아봤는데 생각보다 간단하다.
다음에는 세션에 관한 내용을 포스팅 할 예정이다.