[JavaScript/jQuery] 쿠키로 이메일(아이디) 저장 구현하기

로그인 할때 아이디 저장 기능은 많이들 쓰죠!

아이디 저장 기능을 제공하지 않는 사이트를 찾는게 더 힘든 요즘 입니다.

이번에 제가 값 저장 기능. 다시 한번 개발하면서 사용한 소스를 공유 하려고 합니다~

값의 저장에는 여러가지 방법이 있죠.

PHP의 세션으로 웹서버에 어떤 값을 키와 함께 저장할 수 있지만

클라이언트 단에서 쿠키의 사용도 가능합니다! 자바스크립트가 있기에 가능한 일이죠.

이번에 포스팅 할 것은 이 쿠키를 사용하여 어떤 값을 키:값 형태로 브라우저에 저장해서 사용 해보는 것을 보여 드리려고 합니다.

일단 쿠키의 생성(setCookie), 삭제(deleteCookie), 얻기(getCookie)는 인터넷에 여기저기 퍼져있는 자바스크립트 소스 그대로 가져왔습니다! 뛰어나신 프로그래머들이 매우 많기 때문에 스스로 짠 이후 다른 분의 코드를 보는 것도 매우 도움이 되는 것 같아요~

아무튼 이름 모를 훌륭한 프로그래머 님이 정리 해주신 이 세 가지 쿠키 함수를 활용하여 제 프로그램에 붙혔습니다!

먼저 아래는 쿠키 관련 함수 정의 부분 입니다.

function setCookie(cookieName, value, exdays){
   var exdate = new Date();
   exdate.setDate(exdate.getDate() + exdays);
   var cookieValue = escape(value) + ((exdays==null) ? "" : "; expires=" + exdate.toGMTString());
   document.cookie = cookieName + "=" + cookieValue;
}

function deleteCookie(cookieName){
   var expireDate = new Date();
   expireDate.setDate(expireDate.getDate() - 1);
   document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString();
}

function getCookie(cookieName) {
   cookieName = cookieName + '=';
   var cookieData = document.cookie;
   var start = cookieData.indexOf(cookieName);
   var cookieValue = '';
   if(start != -1){
      start += cookieName.length;
      var end = cookieData.indexOf(';', start);
      if(end == -1)end = cookieData.length;
      cookieValue = cookieData.substring(start, end);
   }
   return unescape(cookieValue);
}

이렇게 setCookie, deleteCookie, getCookie 3가지 함수를 정의하면 쿠키를 생성,얻기,삭제 할 준비가 된 것입니다.

대략적으로만 설명 드리자면

setCookie는 쿠키이름과 값, 그리고 유효날짜를 파라미터로 받아서 쿠키를 설정합니다.

deleteCookie는 쿠키이름만 받아서 그 쿠키의 유효기간을 이용하여 유효하지 않게 만들어서 삭제합니다.

getCooke는 쿠키이름을 받아서 그 쿠키에 들어있는 값을 반환합니다.

그럼 이제 어떤 이름을 가진 쿠키를 가져오고, 그 쿠기가 있는지 없는지 유효성을 확인 해볼까요?

<script>
    jQuery(function(){
        var uemail = getCookie("uemail");
        if(uemail) {
            jQuery("#keep_login").attr("checked", true);
            jQuery("#user_email").val(uemail);
        }
    });
</script>

위 소스는 getCookie()로 uemail이란 이름을 가진 쿠키가 있는지 확인하고 그 쿠키가 있다면 이메일 유지 체크박스를 체크 상태로 만들고 그 쿠키에 저장된 이메일 문자열 값을 이메일 입력 필드(input)의 값으로 넣는 것 입니다.

jQuery를 사용하면 attr과 val를 사용하여 태그의 속성과 내용을 쉽게 변경할 수 있습니다.

제이쿼리가 너무 편해서 이젠 jQuery 없으면 어떻게 자바스크립트를 작성하나 싶네요. 

요새 검색하면서 느끼지만 거의 javascript = jquery 라는 등식이 성립하고 있는 것 같습니다.

이제 이메일이라는 값을 저장할 쿠키를 굽는 코드를 살펴보겠습니다.

//이메일 저장
var keepLogin = jQuery("#keep_login");
if(keepLogin[0].checked){
    setCookie("uemail", uemail.val(), 7); 
} else {
    deleteCookie("uemail");
}

네, 위 소스는 실질적인 저장 기능 입니다.

만약 이메일 저장 체크박스(keep_login)가 체크되어 있다면, uemail이라는 이름의 쿠키를 생성하고 입력한 이메일을 넣고, 유효기간을 7일로 정합니다. 체크가 안되있다면 기존 저장된 쿠키를 삭제 합니다.

만약 체크가 되어있지 않다면 uemail 이라는 쿠키를 삭제합니다.

한번 이메일 저장을 했지만 어떤 로그인때에 이메일 저장을 체크하지 않고 로그인을 했다면 이메일 저장이 되어있지 않게 만들기 위해서 입니다.

잘 보셨나요?..

이렇게 자바스크립트(jQuery)에서도 간단하게 쿠키를 활용하여 이메일 저장기능을 구현할 수 있습니다.

꼭 이메일이 아니여도 여러 방면으로 활용할 수 있겠죠! 브라우저가 꺼져도 지워지지 않는 값이니까요.

자바스크립트, jQuery로 구현한 쿠키로 이메일 저장 구현, 생각보다 간단하죠?

여러분 프로젝트에도 바로 적용해보세요!

도움이 되셨다면 아래 공감 버튼을 꾹

▼▼▼▼▼▼