쿠키(Cookie) vs localStorage vs sessionStorage 제대로 알고 쓰기

 

 

웹 개발을 하다보면 사용자의 정보를 브라우저에 잠깐 저장해야 할 일이 많습니다. 예로 들어서, 로그인 상태 유지나 장바구니 정보 저장 같은 기능이 있죠.
이때 서버에 요청하지 않고 브라우저에 데이터를 잠깐 저장해두는 기술이 바로 오늘의 주제, 웹 스토리지(Web Storage)인데요,
오늘은 웹 스토리지가 무엇인지, 그리고 그 종류에 대해서도 자세히 알아보겠습니다.

 

 

---

💡 웹 스토리지가 뭐예요?

웹 스토리지는 HTML5에서 새롭게 도입된 기능으로, 쿠키보다 훨씬 강력한 데이터 저장 방식입니다.

JavaScript를 통해 브라우저(클라이언트)에 데이터를 저장하는 공간이에요.
서버로 전송되지 않아서, 빠르고 가볍게 사용할 수 있어요.

 

📍 웹 스토리지의 특징

• 브라우저 내에 저장됨 (클라이언트 저장소)
• 서버로 자동 전송되지 않음 (쿠키와 다름)
• 최대 용량 약 5MB 이상 (브라우저마다 차이 있음)
• 저장 형식은 문자열(key-value 형태)

 

 

📂 웹 스토리지 종류는?

종류	설명
localStorage	브라우저를 꺼도 남아 있는 지속 저장소
sessionStorage	탭을 닫으면 사라지는 일시 저장소

 

🔍 localStorage vs sessionStorage 차이점 정리

항목	localStorage	sessionStorage
데이터 유지 기간	브라우저를 꺼도 유지됨	탭(세션)을 닫으면 사라짐
저장 범위	도메인 전체에서 접근 가능	해당 탭에서만 접근 가능
저장 위치	클라이언트 브라우저	클라이언트 브라우저
용량 제한	약 5MB (브라우저마다 다름)	약 5MB (브라우저마다 다름)
사용 예시	자동 로그인, 다크모드, 유저 설정 등	장바구니, 입력 폼 임시 저장 등
브라우저 간 공유	❌ 안 됨 (브라우저/기기별로 다름)	❌ 안 됨
API	localStorage.setItem(key, value) 등	sessionStorage.setItem(key, value) 등

 

💡 차이 핵심 요약

• localStorage: 브라우저가 꺼져도 데이터가 살아있음
  → 장기 보관용, 예: 로그인 유지, 다크모드 설정 저장
• sessionStorage: 탭을 닫으면 날아감
  → 임시 저장용, 예: 로그인 중인 특정 탭만 유지, 폼 자동완성

 

🛠️ 사용 예시 코드

// 저장
localStorage.setItem("username", "daeun");
sessionStorage.setItem("token", "abc123");

// 불러오기
console.log(localStorage.getItem("username"));  // "daeun"
console.log(sessionStorage.getItem("token"));   // "abc123"

// 삭제
localStorage.removeItem("username");
sessionStorage.clear();

 

 

 

🍪 쿠키랑 뭐가 다를까?

🧚‍♂️ 쿠키란?

쿠키는 웹 브라우저가 서버와 주고받는 작은 데이터 조각입니다.
사용자의 정보를 브라우저에 저장하고, 이후 서버로 자동 전송되는 특징이 있어요.

 

✔️ 예를 들자면:

• 쇼핑몰에서 장바구니 상태를 저장해두기
• 로그인 상태 기억하기
• 광고 추적용 사용자 식별하기

이런 정보들을 쿠키에 저장해두면, 사용자가 다음에 방문했을 때도 상태를 유지할 수 있어요.

 

🍏 쿠키의 주요 특징

항목	설명
저장 위치	브라우저 내부, 그리고 서버로 자동 전송됨
용량 제한	약 4KB
수명 설정	expires, max-age로 유효 기간 설정 가능
사용 목적	인증 유지, 세션 관리, 트래킹 등
HTTP 요청 시	서버에 자동 포함되어 전송됨

 

💻 예시

// 쿠키 저장
document.cookie = "username=Daeun; max-age=3600";

// 쿠키 읽기
console.log(document.cookie); // username=Daeun

// 쿠키 삭제 (max-age를 0으로)
document.cookie = "username=; max-age=0";

❗쿠키는 문자열로만 저장 가능하고, 수동으로 파싱해서 써야 하므로 다루기 조금 번거롭습니다.

 

🧐 그래서 쿠키랑 뭐가 다른데요?

항목	쿠키	웹 스토리지
저장 위치	브라우저 + 서버 전송	브라우저 전용
서버 전송 여부	요청마다 서버로 자동 전송됨	❌ 브라우저에만 저장
용량 제한	약 4KB	약 5MB 이상
만료 설정	expires, max-age 설정 가능	local: 영구 / session: 탭 종료 시 삭제
사용 목적	인증, 세션 유지 등	프론트 상태 저장, 환경 저장, 테마 등
접근 방식	document.cookie 사용 (불편)	.setItem(), getItem() 등 간단함

 

 

❓언제 어떤 걸 써야 할까?

상황	쿠키(Cookie)	localStorage	sessionStorage
✅ 로그인 상태 유지	적합 (서버에 전송되어 인증 유지에 사용)	❌ 보안에 취약 / 직접 구현 필요	❌ 탭 닫으면 사라짐
✅ 사용자 설정(다크모드, 언어 등)	❌ 서버에 불필요한 전송 발생	적합 (영구 저장)	❌ 탭 닫으면 초기화됨
✅ 입력 폼 임시 저장	❌ 서버 전송 불필요	가능하나 브라우저 닫을 때까지 남음	적합 (탭 닫으면 사라짐)
✅ 장바구니 상태 유지	❌ 용량 제한 큼, 관리 어려움	적합 (긴 기간 유지 필요 시)	적합 (짧은 세션 동안 유지할 때)
✅ 사용자 활동 추적/광고 식별	적합 (서버로 자동 전송됨)	❌ 서버와 연동 불가	❌ 서버와 연동 불가
✅ 서버와 자동 동기화가 필요한 경우	적합	❌ 수동으로 전송해야 함	❌ 수동으로 전송해야 함
✅ 보안이 중요한 정보 저장	❌ 브라우저에 노출됨 (HTTPS, Secure 설정 필요)	❌ 민감 정보 저장 금지	❌ 민감 정보 저장 금지

 

 

 

🧚‍♂️ 요약 정리

• 쿠키: 인증/세션 유지 등 서버와 자동 통신이 필요한 정보
  • 로그인 인증 유지(세션 쿠키) - 서버에 토큰이나 세션ID를 저장해두고, 사용자가 재방문해도 로그인 상태 유지
  • 광고 트래킹 / 유저 식별 (사용자 행동 추적, A/B 테스트 식별자 등 마케팅에 활용)
  • 서버 간 요청 상태 유지 (보안상 이유로 클라이언트-서버 사이 상태값 저장)
  • 최근 본 상품 (사용자 별로 최근 본 상품 정보를 서버와 연동하기 위해 사용)
• localStorage: 사용자 설정처럼 오래 보존해야 하는 클라이언트 정보
  • 다크모드 / 테마설정 저장 (어떤 테마 썼는지 기억 후, 다음 접속 시에도 유지)
  • 자동 로그인 여부 기억 (사용자가 '자동 로그인'을 선택했는지 저장)
  • 즐겨찾기 / 찜 목록
  • 설문 응답 여부 / 알림 닫기 여부 (특정 팝업 다시 보지 않기 등 선택 상태 유지)
• sessionStorage: 탭 단위로 일시적인 정보 저장에 적합
  • 입력 폼 자동 저장 (사용자가 탭을 새로고침하거나 뒤로 가도 입력값이 유지됨)
  • 장바구니 임시 저장 (로그인 안 한 상태) - 로그인 전 장바구니 정보를 임시 저장. 탭 닫으면 사라짐
  • 페이지 간 데이터 전달 (ex. step1 -> step2)
  • 결제 진행 상태 저장 (단일 세션 동안만 필요한 정보 저장)

 

 

🆗 추천 기준 요약

상황	추천
인증/보안 중심	쿠키
장기 설정 저장	localStorage
탭 단위 임시 상태	sessionStorage

 

 

 

---

✨ 마무리

저도 가끔 언제 어느 상황에서 쿠키, localStorage, sessionStorage를 사용해야할지 헷갈린 경우가 많았었는데요.
각 특징을 알고 비교해보니 의문점이 해결되었어요.
앞으로 개발할 때에는 상황에 맞게 각 특성을 생각해서 적절한 것을 선택하여 사용해야겠습니다.