쿠키, 세션 스토리지, 로컬 스토리지의 차이점

웹 애플리케이션에서 데이터를 저장하는 방식에는 쿠키(Cookie), 세션 스토리지(Session Storage), 로컬 스토리지(Local Storage)가 있다.
각각의 특징과 사용 목적이 다르므로 적절한 상황에 맞춰 선택하는 것이 중요하다.

---

1️⃣ 쿠키 (Cookie)

✅ 쿠키란?

쿠키는 클라이언트와 서버 간 데이터를 주고받기 위한 저장소로, 주로 사용자 인증 정보, 세션 정보, 설정값을 저장하는 데 사용된다.

📌 쿠키의 특징

항목	설명
데이터 저장 위치	클라이언트(브라우저)
데이터 용량	최대 4KB
데이터 만료	수동 설정 가능 (expires 속성 사용)
보안	X (보안이 약함, HTTPOnly 및 Secure 옵션 필요)
전송 방식	자동으로 서버와 주고받음
탭/창 공유 여부	같은 도메인 내에서 공유 가능

📌 쿠키의 동작 방식

1. 사용자가 웹사이트에 로그인하면 서버가 쿠키를 생성하여 클라이언트에게 전달
2. 클라이언트는 쿠키를 브라우저에 저장
3. 이후 해당 도메인에 요청할 때마다 쿠키가 자동으로 서버에 전송됨
4. 서버는 쿠키 정보를 읽고 인증을 유지하거나 맞춤형 데이터를 제공

📌 쿠키 설정 예제

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

• expires: 쿠키 만료일 설정
• path: 쿠키의 적용 범위 지정 (/는 모든 페이지에서 사용 가능)

📌 쿠키의 단점

• 보안 취약점: 클라이언트에서 쉽게 조작 가능하여 XSS(크로스 사이트 스크립팅) 공격에 취약
• 자동 전송: HTTP 요청마다 포함되어 네트워크 트래픽 증가 가능
• 용량 제한: 4KB로 저장할 수 있는 데이터가 적음

📌 쿠키의 사용 사례

• 로그인 정보 저장 (예: "로그인 상태 유지" 기능)
• 다크 모드, 언어 설정 등 사용자 환경 저장
• 웹사이트 방문 기록 저장

---

2️⃣ 세션 스토리지 (Session Storage)

✅ 세션 스토리지란?

세션 스토리지는 브라우저의 세션(탭이나 창) 동안 데이터를 유지하며, 탭이 닫히면 데이터가 사라진다.

📌 세션 스토리지의 특징

항목	설명
데이터 저장 위치	클라이언트(브라우저)
데이터 용량	약 5MB
데이터 만료	브라우저 탭/창을 닫을 때 삭제됨
보안	비교적 안전 (자동 삭제)
전송 방식	서버와 자동 전송되지 않음
탭/창 공유 여부	다른 탭/창에서는 접근 불가

📌 세션 스토리지 사용 예제

// 데이터 저장
sessionStorage.setItem("username", "Eunbi");

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

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

// 모든 데이터 삭제
sessionStorage.clear();

📌 세션 스토리지의 단점

• 탭을 닫으면 데이터가 사라짐 → 영구적인 데이터 저장 불가능
• 다른 탭/창에서 공유되지 않음 → 도메인 내에서도 세션이 다르면 접근 불가

📌 세션 스토리지의 사용 사례

• 일시적인 폼 데이터 저장 (예: 사용자가 실수로 페이지를 벗어나도 데이터 유지)
• 페이지 새로고침 시 상태 유지 (예: 필터링, 검색 결과 유지)
• 일회성 메시지 저장 (예: 팝업 메시지 표시 후 닫기)

---

3️⃣ 로컬 스토리지 (Local Storage)

✅ 로컬 스토리지란?

로컬 스토리지는 브라우저를 닫아도 데이터가 유지되는 저장소로, 도메인 내에서 영구적으로 데이터 저장이 가능하다.

📌 로컬 스토리지의 특징

항목	설명
데이터 저장 위치	클라이언트(브라우저)
데이터 용량	약 5MB~10MB (브라우저마다 다름)
데이터 만료	없음 (직접 삭제하기 전까지 유지됨)
보안	비교적 안전 (XSS 공격 가능)
전송 방식	서버와 자동 전송되지 않음
탭/창 공유 여부	같은 도메인 내에서 모든 탭/창에서 공유 가능

📌 로컬 스토리지 사용 예제

// 데이터 저장
localStorage.setItem("theme", "dark");

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

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

// 모든 데이터 삭제
localStorage.clear();

📌 로컬 스토리지의 단점

• 보안 문제: 브라우저 콘솔에서 쉽게 접근 가능 → 민감한 정보 저장 ❌
• 자동 삭제되지 않음 → 오래된 데이터가 남을 수 있음
• 비교적 낮은 저장 용량 → 대량 데이터 저장 어려움

📌 로컬 스토리지의 사용 사례

• 사용자 설정 저장 (예: 다크 모드, 언어 설정)
• 토큰 기반 인증 (단, 보안이 중요한 데이터는 쿠키 + HTTPOnly 설정 필요)
• 캐싱된 데이터 저장 (예: API 응답 결과를 저장하여 불필요한 요청 줄이기)

---

4️⃣ 쿠키, 세션 스토리지, 로컬 스토리지 비교

항목	쿠키 (Cookie)	세션 스토리지 (Session Storage)	로컬 스토리지 (Local Storage)
데이터 저장 위치	클라이언트(브라우저)	클라이언트(브라우저)	클라이언트(브라우저)
용량	4KB	5MB	5MB~10MB
데이터 만료	설정 가능 (expires, max-age)	탭/창을 닫으면 삭제	직접 삭제하지 않으면 영구 저장
서버 자동 전송	O (HTTP 요청마다 자동 전송)	X	X
보안	낮음 (XSS 공격 위험)	비교적 안전	낮음 (XSS 공격 위험)
사용 가능한 브라우저 범위	같은 도메인 내에서 공유	같은 탭에서만 사용 가능	같은 도메인 내에서 공유 가능
주요 사용 사례	로그인 유지, 사용자 설정, 세션 관리	일시적 데이터 저장 (폼 입력값 등)	사용자 설정, 캐시, 인증 토큰

---

🚀 쿠키, 세션 스토리지, 로컬 스토리지 사용 가이드

✅ 보안이 중요한 데이터 (로그인 토큰, 세션 관리)
→ 쿠키 사용 (HTTPOnly + Secure 설정 필수!)

✅ 일시적인 데이터 저장 (폼 입력값, 페이지 상태 유지)
→ 세션 스토리지 사용

✅ 장기간 유지할 데이터 (사용자 설정, 캐싱)
→ 로컬 스토리지 사용

---

📌 결론

1. 쿠키: 서버와 자동으로 데이터를 주고받으며, 보안이 필요한 정보 저장에 사용
2. 세션 스토리지: 일시적인 데이터를 저장하며, 브라우저 탭을 닫으면 사라짐
3. 로컬 스토리지: 장기간 데이터를 저장하며, 브라우저를 닫아도 유지됨