자바스크립트 쿠기 (Cookies)

쿠키로 사용자 정보를 웹 페이지에 저장할 수 있습니다.


쿠키(Cookies)란?

쿠키는, 컴퓨터에 작은 텍스트 파일로 저장된, 데이터입니다.

웹 서버가 브라우저에 웹 페이지를 보내면, 연결은 종료되고, 서버는 사용자에 관한 모든 것을 잊어 버립니다.

쿠키는 “사용자 정보를 기억하기” 위해 고안되었습니다:

  • 사용자가 웹 페이지를 방문하면, 사용자의 이름을 쿠키에 저장할 수 있습니다.
  • 다음에 사용자가 페이지를 방문하면, 쿠키는 사용자의 이름을 “기억”합니다.

쿠키는 name-value 쌍으로 다음과 같이 저장됩니다:

브라우저가 서버에 웹 페이지를 요청하면, 해당 페이지에 속한 쿠키가 그 요청에 추가됩니다. 서버는, 사용자에 대한 정보를 “기억”하기 위해, 필요한 데이터를 이렇게 얻습니다.


자바스크립트로 쿠키 만들기

자바스크립트는 document.cookie 속성으로 쿠기를 만들고, 읽고, 삭제할 수 있습니다.

자바스크립트로 쿠키는 다음과 같이 생성됩니다:

만료일을 추가할 수도 있습니다 (UTC time으로). 기본적으로(By default) 브라우저가 닫힐 때, 쿠키는 삭제됩니다:

경로(path) 매개 변수를 사용하면, 쿠키가 속한 경로(path)를 브라우저에 알릴 수 있습니다. 기본적으로(By default) 쿠키는 현재 페이지에 속합니다.


자바스크립트로 쿠키 읽기

자바스크립트로 다음과 같이 쿠키를 읽을 수 있습니다:


자바스크립트로 쿠기 변경

자바스크립트로 쿠키를 만드는 것과 같은 방법으로 쿠키를 변경할 수 있습니다:

이전 쿠키를 덮어 씁니다.


자바스크립트로 쿠키 삭제

쿠키를 삭제하는 것은 매우 간단합니다.

쿠키를 삭제할 때 쿠키 값을 지정할 필요가 없습니다.

expires 매개변수(parameter)를 전달된 날짜(passed date)로 설정하면됩니다:


Cookie 문자열(String)

document.cookie 속성은 일반 텍스트 문자열(normal text string)처럼 보입니다. 그러나 그렇지 않습니다.

document.cookie에 전체 쿠키 문자열(whole cookie string)을 쓰더라도, 다시 읽으면 이름 – 값 쌍(name-value pair)만 볼 수 있습니다.

새 쿠키를 설정하면, 이전 쿠키를 덮어 쓰지 않습니다. 새로운 쿠키가 document.cookie에 추가되므로, document.cookie를 다시 읽으면 다음과 같은 내용이 표시됩니다:

cookie1 = value; cookie2 = value;

 
 

 

지정된 쿠키 하나의 값을 찾으려면, 쿠키 문자열에서 쿠키 값을 검색하는 자바스크립트 함수를 작성해야 합니다.


자바스크립트 쿠키 예제

다음 예제에서 방문자의 이름을 저장하는 쿠키를 만듭니다.

방문자가 처음 웹 페이지에 방문하면, 방문자의 이름을 입력하라고 요청합니다. 그 이름은 쿠키에 저장됩니다.

다음에 방문객이 같은 페이지에 방문하면 환영 메시지를 받습니다.

이 예제에서 3가지 자바스크립트 함수를 생성합니다:

  1. 쿠키 값을 설정하는 함수
  2. 쿠키 값을 가져오는 함수
  3. 쿠키 값을 확인하는 함수

쿠키를 설정하는 함수

먼저 cookie 변수에 방문자의 이름(name)을 저장하는 함수를 만듭니다:

Example

예제 설명:

위의 함수의 매개변수는 쿠키의 이름(cname), 쿠키의 값(cvalue) 및 쿠키가 만료 될 때까지의 일 수(exdays)입니다.

이 함수는 cookiename, 쿠키 값 및 만료 문자열(the cookie value, and the expires string)을 함께 추가하여, 쿠키를 설정합니다.


쿠키를 가져오는 함수

그리고 지정된 쿠키의 값을 반환하는 함수를 만듭니다:

Example

함수 설명:

매개변수(cname)로 cookiename을 가져옵니다.

검색하기 위핸 텍스트(cname + "=")로 변수(name)를 생성합니다.

특수 문자 (예 : ‘$’)가 있는 쿠키를 처리하기 위해, 쿠키 문자열을 디코드합니다.

세미콜론으로, document.cookie를 ca (ca = decodedCookie.split ( ‘;’))라는 배열로 분할합니다.

ca 배열(array)을 반복하고(Loop through) (i = 0; i < ca.length; i++), 각각의 값을 읽습니다 (c = ca[i]).

쿠키가 (c.indexOf(name) == 0)를 발견하면, 쿠키 값(c.substring(name.length, c.length)을 반환합니다 .

쿠키가 발견되지 않으면, ""을 반환합니다.


쿠키를 확인하는 함수

마지막으로, 쿠키가 설정되어 있는지, 확인하는 함수를 만듭니다.

쿠키가 설정되어 있으면, 인사말을 표시합니다.

쿠키가 설정되어 있지 않으면, 프롬프트 상자(prompt box)를 표시하여, 사용자 이름(name)을 요청하고, setCookie 함수를 호출하여 365일 동안 사용자 이름 쿠키(username cookie)를 저장합니다:

Example


All Together Now

Example

직접 테스트해 보십시오.

위 예제는 페이지가 로드될 때 checkCookie() 함수를 실행합니다.

출처: JavaScript Cookies

댓글 남기기