COOKIE(쿠키)에 ID 값 저장하기. ID 저장 체크박스 만들기.

3번의 ID 저장 체크박스 만들기.

1. html 에 체크박스 그려주기.

<div>
    <input type="checkbox" id="useCookie" style="position: relative; left: 0;"/>ID 저장
</div>

 

2. javascript 

//쿠키값 set
function setCookie(cookieName, value, exdays){
    let exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    let cookieValue = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toGMTString());
    document.cookie = cookieName + "=" + cookieValue;
}

//쿠키값 delete
function deleteCookie(cookieName){
    let expireDate = new Date();
    expireDate.setDate(expireDate.getDate() -1);
    document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString();
}

//쿠키값 get
function getCookie(cookieName){
    cookieName = cookieName + "=";
    let cookieData = document.cookie;
    let start = cookieData.indexOf(cookieName);
    let cookieValue = '';
    if(start != -1){
        start += cookieName.length;
        let end = cookieData.indexOf(';', start);
        if(end == -1)end = cookieData.length;
        cookieValue = cookieData.substring(start, end);
    }
    return unescape(cookieValue); //unescape로 디코딩 후 값 리턴
}

$(function(){
    /* id 저장 체크박스 기능 추가 */
    var userInputId = getCookie("userInputId");//저장된 쿠기값 가져오기
    $("#manager_id").val(userInputId); 

    if($("#manager_id").val() != ""){ // 그 전에 ID를 저장해서 처음 페이지 로딩
        $("#useCookie").attr("checked", true); // ID 저장하기를 체크 상태로 두기.
    }

    $("#useCookie").change(function(){ // 체크박스에 변화가 발생시
        if($("#useCookie").is(":checked")){ // ID 저장하기 체크했을 때,
            var userInputId = $("#manager_id").val();
            setCookie("userInputId", userInputId, 7); // 7일 동안 쿠키 보관
        }else{ // ID 저장하기 체크 해제 시,
            deleteCookie("userInputId");
        }
    });

    // ID 저장하기를 체크한 상태에서 ID를 입력하는 경우, 이럴 때도 쿠키 저장.
    $("#manager_id").keyup(function(){ // ID 입력 칸에 ID를 입력할 때,
        if($("#useCookie").is(":checked")){ // ID 저장하기를 체크한 상태라면,
            var userInputId = $("#manager_id").val();
            setCookie("userInputId", userInputId, 7); // 7일 동안 쿠키 보관
        }
    });
});

출처 : https://rh-cp.tistory.com/69