자바스크립트 쿠키 사용 로그인 아이디저장 구현 방법

 

자바스크립트 쿠키 사용 로그인 아이디저장 구현 방법

 

 

위의 로그인 창과 같이

아이디 저장 체크박스를 선택하고 로그인 한 경우

쿠키를 사용해 아이디 값을 저장하고

페이지를 다시 열었을 시 쿠키값을 읽어와 보여주도록 구현해 보자.

 

우선 로그인이 성공했을 때 쿠키를 생성하는 함수를 넣는다.

 

setCookie('id', id, 30);  //쿠키 생성

('id'라는 이름으로 id값을 30일동안 쿠키로 저장하겠다.)

 

--쿠키생성함수

function setCookie(cName, cValue, cDay){
 if($('input:checkbox:checked').val()=="on"){
  var expire = new Date();
     expire.setDate(expire.getDate() + cDay);
     cookies = cName + '=' + escape(cValue) + '; path=/ '; // 한글 깨짐을 막기위해 escape(cValue)를 합니다.
     if(typeof cDay != 'undefined') cookies += ';expires=' + expire.toGMTString() + ';';
     document.cookie = cookies;
 }
}

이제 로그인이 성공했다면 id라는 이름으로 id값이 쿠키에 저장되었다.

이제 페이지 로딩시에 쿠키값을 불러와야겠지.

 

 

 

$(function(){
 
 var id = getCookie('id');  //id라는 이름의 쿠키를 가져온다.
 if (id!=''){  //id값이 있으면
  $("#id").val(id);  //input에 id값을 넣고
  $("#pw").focus(); //포커스를 pw에가져가고
  $( "input[name=idChk]:checkbox" ).prop("checked" , true);    //아이디저장 체크박스에 체크한다.
 }else{
  $("#id").focus(); //없으면 id에 포커스
 }
 
});
 
 
 
--쿠키가져오는 함수
 
function getCookie(cName) {
    cName = cName + '=';
    var cookieData = document.cookie;
    var start = cookieData.indexOf(cName);
    var cValue = '';
    if(start != -1){
        start += cName.length;
        var end = cookieData.indexOf(';', start);
        if(end == -1)end = cookieData.length;
        cValue = cookieData.substring(start, end);
    }
    return unescape(cValue);
}

 

구현 완료.