본문 바로가기

IT

쿠키를(cookie) 이용한 아이디 저장

반응형

웹에서 로그인시 사용자 아이디를 저장하면
다시 로그인 창에 접속할때 전에 로그인한 아이디가 자동으로
입력되어서 사용자에게 편리성을 제공해줍니다.

다음은 처리 코드입니다

 

1. 로그인 

<input type="text" id="userId">
<input type="checkbox" id="idSaveCheck">아이디 저장하기

2. 아이디 저장 

$(document).ready(function(){
  
     
    var key = getCookie("key");
    $("#userId").val(key); 
      
    if($("#userId").val() != ""){
        $("#idSaveCheck").attr("checked", true); 
    }
      
    $("#idSaveCheck").change(function(){ 
        if($("#idSaveCheck").is(":checked")){ 
            setCookie("key", $("#userId").val(), 7); 
        }else{ 
            deleteCookie("key");
        }
    });
      
    
    $("#userId").keyup(function(){ 
        if($("#idSaveCheck").is(":checked")){ 
            setCookie("key", $("#userId").val(), 7); 
        }
    });
});
  
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);
}
반응형