JavaScript Cookies

1. 쿠키란?

웹 사이트가 사용자의 브라우저에 저장하는 작은 텍스트 파일이다. 쿠키를 통해 웹 서버는 사용자의 상태를 기억하고, 로그인 정보나 설정값, 방문 기록 등을 저장할 수 있다.

 

2. 쿠키의 구조

하나의 쿠키는 다음과 같은 요소들로 구성된다.

• 이름(Name): 각 쿠키의 식별자 역할
• 값(Value): 쿠키에 저장할 정보 (문자열 형태)
• 만료 날짜(Expires): 쿠키의 유효기간을 결정

그 외에 선택적으로 아래와 같은 옵션들을 설정할 수 있다.

• 경로(Path): 쿠키가 접근 가능한 경로 지정
• 도메인(Domain): 쿠키가 유효한 웹사이트의 도메인
• Secure 플래그: HTTPS 연결에서만 전송
• HttpOnly 플래그: JavaScript에서 접근 불가, 서버만 접근 가능

3. 쿠키의 한계

 

• 용량 제한: 보통 하나의 쿠키는 4KB 이하로 제한된다.
• 보안 취약성: 사용자 측에 저장되므로 민감한 정보 저장은 위험하다.
• 노출 가능성: 네트워크 전송 시 암호화되지 않으면 정보 유출 우려

 

4. 쿠키의 생성 및 수정

javaScript에서는 document.cookie속성을 사용하여 쿠키를 생성하거나 수정할 수 있다.

<기본문법>

document.cookie = "쿠키이름=쿠키값; expires=날짜; path=경로; domain=도메인";

document.cookie = "username=lsa; path=/;";

path=/; 옵션을 주면 사이트 전체에서 쿠키에 접근이 가능하다.

 

5. 쿠키 만료일 설정

기본적으로 만료일을 지정하지 않으면 세션 쿠키로 저장되며, 브라우저를 종료하면 자동 삭제된다.

만료일을 설정할 때는 UTC(협정 세계시)를 사용해야 한다. 한국 표준시(KST)는 UTC보다 9시간 빠르므로, 시간 차이를 고려해야 한다.

let date = new Date();
date.setTime(date.getTime() + (1 * 60 * 60 * 1000)); // 현재 시간 + 1시간
let expires = "expires=" + date.toUTCString();
document.cookie = "userEmail=qwe123;" + expires + "; path=/;";

 

6. 쿠키 확인(가져오기)

쿠키는 문자열 형태로 document.cookie에 저장되며, 각 쿠키는 ;으로 구분되어 있다. 이를 직접 parsing 해서 원하는 쿠키 값을 가져올 수 있다.

function getCookieValue(cookieName) {
  let cookies = document.cookie.split(';');
  for (let i = 0; i < cookies.length; i++) {
    let parts = cookies[i].split('=');
    let name = parts[0].trim();
    if (name === cookieName) {
      return parts[1] || '';
    }
  }
  return '';
}

let username = getCookieValue('username');
console.log(username); // "lsa" 또는 변경된 값

 

7. 쿠키 값 변경

쿠키값을 변경하려면 동일한 이름의 쿠키에 다른 값을 할당하면 된다.

document.cookie = "username=bergerac;";

이 코드는 기존의 username 쿠키 값을 bergerac 으로 덮어씌워준다.

 

8. 쿠키 삭제

쿠키를 삭제하려면 만료일을 과거시점으로 설정하면 된다.

function deleteCookie(cookieName) {
  document.cookie = cookieName + "=; expires=Wed, 20 Feb 2025 00:00:00 GMT; path=/;";
}

deleteCookie('username');
deleteCookie('userEmail');

브라우저는 이 쿠키들을 더이상 유효하지 않은 것으로 간주하고 삭제한다.