[자바스크립트]쿠키 저장 및 읽기 함수를 정형화시키기

개발관련/Javascript 2012. 3. 11. 16:06 |
?
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<script type="text/javascript">
    // 페이지 로드 이벤트 잡기
    window.onload = Page_Load;
     
    function Page_Load() {
        // 저장된 쿠키 읽어오기
        displayCookie();
 
        // 여러개의 쿠키 리스트를 <span> 태그에 출력
        displayCookieList();
 
        // btnSubmit_Click 버튼의 클릭이벤트 적용
        document.getElementById("btnSubmit").onclick = btnSubmit_Click;
 
        // 클릭이벤트 적용
        document.getElementById("btnSetAndGet").onclick = btnSetAndGet_Click;
    }  
 
    // 쿠키 읽어오는 함수
    function displayCookie() {
        var txtName = "";
        // 쿠키 여부 확인
        if (document.cookie != "") {
            // 여러개의 쿠키 읽어오기
            var cookies = document.cookie.split("; ");
            // 쿠키 개수만큼 반복
            for (var i=0; i<cookies.length; i++) {
                if (cookies[i].split("=")[0] == "txtName")  {
                    //alert(document.cookie);  // txtName=red;
                    txtName = cookies[i].split("=")[1];            
                }
            }
        }
        document.getElementById("txtName").value = txtName;
    }
 
    function btnSubmit_Click() {
        // txtName에 저장된 값을 쿠키에 저장
        setCookie();
        setCookies("txtemail", "test@a.com", 1); //테스트 쿠키 저장
    }
 
    // 쿠키 저장 함수
    function setCookie() {
        // 쿠키 소멸시기
        var expireDate = new Date();
        expireDate.setMonth(expireDate.getMonth() + 1);
        var txtName = document.getElementById("txtName").value;
        // 쿠키 저장
        document.cookie = "txtName=" + txtName + "; path=/; expires=" + expireDate.toGMTString();
        alert("쿠키 저장");
    }
 
    // 쿠키 저장 함수
    function setCookies(cookieName, cookieValue, expireDays) {
        var expireDate = new Date();
        expireDate.setDate(expireDate.getDate() + expireDays);  // 넘겨온 일자 값: 1
        document.cookie = cookieName + "=" + cookieValue + "; path=/; expires=" + expireDate.toGMTString();    
    }
 
    // 쿠키 리스트 출력 함수
    function displayCookieList() {
        var str = "";
        if (document.cookie == "") {
            str = "입력된 쿠키가 없습니다!";
        }
        else {
            // 여러개의 쿠키를 읽어온다.
            var cookies = document.cookie.split("; ");
            for (var i=0; i<cookies.length; i++) {
                str += "쿠키이름 : " + cookies[i].split("=")[0] +
                    ", 쿠키값: " + cookies[i].split("=")[1] + "<br />
";             
            }
        }
         
        document.getElementById("lstCookies").innerHTML = str;
    }
 
    //[!] 특정 쿠키 이름에 따른 값을 읽어오는 함수
    function getCookieValue(cookieName)
    {
        // 여러개의 쿠키를 읽어온다.
        var cookies = document.cookie.split("; ");
        for (var i=0; i<cookies.length; i++) {
            // 쿠키 이름이 같으면  
            if (cookieName == cookies[i].split("=")[0])
            {
                return cookies[i].split("=")[i]; // 해당 쿠키값 반환
            }
        }  
        // 기본값
        return 0;
    }
 
    //
    function btnSetAndGet_Click() {
        setCookies("myCookie", "안녕하세요!", 1); // 쿠키 저장
        document.getElementById("myCookie").innerHTML = getCookieValue("myCookie"); // 쿠키 읽기
         
    }
</script>
    <form action="#">
        <input type="text" name="txtName" id="txtName">
        <input type="button" name="btnSubmit" id="btnSubmit" value="로그인">
        <hr>
        <span id="lstCookies"></span>
        <hr>
 
        <input type="button" id="btnSetAndGet" name="btnSetAndGet" value="쿠키 저장 및 출력">
        <br>
        <span id="myCookie"></span>
    </form>

쿠키이름 : txtName, 쿠키값: 레드

안녕하세요! 

'개발관련 > Javascript' 카테고리의 다른 글

[Javascript]Javascript Minification  (0) 2012.03.19
[자바스크립트]쿠키 삭제하기  (0) 2012.03.11
[자바스크립트]다중 쿠키 저장 및 읽어오기  (0) 2012.03.09
[자바스크립트]쿠키 저장 및 읽어오기  (0) 2012.03.09
[자바스크립트]클로저 (Closure) 예제  (0) 2012.03.09
Posted by 파노카페
:

티스토리툴바