자바스크립트 개발 환경은 Microsoft Visual Studio 2015 버전 HTML 기능 및 Chrome을 이용하고 있습니다.
Cookie란?
Cookie는 데이터이면서, 우리가 현재 사용하는 컴퓨터에 작은 텍스트파일로 저장되어있는 것이다.
우리가 경험해본 내용을 비추어 생각해보자.
어떤 사이트에 접근을 하고 '하루 동안 이 창을 보지 않기'라는 문구를 본적이 있는가?
아니면, 로그인을 위해 로그인 정보 저장, 자동 로그인 같은 경우를 본적 있는가?
사실상 브라우저는 내용을 기억할 공간이 없다. 따라서 그러한 것을 기억하도록 도와주는 것이 쿠키이다.
쿠키를 알아보기 전, 쿠키가 저장되는 방식은 name - value 방식임을 기억해두자.
ex) username = Crocus
브라우저가 웹 페이지를 서버로부터 요청하게되면, 이 페이지에 속한 쿠키들이 추가로 요청된다.
이러한 방법을 통해 유저에 대한 정보를 기억하는 필수 데이터를 서버가 가져올 수 있는 것이다.
이제 아래부터 실습을 해볼 단계에서 조심해야 될 사항을 알려주고자 한다.
None of the examples below will work if your browser has local cookies support turned off.
현재 브라우저가 쿠키사용을 금지해뒀다면 아래 예제가 실행되지 않을 수 있음을 기억하자.
자바스크립트를 이용한 Cookie 만들기
자바스크립트는 document.cookie 속성을 이용하여 쿠키를 create, delete, read 할 수 있다.
create 방법
1. document.cookie = "username = Crocus";
2. document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
만료기간을 넣어서 쿠키가 자동 만료 되도록 제작할 수 있다.(UTC time을 이용)
3. document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
파라미터를 이용하여 쿠키가 어디 브라우저에 속할 수 있을지 알려줄 수 있다.
read 방법
쿠키를 읽어오는 기본적인 방법이다.
1. var x = document.cookie;
* x에는 쿠키가 하나의 스트링으로 리턴되어 온다.
change 방법
1.. document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
이미 존재하는 쿠키 값을 변경 할 수 있는 방법이다.(덮어쓰기가 된다.)
delete 방법
1. document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
delete 방법은 매우 쉽다.
위의 방법을 이용하는 것인데, 만료 기간을 과거로 바꾸어 버리면 된다.
이제 기본적인 개념과 방법을 알았다면 쿠키를 적용해보자.
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 | <!DOCTYPE html> <html> <body> <h1>JavaScript With Crocus</h1> <p>아래 버튼을 눌러보세요!</p> <button type="button" onclick="display()"> << 현재 쿠키 보기 >> </button> <p></p> <button type="button" onclick="create1()"> << 쿠키1 생성 클릭 >> </button> <button type="button" onclick="create2()"> << 쿠키2 생성 클릭 >> </button> <p></p> <button type="button" onclick="delete1()"> << 쿠키1 삭제 클릭 >> </button> <button type="button" onclick="delete2()"> << 쿠키2 삭제 클릭 >> </button> <p></p> <script> function display() { var txt = ""; var ans = ""; if (document.cookie != ""){ txt = document.cookie.split(";"); // ';'를 기준으로 split for(i in txt) // txt에 있는 쿠키들을 조사 { // name과 value 모두 있는 쿠키만 ans에 넣어준다. if (txt[i][txt[i].length - 1] != "=") { ans += txt[i]; } } } // 쿠키가 존재하지 않았을 경우 if (ans == "") alert("쿠키가 없습니다."); // 쿠키가 존재할 경우 alert(ans); else alert(ans); } function create1() { document.cookie = "cookie1 = Crocus; expires = Wed, 18 Dec 2023 12:00:00 GMT"; display(); } function create2() { document.cookie = "cookie2 = KKW; expires = Wed, 18 Dec 2023 12:00:00 GMT"; display(); } function delete1() { document.cookie = "cookie1 = ; expires = Wed; 01 Jan 1970"; display(); } function delete2() { document.cookie = "cookie2 = ; expires = Wed; 01 Jan 1970"; display(); } </script> </body> </html> // This source code Copyright belongs to Crocus // If you want to see more? click here >> | Crocus |
티스토리에서 쿠키 결과가 출력이 잘 되지 않는다. 직접 html 파일을 만들어서 해보는 것을 추천한다.
그렇다고 위의 코드로 인해 쿠키가 안 만들어지는것은 아니다. 출력이 잘 안될뿐.
(이 부분에 대해 아시는 분이 있으시면 알려주시면 감사하겠습니다.)
자바스크립트 쿠키 예제
또다른 쿠키 예제를 만들어보자.
1. name, value, expire값을 받아내는 setCookie 함수를 제작하고, 그 함수가 cookie를 갱신시켜주도록 한다.
2. name을 받으면 그 쿠키값이 무엇인지 알려주는 getCookie 함수를 제작한다.
3. 쿠키가 존재한다면 존재하는 값에 맞게 행동하고, 존재하지 않았다면 쿠키를 만들도록 하는 checkCookie를 제작한다.
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 | <!DOCTYPE html> <html> <head> <script> function setCookie(name, value, day) { var day = new Date(); // ms단위기에 1초로 변환->60초->60분->24시간->최종적으로 day day.setTime(day.getTime() + (1000 * 24 * 60 * 60 * day)); var expires = "expires=" + day.toUTCString(); document.cookie = name + "=" + value + ";" + expires + ";path=/"; } function getCookie(name) { var cookieArr = document.cookie.split(";"); for (var i in cookieArr) { if(cookieArr[i].split("=")[0].trim() == "username") if (cookieArr[i][cookieArr[i].length - 1] != "=") return cookieArr[i].split("=")[1]; } return ""; } function checkCookie() { var user = getCookie("username"); if (user != "") { alert("다시 오셨네요 ?? " + user + "님"); } else { user = prompt("처음오셨군요? 이름이 무엇인가요?", "예) 홍길동"); if (user != "" && user != null) setCookie("username", user, 365); } } function delCookie() { document.cookie = "username =; expires = Wed; 01 Jan 1970"; } </script> </head> <body onload="checkCookie()"> <h1>JavaScript With Crocus</h1> <p>아래 버튼을 누르면 쿠키가 삭제 됩니다!</p> <button type="button" onclick="delCookie()"> << 클릭 >> </button> <p></p> </body> </html> // This source code Copyright belongs to Crocus // If you want to see more? click here >> | Crocus |
(티스토리에서 다른 쿠키들도 존재하기에 이 코드는 직접 html 파일로 만들어 실행해보시기 바랍니다.)
'Basic > JavaScript' 카테고리의 다른 글
| 자바스크립트 JSON파일 AJAX로 읽기 (0) | 2018.05.23 |
|---|---|
| 자바스크립트 이벤트 핸들러 예제 (0) | 2018.05.20 |
| 자바스크립트 navigator (0) | 2017.09.28 |
| 자바스크립트 location (0) | 2017.09.28 |
| 자바스크립트 screen (0) | 2017.09.28 |