JavaScript 쿠키
- 이전 페이지 JS 타이밍
- 다음 페이지 Web API 개요
쿠키는 웹 페이지에서 사용자 정보를 저장할 수 있게 합니다。
쿠키는 무엇인가요？
쿠키는 작은 텍스트 파일에 저장된 데이터입니다.
웹 서버가 브라우저에 웹 페이지를 보낼 때, 연결이 닫히면 서버는 사용자의 모든 것을 잊습니다。
쿠키는 "사용자 정보를 어떻게 기억할 수 있을까"라는 문제를 해결하기 위해 만들어졌습니다：
- 사용자가 웹 페이지에 접속할 때, 그 이름이 쿠키에 저장될 수 있습니다。
- 다음 사용자가 해당 페이지에 접속할 때, 쿠키가 그 이름을 "기억"합니다。
쿠키는 이름 값 쌍으로 저장됩니다. 예를 들어：
username = Bill Gates
브라우저가 서버로부터 웹 페이지를 요청할 때, 해당 페이지에 속한 쿠키가 요청에 추가됩니다. 이렇게 하면 서버가 사용자 정보를 "기억"하기 위해 필요한 데이터를 얻습니다。
브라우저가 로컬 쿠키 지원을 종료하면 다음 예제가 모두 작동하지 않습니다。
JavaScript를 통해 쿠키를 생성합니다
JavaScript는 다음과 같이 사용할 수 있습니다： document.cookie 속성 생성, 읽기, 쿠키 제거。
JavaScript를 통해 쿠키를 생성할 수 있습니다：
document.cookie = "username=Bill Gates";
당신은 유효한 날짜(UTC 시간)를 추가할 수 있습니다. 기본적으로, 브라우저가 닫힐 때 쿠키가 삭제됩니다：
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";
을 통해 path 파라미터를 통해, 브라우저에 쿠키가 무엇의 경로에 belongs하는지 알려줄 수 있습니다. 기본적으로 쿠키는 현재 페이지에 belongs합니다.
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
JavaScript를 통해 쿠키를 읽기
JavaScript를 통해 쿠키를 읽을 수 있습니다:
var x = document.cookie;
document.cookie 모든 쿠키가 하나의 문자열로 반환됩니다. 예를 들어: cookie1=value; cookie2=value; cookie3=value;
JavaScript를 통해 쿠키를 변경하기
JavaScript를 사용하여 쿠키를 생성할 때와 마찬가지로 변경할 수 있습니다:
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
기존 쿠키가 덮어쓰입니다.
JavaScript를 통해 쿠키를 지우기
쿠키를 지우는 것은 매우 간단합니다.
쿠키를 지우는 때 쿠키 값을 지정하지 않아도 됩니다:
직접 expires 만료 날짜를 과거로 설정하면 됩니다:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
쿠키를 올바르게 지우기 위해 쿠키 경로를 정의해야 합니다.
경로를 지정하지 않으면, 일부 브라우저에서 쿠키를 지우지 못할 수 있습니다.
쿠키 문자열
document.cookie 속성은 일반 텍스트 문자열처럼 보이지만 그렇지 않습니다.
귀하가 document.cookie 쿠키 문자열을 완전히 작성하면, 다시 읽을 때는 이름-값 쌍만 볼 수 있습니다.
새로운 쿠키가 설정되면, 기존 쿠키는 덮어쓰이지 않습니다. 새로운 쿠키는 document.cookie에 추가되므로 document.cookie를 읽으면 이렇게 됩니다:
cookie1 = value; cookie2 = value;
지정된 cookie의 값을 찾으려면, cookie 문자열에서 cookie 값을 검색하는 JavaScript 함수를 작성해야 합니다.
JavaScript Cookie 예제
아래의 예제에서, 방문자의 이름을 저장하는 cookie를 생성합니다：
방문자가 첫 번째로 웹페이지에 도착할 때, 그는 이름을 입력하도록 요청받습니다. 그런 다음, 이 이름을 cookie에 저장합니다.
다음 방문자가 동일한 페이지에 도착할 때, 그는 환영 메시지를 받습니다.
예를 들어, 3개의 JavaScript 함수를 생성합니다：
- cookie 값 설정 함수
- cookie 값 가져오기 함수
- cookie 값 확인 함수
cookie 설정 함수
먼저, 방문자의 이름을 cookie 변수에 저장하는 함수를 생성합니다：
실례
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
예제 설명:
위 함수의 매개변수는 다음과 같습니다: cookie 이름(cname), cookie 값(cvalue), 그리고 cookie가 만료되는 날짜(exdays).
cookie 이름, cookie 값, 그리고 cookie가 만료되는 날짜를 더하여 이 함수는 cookie를 설정합니다.
cookie 함수 가져오기
그런 다음, 지정된 cookie의 값을 반환하는 함수를 생성합니다：
실례
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
함수 설명:
cookie를 매개변수로 사용합니다. (cname).
검색할 텍스트와 변수(name)를 생성합니다. (CNAME”=”).
cookie 문자열을 디코딩하고 특수 문자를 포함한 cookie를 처리합니다. 예를 들어, “$”.
document.cookie를 세미콜론으로 분할하여 ca 배열에 저장합니다. (decodedCookie.split(';')}
ca 배열을 순회합니다 (i = 0; i < ca.length; i++) 그리고 각 값 c = ca[i]을 읽습니다.
cookie를 찾으면 (c.indexOf(name) == 0) 해당 cookie의 값을 반환합니다. (c.substring(name.length, c.length))
cookie를 찾지 못하면 ""를 반환합니다.
cookie 검사 함수
마지막으로, cookie가 설정되었는지 확인하는 함수를 만듭니다.
cookie가 설정되어 있으면 인사를 표시합니다.
cookie가 설정되지 않았으면 사용자 이름을 요청하는 표시줄을 표시하고, 사용자 이름을 cookie에 365일 저장합니다. 호출하여 setCookie 함수:
실례
function checkCookie() {
var username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
}
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
지금 모으습니다
실례
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
}
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
위의 예제는 페이지가 로드된 후 checkCookie() 함수가 실행됩니다.
- 이전 페이지 JS 타이밍
- 다음 페이지 Web API 개요
