쿠키?

쿠키는 웹 브라우저에 작은 데이터 조각을 저장하는 방식입니다.
키는 주로 클라이언트와 서버 간 정보를 주고받는 데 사용됩니다.
HTTP 요청과 응답에 포함될 수 있어 상태 유지를 위해 매우 유용합니다.

특징

크기 제한

각 쿠키는 약 4KB(4096바이트)로 제한됩니다.

수명

세션 쿠키

브라우저가 닫히면 자동으로 삭제됩니다.

영구 쿠키

expires 또는 max-age 속성을 설정하면 특정 기간 동안 유지됩니다.

보안

쿠키는 기본적으로 암호화되지 않으므로, 민감한 정보 저장은 적합하지 않습니다.
Secure 속성을 사용하면 HTTPS를 통해서만 쿠키가 전송됩니다.
HttpOnly 속성을 사용하면 JavaScript에서 쿠키에 접근할 수 없습니다.

도메인 및 경로 제한

쿠키는 특정 도메인과 경로에서만 접근할 수 있습니다.

자동 전송

쿠키는 클라이언트가 서버에 요청할 때 자동으로 전송됩니다.

주요속성

name=value 쿠키의 이름과 값.
expires 쿠키의 만료 날짜.
max-age 쿠키의 만료 시간을 초 단위로 지정.
path 쿠키가 적용될 경로.
domain 쿠키가 적용될 도메인.
Secure HTTPS에서만 전송.
HttpOnly JavaScript로 접근 불가능.\

설정방법

쿠키는 서버 측에서 응답 헤더로 설정하거나 클라이언트 측에서 JavaScript로 설정할 수 있습니다.

document.cookie

document.cookie는 JavaScript에서 쿠키를 읽고, 추가하거나 수정할 수 있는 API입니다.

쿠키 읽기

document.cookie는 현재 페이지에 유효한 쿠키들만 문자열로 반환합니다. 반환되는 형식은 다음과 같습니다

key1=value1; key2=value2; key3=value3

예시

console.log(document.cookie);
// Output: "username=user123; theme=dark; lang=ko"

쿠키 추가 및 수정

쿠키를 추가하거나 수정하려면 document.cookie에 문자열을 할당합니다. 기존의 쿠키에 새 데이터를 추가하려고 해도 이미 있는 데이터를 수정하거나 새로운 쿠키가 추가됩니다.

document.cookie = "username=user123"; // 기본 세션 쿠키
document.cookie = "theme=dark; max-age=3600"; // 1시간 유지
document.cookie = "lang=ko; expires=Fri, 31 Dec 2024 23:59:59 GMT"; // 특정 만료 날짜

쿠키 삭제

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

쿠키와 localStorage/sessionStorage의 차이

특성	쿠키 (Cookie)	localStorage/sessionStorage
저장 용량	4KB	보통 5MB
데이터 전송	HTTP 요청과 함께 자동으로 전송됨	클라이언트 측에서만 사용 가능
데이터 지속성	만료 시간에 따라 다름	localStorage는 영구적, sessionStorage는 세션 한정
보안	HTTPS/HttpOnly로 보호 가능	JavaScript에서 직접 관리, 자동 전송 없음
사용 목적	상태 유지 (예: 세션 관리, 사용자 추적)	클라이언트 측 데이터 저장 (빠른 읽기/쓰기)