자스 쿠키 예제

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

}

var userInputId = getCookie("userInputId");

$("input[name='id']").val(userInputId);

if($("input[name='id']").val() != ""){ // 그 전에 ID를 저장해서 처음 페이지 로딩 시, 입력 칸에 저장된 ID가 표시된 상태라면,

        $("#idSaveCheck").attr("checked", true); // ID 저장하기를 체크 상태로 두기.

    }

    $("#idSaveCheck").change(function(){ // 체크박스에 변화가 있다면,

        if($("#idSaveCheck").is(":checked")){ // ID 저장하기 체크했을 때,

            var userInputId = $("input[name='id']").val();

            setCookie("userInputId", userInputId, 7); // 7일 동안 쿠키 보관

        }else{ // ID 저장하기 체크 해제 시,

            deleteCookie("userInputId");

        }

    });

    // ID 저장하기를 체크한 상태에서 ID를 입력하는 경우, 이럴 때도 쿠키 저장.

    $("input[name='id']").keyup(function(){ // ID 입력 칸에 ID를 입력할 때,

        if($("#idSaveCheck").is(":checked")){ // ID 저장하기를 체크한 상태라면,

            var userInputId = $("input[name='id']").val();

            setCookie("userInputId", userInputId, 7); // 7일 동안 쿠키 보관

        }

    });    

<div class="loginBox">

<div class="">

<p class="id">

<input type="text" id="id" name="id">

</p>

<p class="pw">

<input type="password" id="password" name="password">

</p>

<button>로그인</button>

</div>

<p><input type="checkbox" id="idSaveCheck"> 아이디저장 <a href="javascript:;" onclick="window.open('/uat/uia/idSearch.do', 'idPasswordSearch' ,'width=555px, height=479px, left=50, top=50' );" style="cursor:pointer">아이디/비밀번호 찾기</a></p>

</div>