[Web] 쿠키, 로컬스토리지, 세션스토리지 차이점 및 활용법

ayeongjin 2025. 2. 21. 03:04

웹 개발에서 데이터를 클라이언트 측에 저장하는 방법으로 로컬 스토리지(LocalStorage), 세션 스토리지(SessionStorage), 쿠키(Cookie)가 많이 사용됩니다.

1. 로컬 스토리지(LocalStorage)

로컬 스토리지는 브라우저에 데이터를 영구적으로 저장하는 저장소입니다. 사용자가 브라우저를 닫아도 데이터가 유지되며, 같은 도메인 내에서는 언제든지 접근할 수 있습니다.

데이터 지속성: 브라우저를 닫고 다시 열어도 데이터가 유지됨
저장 용량: 일반적으로 5MB 이상 저장 가능
보안: 서버로 자동 전송되지 않음 (XSS 공격에 취약할 수 있음)

접근 방식:

// 데이터 저장
localStorage.setItem("key", "value");

// 데이터 가져오기
const value = localStorage.getItem("key");

// 데이터 삭제
localStorage.removeItem("key");

✅ 언제 사용할까?

장기간 보관해야 하는 데이터 (예: 테마 설정, 사용자 설정 정보 등)
보안이 중요하지 않은 데이터
클라이언트에서만 사용하는 데이터

2. 세션 스토리지(SessionStorage)

세션 스토리지는 사용자가 웹 페이지를 열어둔 동안만 유지되는 저장소입니다. 브라우저 탭을 닫으면 데이터가 자동으로 삭제됩니다.

데이터 지속성: 브라우저 탭이 닫히면 데이터 삭제
저장 용량: 로컬 스토리지와 비슷하게 5MB 이상
보안: 서버로 자동 전송되지 않음

접근 방식:

// 데이터 저장
sessionStorage.setItem("key", "value");

// 데이터 가져오기
const value = sessionStorage.getItem("key");

// 데이터 삭제
sessionStorage.removeItem("key");

✅ 언제 사용할까?

일회성 데이터 저장 (예: 폼 입력값 유지, 일시적인 UI 상태 관리 등)
세션이 종료되면 자동으로 사라지는 데이터가 필요할 때

3. 쿠키(Cookie)

쿠키는 작은 데이터를 클라이언트에 저장하고 서버와 자동으로 주고받을 수 있는 저장소입니다. 주로 사용자 인증 정보나 세션 정보를 저장하는 데 사용됩니다.

데이터 지속성: 만료 기한을 설정할 수 있음
저장 용량: 4KB로 매우 제한적
보안: 서버와 자동으로 전송되므로 보안에 취약할 수 있음 (HTTPS 및 Secure, HttpOnly 옵션 사용 권장)

접근 방식:

// 쿠키 저장
document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

// 쿠키 가져오기
console.log(document.cookie);

✅ 언제 사용할까?

서버와 데이터를 주고받아야 할 때 (예: 세션 인증, 로그인 정보 저장)
작은 크기의 데이터를 저장해야 할 때
클라이언트와 서버 간 상태를 유지해야 할 때

4. 비교 정리

구분	로컬 스토리지	세션 스토리지	쿠키
저장 기간	영구적	브라우저 탭 종료 시 삭제	만료 기간 설정 가능
저장 용량	5MB 이상	5MB 이상	4KB
서버 전송	자동 전송되지 않음	자동 전송되지 않음	요청마다 자동 전송
보안	XSS에 취약	XSS에 취약	XSS 및 CSRF에 취약 (보안 옵션 필요)
사용 예	사용자 설정, 장기 데이터	일회성 데이터, UI 상태	인증 정보, 세션 유지

5. 마무리

로컬 스토리지: 사용자 설정, 캐시 데이터 등 장기적으로 보관해야 하는 데이터 저장
세션 스토리지: 페이지를 새로고침해도 유지되어야 하지만 탭을 닫으면 사라지는 데이터 저장
쿠키: 로그인 정보, 인증 토큰 등 서버와 지속적으로 주고받아야 하는 데이터 저장

보안이 중요한 경우 Secure, HttpOnly, SameSite 등의 옵션을 활용하는 것도 가능합니다!