[JavaScript] 쿠키(COOKIE) 사용법 (저장, 삭제, 가져오기)

728x90

COOKIE란?

쿠키는 클라이언트 측에서 작은 데이터를 저장하는 방식으로, HTTP 요청과 함께 서버로 전송됩니다. 쿠키는 브라우저의 document.cookie API를 사용하여 처리할 수 있습니다.

쿠키 생성 (설정)

쿠키를 생성하려면 document.cookie에 문자열 형식으로 쿠키 정보를 추가합니다.

name=value; expires=DATE; path=PATH; domain=DOMAIN; secure; SameSite=VALUE

💡 쿠키 생성 예제 코드

document.cookie = "username=JohnDoe"; // 기본 쿠키 설정

// 만료 날짜와 추가 옵션 포함
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/; Secure; SameSite=Strict";

expires : 쿠키의 만료 날짜를 지정. 생략 시 세션 쿠키가 생성됩니다.
path : 쿠키가 유효한 URL 경로. 기본값은 현재 페이지 경로.
domain : 쿠키가 유효한 도메인.
Secure : HTTPS 연결에서만 전송.
SameSite : 쿠키의 교차 사이트 요청 정책을 설정 (Strict, Lax, None).

쿠키 읽기

document.cookie를 호출하면 현재 저장된 쿠키를 문자열 형태로 반환합니다. 이 문자열은 name=value 쌍이 세미콜론(;)으로 구분됩니다.

console.log(document.cookie); 
// "username=JohnDoe; theme=dark; sessionId=abc123"

💡 특정 쿠키 값 읽기 예제 코드

function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

console.log(getCookie('username')); // "JohnDoe"

쿠키 수정

쿠키를 수정하려면 같은 이름으로 새 값을 설정하면 됩니다. 기존 쿠키는 덮어씌워집니다.

💡 쿠키 수정 예제 코드

document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

쿠키 삭제

쿠키를 삭제하려면 동일한 이름과 경로로 설정하고 expires 속성을 과거 날짜로 지정합니다.

💡 쿠키 삭제 예제 코드

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

주의 사항

크기 제한: 쿠키는 각 쿠키당 약 4KB로 제한되며, 도메인당 저장할 수 있는 쿠키의 개수에도 제한이 있습니다.
보안: 중요한 데이터는 쿠키에 저장하지 않고, 서버에서 처리하거나 세션 저장소/로컬 저장소를 사용하는 것이 좋습니다.
CORS 및 SameSite: 교차 사이트 요청(CORS) 환경에서 SameSite와 Secure 플래그 설정이 중요합니다.