※ 사용자 입력값과 체크박스의 ID 를 잘보고 선언
페이지 상단에 jquery 사용을 위해 선언
=====================================================================================================================================================
<script type="text/javascript" src="/common/vendor/jquery/jquery.min.js"></script>
=====================================================================================================================================================
* common.js 파일에 선언함
=====================================================================================================================================================
/* 로그인 ID 저장 */
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;
}
/* 로그인 ID 삭제 */
function deleteCookie(cookieName){
var expireDate = new Date();
expireDate.setDate(expireDate.getDate() - 1);
document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString();
}
/* 로그인 ID 저장된 값 가져오기 */
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);
}
=====================================================================================================================================================
ID 태그의 id : userid
아이디 저장 체크박스의 id : idSaveCheck
=====================================================================================================================================================
<input type="text" class="form-control form-control-user" style="text-align: left;" id="userid" name="userid" aria-describedby="emailHelp" placeholder="ID를 입력해주세요">
<input type="checkbox" class="custom-control-input" id="customCheck">
=====================================================================================================================================================
=====================================================================================================================================================
$(document).ready(function(){
// 저장된 쿠키값을 가져와서 ID 칸에 넣어준다. 없으면 공백으로 들어감.
var key = getCookie("key");
$("##userid").val(key);
if($("##userid").val() != ""){ // 그 전에 ID를 저장해서 처음 페이지 로딩 시, 입력 칸에 저장된 ID가 표시된 상태라면,
$("##customCheck").attr("checked", true); // ID 저장하기를 체크 상태로 두기.
}
$("##customCheck").change(function(){ // 체크박스에 변화가 있다면,
if($("##customCheck").is(":checked")){ // ID 저장하기 체크했을 때,
setCookie("key", $("##userid").val(), 7); // 7일 동안 쿠키 보관
}else{ // ID 저장하기 체크 해제 시,
deleteCookie("key");
}
});
// ID 저장하기를 체크한 상태에서 ID를 입력하는 경우, 이럴 때도 쿠키 저장.
$("##userid").keyup(function(){ // ID 입력 칸에 ID를 입력할 때,
if($("##customCheck").is(":checked")){ // ID 저장하기를 체크한 상태라면,
setCookie("key", $("##userid").val(), 7); // 7일 동안 쿠키 보관
}
});
});
=====================================================================================================================================================