본문으로 바로가기

자바스크립트 쿠키에 대해

category JavaScript 2017. 8. 8. 09:10
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.


웹 스토리지에 대해 정리하면서 쿠키에 대한 정리가 필요하여 쿠키에 대해 포스팅 합니다.



쿠키란 무엇인가?


쿠키는 사용자가 웹 사이트를 방문할 경우 해당 사이트에서 사용자의 컴퓨터에 저장하는 정보들을 말합니다.

정보들은 서버에서 저장되는 것이 아니라 사용자의 컴퓨터 또는 로컬에 저장되어 있습니다.

쿠키는 다른 페이지들 사이에서 세션정보를 유지하는데 유익하며 웹 사이트를 방문한 사용자의 성향을 분석하거나 웹 사이트 방문을 트래킹할 수 있습니다.

쿠키의 형태는 웹 스토리지와 동일하게 키와 값으로 이루어져 있습니다. 쿠키는 사용자 컴퓨터(로컬)에 텍스트 형태로 저장이 됩니다. 보통 방문자가 다른 페이지로 이동 했을 때 브라우저가 서버에서 방문자 쿠키를 보내게 됩니다. 서버는 이것을 저장하고 있다가 동일한 사용자임을 판단합니다.


쿠키의 특징

하나의 웹 브라우저에 쿠키를 300개 이상 보관할 수 없다.

동일 웹서버에 쿠키를 20개 이상 보관할 수 없다

각 쿠키의 크기는 4KByte를 넘지 못한다.

뒤에서 다룰 도메인 속성을 특별히 지정하지 않으면 쿠키를 설정한 문서보다 상위 단계에서는 호출될 수 없다.



쿠키의 프로퍼티

쿠키는 5가지의 키와 값을 저장하고 있습니다.

document.cookie="name=value[; expires=expires] [; path=path] [; domain=domain] [; secure]";


 property

 description 

 name=value 

 쿠키의 이름과 값을 설정한다.

 expires=date 

 쿠키가 만료되는 기간을 설정합니다. expires값이 설정되지 않는다면 브라우저가 닫히는 순간 소멸됩니다. 

 path=path 

 쿠키가 적용될 사이트의 패스를 지정하고자 하는 경우 이용됩니다.

 domain=domain 

 쿠키를 적용할 도메인을 지정합니다. 

 secure 

  SSL을 이용하여 서버에 쿠키를 전송합니다.




예제를 들어보면

document.cookie="name=ktko; expires=Mon, 07 Aug 2017 00:00:00 GMT"; 와 같이 document.cookie에 값을 대입하였습니다.

name이라는 쿠키에 Key값을 설정하고 value로 ktko를 설정하였습니다. 또한 2017년 8월 7일에 쿠키가 만료되도록 설정하였습니다.


관련 샘플 소스 첨부

<html>
    <head>
        <script type="text/javascript">
            //Cookie 클래스를 생성합니다.
            var Cookie = {
                //document.cookie = "name=value; domain= " 형식으로 생성되기 때문에 데이터 조립을 위해 initData 배열을 생성.
                initData : [],
        
                setCookie : function(name, value, options) {
                    //파라미터에 객체를 options라는 이름으로 가져오고없다면 빈 객체로 {} 설정합니다.
                    options = options || {};
                    //escape()함수는 알파벳과 숫자 및 * , @, - , _ , + , . , / 를 제외한 문자를 모두 16진수 문자로 바꾸어 줍니다. 
                    //이 함수는 쉼표와 세미콜론 같은 문자가 쿠키문자열과의 충돌을 피하기 위해 사용됩니다.
                    this.initData = [ escape(name) + '=' + escape(value) ];
        
                    //쿠키 만료 시간을 설정.
                    if (options.expires) {
                        if (typeof options.expires === 'object'
                                && options.expires instanceof Date) {
                            var date = options.expires;
                            var expires = "expires=" + date.toUTCString();
                            this.initData.push(expires);
                        }
                    } else if (options.expires_day) {
                        var date = new Date();
                        var day = 24 * 60 * 60 * 1000;
                        date.setTime(date.getTime() + options.expires_day * day);
                        var expires = "expires=" + date.toUTCString();
                        this.initData.push(expires);
                    }
        
                    //쿠키가 적용될 도메인으로 example.com 으로 지정시 앞에 모든 서브도메인에서 모두 사용 가능
                    if (options.domain) {
                        this.initData.push("domain=" + options.domain);
                    }
        
                    //쿠키가 적용될 디렉토리로 /dir 로 입력시 /dir로 시작하는(/direc , /dirpath 등) 모든 디렉토리에 적용
                    if (options.path) {
                        this.initData.push("path=" + options.path);
                    }
        
                    //true로 설정하면 보안을 위해 https 프로토콜일때만 쿠키 생성
                    if (options.secure === true) {
                        this.initData.push("secure");
                    }
        
                    //initData Array안에 있는 데이터들마다 "; "를 넣어 연결해줍니다.
                    var cookieString = this.initData.join('; ');
                    console.log(cookieString);
                    document.cookie = this.initData.join('; ');
                },
                
                //쿠키를 가져옵니다.
                getCookie : function(name) {
                    var cookie = document.cookie
                    var cookie_array = cookie.split(";"); //쿠키의 값이 ;로 연석되어 있기 때문에 ;로 짜른다.
        
                    if (cookie_array.length) {
                        for (var index in cookie_array) {
                            var cookiePair = cookie_array[index].split("=");
        
                            if (cookiePair[0].trim() == name)
                                return cookiePair[1]
                        }
        
                        alert(name + " do not existed")
                    } else {
                        alert("Cookie is empty")
                    }
                },
                
                //입력된 값에 대응되는 쿠키를 지웁니다.
                delCookie : function(name, options) {
                    this.setCookie(name, "", options);
                }
            };
        
            function setCookie() {
                var cookie_name = document.getElementById("cookiename").value;
                var cookie_value = document.getElementById("cookievalue").value;
                if (cookie_name == "" || cookie_value == "") {
                    alert("insert Cookie Name or Cookie Value");
                    return;
                }
        
                Cookie.setCookie(cookie_name, cookie_value, {
                    //expires : new Date(),
                    domain : 'localhost',
                    path : '/',
                    secure : false
                });
        
                alert(document.cookie);
            }
        
            function ReadCookie() {
                var cookie_name = document.getElementById("getcookiename").value;
        
                if (cookie_name == "") {
                    alert(document.cookie);
                    return;
                }
                var cookie_value = Cookie.getCookie(cookie_name);
                alert(cookie_value);
            }
        
            function Deletecookie() {
                var cookie_name = document.getElementById("delcookiename").value;
                Cookie.delCookie(cookie_name, {
                    expires_day : -1,
                    domain : 'localhost',
                    path : '/',
                    secure : false
                });
            }
            
            function CheckCookie() {
                alert(document.cookie);
            }
        </script>
    </head>
    <body>
    
        ============================set============================
        <br/> cookie_name :
        <input type="text" id="cookiename" name="cookiename"/>
        <br/> cookie_value :
        <input type="text" id="cookievalue" name="cookievalue" />
        <input type="button" value="set Cookie" onclick="setCookie()"/>
        <br/> ============================get============================
        <br/> get cookie_name :
        <input type="text" id="getcookiename" name="getcookiename"/>
        <input type="button" value="Get Cookie" onclick="ReadCookie()"/>
        <br/> ============================del============================
        <br/> del cookie_name :
        <input type="text" id="delcookiename" name="delcookiename"/>
        <input type="button" value="Delete Cookie" onclick="Deletecookie();"/>
        <br/>
        <input type="button" value="Check Cookie" onclick="CheckCookie();" />
        
    </body>
</html>


쿠키를 저장하는 함수

setCookie : function(name, value, options) {
            //파라미터에 객체를 options라는 이름으로 가져오고없다면 빈 객체로 {} 설정합니다.
            options = options || {};
            //escape()함수는 알파벳과 숫자 및 * , @, - , _ , + , . , / 를
            //제외한 문자를 모두 16진수 문자로 바꾸어 줍니다. 이 함수는 쉼표와 세미콜론 같은 문자가 쿠키문자열과의 충돌을 피하기 위해 사용됩니다.
            this.initData = [ escape(name) + '=' + escape(value) ];

            //쿠키 만료 시간을 설정.
            if (options.expires) {
                if (typeof options.expires === 'object'
                        && options.expires instanceof Date) {
                    var date = options.expires;
                    var expires = "expires=" + date.toUTCString();
                    this.initData.push(expires);
                }
            } else if (options.expires_day) {
                var date = new Date();
                var day = 24 * 60 * 60 * 1000;
                date.setTime(date.getTime() + options.expires_day * day);
                var expires = "expires=" + date.toUTCString();
                this.initData.push(expires);
            }

            //쿠키가 적용될 도메인으로 example.com 으로 지정시 앞에 모든 서브도메인에서 모두 사용 가능
            if (options.domain) {
                this.initData.push("domain=" + options.domain);
            }

            //쿠키가 적용될 디렉토리로 /dir 로 입력시 /dir로 시작하는(/direc , /dirpath 등) 모든 디렉토리에 적용
            if (options.path) {
                this.initData.push("path=" + options.path);
            }

            //true로 설정하면 보안을 위해 https 프로토콜일때만 쿠키 생성
            if (options.secure === true) {
                this.initData.push("secure");
            }

            //initData Array안에 있는 데이터들마다 "; "를 넣어 연결해줍니다.
            var cookieString = this.initData.join('; ');
            console.log(cookieString);
            document.cookie = this.initData.join('; ');
        }


쿠키를 가져오는 함수

getCookie : function(name) {
            var cookie = document.cookie
            var cookie_array = cookie.split(";"); //쿠키의 값이 ;로 연석되어 있기 때문에 ;로 짜른다.

            if (cookie_array.length) {
                for (var index in cookie_array) {
                    var cookiePair = cookie_array[index].split("=");

                    if (cookiePair[0].trim() == name)
                        return cookiePair[1]
                }

                alert(name + " do not existed")
            } else {
                alert("Cookie is empty")
            }
        }



쿠키를 지우는 함수

delCookie : function(name, options) {
            this.setCookie(name, "", options);
        }




쿠키를 공부하다가 알게된 점


* 블로그마다 날짜를 설정할 때 toUTCString을 사용하거나 toGMTString을 사용하였는데 콘솔에서 실행해보니 결과 값이 같아 차이점을 알 수 없었습니다. 차이점을 찾아보았는데 브라우저마다 리턴하는 결과 값이 다를 수 있으니 toGMTString대신 toUTCString()을 사용하는 것이 좋다고합니다.


* 쉼표와 세미콜론 같은 문자가 쿠키문자열과의 충돌을 피하기 위해 escape()함수를 사용합니다. escape()는 알파벳과 숫자 및 * , @, - , _ , + , . , / 를 제외한 문자를 모두 16진수 문자로 바꾸어 줍니다. 



*domain과 path와 같은 옵션을 추가하여 쿠키를 생성하였을 때 똑같이 옵션을 주고 쿠키 만료 시간을 현재시점보다 과거로 돌려야지만 쿠키가 삭제됩니다.


옵션이 없을 경우 쿠키 생성

ktko=29


옵션을 있을 경우 쿠키 생성

ktko=29; domain=localhost; path=/



옵션이 없을 경우 옵션 없이 쿠키 삭제

ktko=; expires=Sun, 06 Aug 2017 15:07:57 GMT



옵션이 있을 경우 생성한 옵션과 동일한 옵션을 주어야 쿠키가 삭제

ktko=; expires=Sun, 06 Aug 2017 15:09:36 GMT; domain=localhost; path=/







저작자표시

'JavaScript' 카테고리의 다른 글

Cookie를 이용하여 아이디 저장하기  (0) 2018.05.16
자바스크립트 하루동안 열지 않기 & 하루에 한번만 띄우기  (0) 2017.08.10
자바스크립트 예외처리  (0) 2017.05.22
자바스크립트 이벤트(Event) 위임하기  (0) 2017.05.18
자바스크립트 브라우저 객체 모델(BOM) - Screen 객체  (0) 2017.01.10
댓글 , 엮인글
KTKO 개발 블로그와 여행 일기
블로그 이미지 ktko 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바