[Javascript] Cookie, jQuery로 로그인 ID 저장하기 기능 구현하기

● 쿠키(Cookie)란?

    - 브라우저에 저장되는 작은 크기의 문자열

    - 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달

    - 서버는 쿠키를 받아서, 사용자의 정보를 추적하거나, 사용자의 환경 설정을 저장하는 등의 용도로 사용

    - Ex) 사용자 환경 설정 저장, 로그인 상태 유지, 광고 개인화, 사용자 행동 추적

    - ❗안전하지 않는 데이터를 저장하는 데 사용해서는 안 됨. (Ex : 사용자 비밀번호)

 

● 구현 필요 부분

    1. 로그인 폼

        - ID 입력 칸(input text), ID 저장 체크박스(checkbox) 필수

 

<form class="login-group" id="loginForm">
    <div class="item">
        <label for="usrId" class="form-label">ID</label>
        <input type="text" name="usrId" id="usrId" class="form-control">
    </div>
    <div class="item">
        <label for="pwd" class="form-label">PW</label>
        <input type="password" id="pwd" name="pwd" class="form-control">
    </div>
    <div class="check-item">
        <input type="checkbox" class="form-check-input" id="saveId"><label for="saveId">아이디 저장</label>
    </div>
    <div class="btn-item">
        <button type="submit" class="login-btn">LOGIN</button>
    </div>
</form>

 

    2. 로그인 페이지 로드 시 쿠키에 저장된 아이디 값 확인

 

$(function () {
    // 로그인 폼 초기화
    init();
    
    function init(){
        const saveId = getCookie("saveId");
        
        // 쿠키에 저장된 아이디가 있을 경우, ID input 값 추가
        if(saveId != "" && typeof(saveId) != "undefined"){ 
            $("#saveId").prop("checked", true);
            $("#usrId").val(saveId);
        } else { // 쿠키에 저장된 아이디값이 없을 경우, 체크 해제
            $("#saveId").prop("checked", false);
        }
    }         
});

// 쿠키 조회
// name : 쿠키값
function getCookie(name) {
    const cookie = document.cookie;
    if (document.cookie != "") {
        var cookieArray = cookie.split("; ");
        for ( var index in cookieArray) {
            var cookieName = cookieArray[index].split("=");
            if (cookieName[0] == name) {
                return cookieName[1];
            }
        }
    } return ;
}

 

    3. 로그인 시 ID 저장 체크박스 여부에 따라 쿠키값 설정

 

// 로그인 form submit event
$("#loginForm").submit(function () {
    let usrInfo = $(this).serializeObject();

    axios.post('/login', usrInfo)
    .then(response => {
        if($("#saveId").prop("checked")){ // 체크 시 쿠키에 ID 저장
            setCookie("saveId", $("#usrId").val(), 7); // 7일간 ID 저장
        } else{ // 체크 해제 시 쿠키에서 ID 삭제
            deleteCookie("saveId");
        }

        window.location.href = '/';
    })
    .catch(error => {
        alert(error.response.data);
    });

    return false;
});

// 쿠키 설정
// name : 쿠키명
// value :  쿠키값
// expiredays : 쿠키 만료일
function setCookie(name,value,expiredays){
    const date = new Date();
    date.setDate(date.getDate() + expiredays);
    document.cookie = escape(name) + "=" + escape(value) + "; path=/; expires=" + date.toUTCString();
}

// 쿠키 삭제
// name : 쿠키명
function deleteCookie(name) {
    const expireDate = new Date();
    expireDate.setDate(expireDate.getDate() - 1);
    document.cookie = name + "= " + "; expires=" + expireDate.toGMTString();
}

 

 

※ ID 저장 체크박스 선택/해제 시마다 쿠키값 저장/삭제를 해도 되지만 그렇게 구현할 경우,

    체크박스 선택 후 아이디 입력하는 경우와 같은 경우를 위해 키보드 입력 시마다 쿠키값 재저장을 해야 함.

    클라이언트 쪽에서 특별한 요청이 없는 경우, 위와 같이 로그인 실행 시 쿠키값 설정하는 것을 추천!