Cookie를 이용하여 아이디 저장하기

Cookie를 이용한 아이디 패스워드 저장하기

대부분 웹 페이지에서 로그인을 할 때 아이디 저장 CheckBox를 볼 수 있습니다.

1. 화면 진입 시 쿠키에 아이디가 저장되어 있는지 확인을 한다.

2. 저장 되어 있다면 화면에 저장된 아이디를 보여준다. 

3. 로그인 버튼 클릭 시 아이디저장 체크박스가 체크되어 있다면 입력된 아이디를 쿠키에 Set한다.

4. 로그인 버튼 클릭 시 아이디저장 체크박스가 체크가 해제되어 있다면 쿠키의 값을 Delete한다.

HTML 화면

<div class="hplogin-in">
<form name="fform" method="post" action="<%=request.getContextPath()%>/LoginProcess.do">
    <input type="hidden" name="forwardurl" value='<c:out value="${param.forwardurl}"/>' >
    <div class="loginput">
        <span class="numlabel">이메일</span> 
        <input type="text" id="loginid" name="loginid" autocomplete="off">
    </div>
    <div class="loginput">
        <span class="numlabel">비밀번호</span> 
        <input type="password" name="loginpassword" autocomplete="off">
    </div>
    <button class="loginbtn" id="loginbtn">로그인</button>
</form>
</div>

jQuery와 Javascript 소스

$(document).ready(function() {
    var userInputId = getCookie("userInputId");
    var setCookieYN = getCookie("setCookieYN");
    
    if(setCookieYN == 'Y') {
        $("#idSaveCheck").prop("checked", true);
    } else {
        $("#idSaveCheck").prop("checked", false);
    }
    
    $("#loginid").val(userInputId); 
    
    //로그인 버튼 클릭
    $('#loginbtn').click(function() {
        if($("#idSaveCheck").is(":checked")){ 
            var userInputId = $("#loginid").val();
            setCookie("userInputId", userInputId, 60); 
            setCookie("setCookieYN", "Y", 60);
        } else {
            deleteCookie("userInputId");
            deleteCookie("setCookieYN");
        }
        
        document.fform.submit();
    });
});

쿠키를 가져오고, 지우고, 저장하는 자바스크립트 함수

//쿠키값 Set
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;
}

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

//쿠키값 가져오기
function getCookie(cookie_name) {
    var x, y;
    var val = document.cookie.split(';');
    
    for (var i = 0; i < val.length; i++) {
        x = val[i].substr(0, val[i].indexOf('='));
        y = val[i].substr(val[i].indexOf('=') + 1);
        x = x.replace(/^\s+|\s+$/g, ''); // 앞과 뒤의 공백 제거하기
        
        if (x == cookie_name) {
          return unescape(y); // unescape로 디코딩 후 값 리턴
        }
    }
}

전체 소스

<script type="text/javascript">
$(document).ready(function() {
    var userInputId = getCookie("userInputId");
    var setCookieYN = getCookie("setCookieYN");
    
    if(setCookieYN == 'Y') {
        $("#idSaveCheck").prop("checked", true);
    } else {
        $("#idSaveCheck").prop("checked", false);
    }
    
    $("#loginid").val(userInputId); 
    
    //로그인 버튼 클릭
    $('#loginbtn').click(function() {
        if($("#idSaveCheck").is(":checked")){ 
            var userInputId = $("#loginid").val();
            setCookie("userInputId", userInputId, 60); 
            setCookie("setCookieYN", "Y", 60);
        } else {
            deleteCookie("userInputId");
            deleteCookie("setCookieYN");
        }
        
        document.fform.submit();
    });
});

//쿠키값 Set
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;
}

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

//쿠키값 가져오기
function getCookie(cookie_name) {
    var x, y;
    var val = document.cookie.split(';');
    
    for (var i = 0; i < val.length; i++) {
        x = val[i].substr(0, val[i].indexOf('='));
        y = val[i].substr(val[i].indexOf('=') + 1);
        x = x.replace(/^\s+|\s+$/g, ''); // 앞과 뒤의 공백 제거하기
        
        if (x == cookie_name) {
          return unescape(y); // unescape로 디코딩 후 값 리턴
        }
    }
}
</script>

딱히 어려울 게 없고, HTML의 ID 그리고 jQuery, Javascript에서 선언된 ID를 잘 비교하여 보면 쉽게 적용 할 수 있었습니다ㅎ.