자바스크립트 쿠키에 대해
웹 스토리지에 대해 정리하면서 쿠키에 대한 정리가 필요하여 쿠키에 대해 포스팅 합니다.
쿠키란 무엇인가?
쿠키는 사용자가 웹 사이트를 방문할 경우 해당 사이트에서 사용자의 컴퓨터에 저장하는 정보들을 말합니다.
정보들은 서버에서 저장되는 것이 아니라 사용자의 컴퓨터 또는 로컬에 저장되어 있습니다.
쿠키는 다른 페이지들 사이에서 세션정보를 유지하는데 유익하며 웹 사이트를 방문한 사용자의 성향을 분석하거나 웹 사이트 방문을 트래킹할 수 있습니다.
쿠키의 형태는 웹 스토리지와 동일하게 키와 값으로 이루어져 있습니다. 쿠키는 사용자 컴퓨터(로컬)에 텍스트 형태로 저장이 됩니다. 보통 방문자가 다른 페이지로 이동 했을 때 브라우저가 서버에서 방문자 쿠키를 보내게 됩니다. 서버는 이것을 저장하고 있다가 동일한 사용자임을 판단합니다.
쿠키의 특징
하나의 웹 브라우저에 쿠키를 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=/