[네트워크] 쿠키 vs 로컬 스토리지 vs 세션 스토리지 vs 세션

✔️ 한 줄 정리
쿠키 -> 브라우저 & 서버 간 자동 전송, 작은 데이터 저장
로컬 스토리지 -> 브라우저에 영구 저장, 서버에 안 보내도 되는 데이터
세션 스토리지 -> 브라우저 탭 닫으면 사라짐, 일시적 데이터 저장 (폼 입력값)
세션 -> 서버에서 관리하는 로그인 / 사용자 정보 (보안)

	쿠키	로컬 스토리지	세션 스토리지	세션
저장 위치	클라이언트(브라우저)	클라이언트(브라우저)	클라이언트(브라우저)	서버
데이터 크기 제한	4KB	5MB ~ 10MB	5MB ~ 10MB	서버에서 관리
데이터 보존 기간	설정된 만료일	브라우저를 꺼도 유지됨 (영구 저장)	브라우저를 닫으면 사라짐	기본적으로 브라우저 종료 시 삭제
보안	노출 취약	상대적 안전	상대적 안전	서버에서 관리
서버 전송 여부	자동 전송	자동 전송 X	자동 전송 X	서버에서 관리
사용 목적	로그인 유지, 최근 본 상품	사용자 설정값 저장 (테마, 언어)	일시적인 데이터 저장 (폼 입력값)	로그인 정보, 인증, 장바구니

---

ℹ️ 쿠키와 세션 설명 보러가기

로컬 스토리지 (Local Storage)

• 특징
  • 브라우저에 데이터를 영구 저장 (브라우저 꺼도 유지)
  • 최대 저장 용량이 쿠키보다 큼 (5MB ~ 10MB)
  • 서버로 자동 전송되지 않음
  • localStorage.setItem("key", "value") 로 저장
• 언제 사용할까?
  • 다크 모드 설정 유지
  • 사용자 선호 설정 (언어, 테마, UI, ...)
  • API 응답 캐싱 (속도 개선 목적)

세션 스토리지 (Session Storage)

• 특징
  • 브라우저 탭 닫으면 데이터 사라짐 (일시 저장)
  • 최대 저장 용량이 쿠키보다 큼 (5MB ~ 10MB)
  • 서버로 자동 전송되지 않음
  • sessionStorage.setItem("key", "value") 로 저장
• 언제 사용할까?
  • 폼 입력값 임시 저장
  • 페이지 새로고침 시 유지해야 하는 데이터

---

쿠키 vs 로컬 스토리지 vs 세션 스토리지 vs 세션, 언제 써야 할까?

서버와 자동으로 전송 돼야 한다 -> 쿠키

장기적으로 유지해야 하는 사용자 설정값이 있다 -> 로컬 스토리지

일시적으로만 데이터 저장하면 된다 -> 세션 스토리지

서버로 관리해야한다 -> 세션