mygomii

[script&Jquery] #쿠키(Cookie)를 이용한 ID정보기억 본문

JavaScript&JQuery

[script&Jquery] #쿠키(Cookie)를 이용한 ID정보기억

mygomii 2018. 3. 17. 23:13
반응형

쿠키를 이용한 아이디 기억하기


1
2
3
4
5
<input type="text" id="my_id">
 
<input type="checkbox" id="remember" value="로그인 정보 기억하기"
<label for="remember">로그인 정보 기억하기</label>
 
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
$(document).ready(function(){
    // 저장된 쿠키값을 가져와서 ID 칸에 넣어준다. 없으면 공백으로 들어감.
    var userInputId = getCookie("userInputId");
    $("input[id='my_id']").val(userInputId); 
     
    if($("input[id='my_id']").val() != ""){ 
// 그 전에 ID를 저장해서 처음 페이지 로딩 시, 입력 칸에 저장된 ID가 표시된 상태라면,
        $("#remember").attr("checked"true); // ID 저장하기를 체크 상태로 두기.
    }
     
    $("#remember").change(function(){ // 체크박스에 변화가 있다면,
        if($("#remember").is(":checked")){ // ID 저장하기 체크했을 때,
            var userInputId = $("input[id='my_id']").val();
            setCookie("userInputId", userInputId, 7); // 7일 동안 쿠키 보관
        }else// ID 저장하기 체크 해제 시,
            deleteCookie("userInputId");
        }
    });
     
    // ID 저장하기를 체크한 상태에서 ID를 입력하는 경우, 이럴 때도 쿠키 저장.
    $("input[id='user_id']").keyup(function(){ // ID 입력 칸에 ID를 입력할 때,
        if($("#remember").is(":checked")){ // ID 저장하기를 체크한 상태라면,
            var userInputId = $("input[id='my_id']").val();
            setCookie("userInputId", userInputId, 7); // 7일 동안 쿠키 보관
        }
    });
 
    //쿠키를 위한 함수 
    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);
    }
    
});

cs


반응형