[JQuery] 로그인시 아이디 저장 기능

로그인 화면에서 로그인 버튼에 loginCheck.js에 있는 loginProcess() 호출

- loginForm.jsp

<div class="container">
	<form action="/auth/loginProc" method="POST">
		<div class="form-group">
			<label for="username">Username</label> <input type="text" name="username" class="form-control" placeholder="Enter username" id="username">
		</div>

		<div class="form-group">
			<label for="password">Password</label> <input type="password" name="password" class="form-control" placeholder="Enter password" id="password" onKeyDown="if(event.keyCode==13)">
		</div>

		<div class="form-group form-check">
			<label class="form-check-label"> 
			<input class="form-check-input" id="save-id" name="save-id" type="checkbox"> 
            Remember me
			</label>
		</div>
		<div>
			<button id="btn-login" class="btn btn-secondary"  onClick="loginProcess()">Login</button>
			</div>
	</form>

</div>

<script src="/js/loginCheck.js"></script>

 

- 쿠키 저장, 불러오기, 삭제 함수

 

- loginCheck.js


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 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);
}

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

 

- loginCheck.js

$(function(){
    var username = getCookie("Cookie_username");
    $("#username").val(username);
    
    if($("#username").val() != "")
        $("#save-id").attr("checked", true);
});
 
function loginProcess(){
    var username = document.getElementById('username');
    var password = document.getElementById('password');
    var btnlogin = document.getElementById('btn-login');
    
    if(username.value==""){
        alert("Enter username");
        username.focus();
        return false;
    }else if(password.value==""){
        alert("Enter password");
        password.focus();
        return false;
    }else if($("#save-id").is(":checked")){
        var username = $("#username").val();
        setCookie("Cookie_username", username, 30);
        btnlogin.submit();
    }else{
        deleteCookie("Cookie_username");
        btnlogin.submit();
    }
}