[JAVASCRIPT/JQUERY] 쿠키를 이용한 ID 저장

 

 

현재 서비스 중 인 웹 페이지에서 아이디 저장 체크박스만 있고 동작하지 않는걸 알았다! (왜 아무도 말안했지..)

그래서 쿠키를 이용해 아이디 저장을 체크하고 로그인하면 쿠키로 저장되고 불러오는 부분을 

하단의 블로그를 참고해 처리했고, 자바스크립트(2번)와 제이쿼리(3번) 두가지 코드로 올려본다!
setCookie, getCookie, deleteCookie는(4번) 공통이다.

 

 

1. HTML

<input type="text" id="ID" name="ID" placeholder="아이디를 입력해주세요.">

<input type="checkbox" id="checkId"/> 아이디저장

 

2. JAVASCRIPT

window.onload = function() {
	
    // 저장된 쿠키값을 가져와서 ID 칸에 넣어준다. 쿠키값 없으면 공백.
    var userLoginId = getCookie("userLoginId");
    document.getElementById("ID").value = userLoginId;
	
    // ID가 있는경우 아이디 저장 체크박스 체크
    if(document.getElementById("ID").value != ""){
    	document.getElementById("checkId").checked = true;
    }
	
    // 아이디 저장하기 체크박스 onchange
    var checkId = document.getElementById("checkId");
    
    checkId.onchange = function (event) {
        if(checkId.checked){ //checked true
            var userLoginId = document.getElementById("ID").value;
            setCookie("userLoginId", userLoginId, 30); // 30일 동안 쿠키 보관
        }else{ //checked false
        	deleteCookie("userLoginId");
        }
    };
    
    // 아이디 저장하기가  눌린상태에서, ID를 입력한 경우
    var idInput = document.getElementById("ID");
    
    idInput.addEventListener("keyup", function(e) {
    	if(checkId.checked){ //checked true
        	var userLoginId = document.getElementById("ID").value;
            setCookie("userLoginId", userLoginId, 30); // 30일 동안 쿠키 보관
        }
     })
}

 

3. JQUERY

$(document).ready(function(){
	
    // 저장된 쿠키값을 가져와서 ID 칸에 넣어준다. 쿠키값 없으면 공백.
    var userLoginId = getCookie("userLoginId");
    $("input[name='ID']").val(userLoginId); 
    
    // ID가 있는경우 아이디 저장 체크박스 체크
    if($("input[name='ID']").val() != ""){
    	$("#checkId").attr("checked", true);
    }
    
    // 아이디 저장하기 체크박스 onchange
    $("#checkId").change(function(){
    	if($("#checkId").is(":checked")){  //checked true
        	var userLoginId = $("input[name='ID']").val();
            setCookie("userLoginId", userLoginId, 30); // 30일 동안 쿠키 보관
         }else{ //checked false
         	deleteCookie("userLoginId");
        }
    });
     
     
     // 아이디 저장하기가  눌린상태에서, ID를 입력한 경우
     $("input[name='ID']").keyup(function(){
     	if($("#checkId").is(":checked")){  //checked true
            var userLoginId = $("input[name='ID']").val();
            setCookie("userLoginId", userLoginId, 30); // 30일 동안 쿠키 보관
        }
    });

})

 

4. 쿠키 set, delete, get furnction

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

 

쿠키를 저장, 삭제, 불러오는 방법과 설명은 구글에서!

자바스크립트 쿠키 - Google 검색

자바스크립트 쿠키 - Google 검색

 

참고: https://zero-gravity.tistory.com/245

[jQuery/javascript] 쿠키(Cookie)를 이용한 ID 저장.