[ jquery ] [ javascript ] 쿠키를 이용한 아이디 저장 > gnuboard

css 부분에 다음의 코드를 추가한다.

[code]

.mem_login{margin-top:15px;}

.mem_login .mem_login_id{display:inline-block;margin-right:50px;}

.mem_login .mem_login_auto{display:inline-block;}

[/code]

html 부분에 다음의 코드를 추가한다.

[code]

<dl class="mem_login">

    <dd class="mem_login_id"><input type="checkbox" id="idSaveCheck"><label for="idSaveCheck">아이디저장</label></dd>

    <dd class="mem_login_auto"><input type="checkbox" name="auto_login" id="login_auto_login"><label for="login_auto_login">자동로그인</label></dd>

</dl>

[/code]

javascript 부분에 다음의 코드를 추가한다.

[code]

$(function(){

    // 저장된 쿠키값을 가져와서 ID 칸에 입력. 없으면 공백.

    var userId = get_cookie("userId");

    $("input[name='mb_id']").val(userId);

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

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

    }

    $("#idSaveCheck").change(function(){ // 체크박스 변화 유무,

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

            var userId = $("input[name='mb_id']").val();

            set_cookie("userId", userId, 7); // 7일 동안 쿠키 보관

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

            delete_cookie("userId");

        }

    });

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

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

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

            var userId = $("input[name='mb_id']").val();

            set_cookie("userId", userId, 7); // 7일 동안 쿠키 보관

        }

    });

});

[/code] 

추천1 비추천0