쿠키, localStorage, SessionStorage 완벽 비교 가이드

🍪 웹 스토리지 완벽 가이드

쿠키, localStorage, sessionStorage 비교 분석

📋 목차

• 기본 개념
• 상세 비교표
• 사용 사례별 권장사항
• 코드 예시
• 보안 고려사항
• 결론

기본 개념

🍪 쿠키 (Cookie)

웹사이트가 사용자의 브라우저에 저장하는 작은 데이터 파일입니다. 서버와 클라이언트 간의 상태 정보를 유지하기 위해 사용되며, HTTP 요청 시 자동으로 서버로 전송됩니다.

💾 localStorage

브라우저에 반영구적으로 데이터를 저장할 수 있는 웹 스토리지 API입니다. 사용자가 직접 삭제하거나 브라우저 데이터를 삭제하지 않는 한 계속 유지됩니다.

🔒 sessionStorage

현재 세션(탭)에서만 유효한 임시 저장소입니다. 탭을 닫으면 데이터가 자동으로 삭제되어 보안에 유리합니다.

상세 비교표

구분	🍪 쿠키	💾 localStorage	🔒 sessionStorage
저장 용량	~4KB	5-10MB	5-10MB
유효 기간	설정 가능 (만료일 지정)	반영구적 (수동 삭제 시까지)	세션 종료 시 (탭 닫을 때까지)
서버 전송	자동 전송 ⚠️	전송 안됨 ✓	전송 안됨 ✓
접근 방법	document.cookie	localStorage.setItem()	sessionStorage.setItem()
브라우저 간 공유	도메인 내 공유	도메인 내 공유	탭별 독립
보안 설정	HttpOnly, Secure 가능	JavaScript로만 접근	JavaScript로만 접근
브라우저 호환성	모든 브라우저	IE 8+ 지원	IE 8+ 지원

사용 사례별 권장사항

🍪 쿠키 사용 시기

• 로그인 상태 유지 (서버 인증 필요)
• 장바구니 정보 (서버 동기화 필요)
• 사용자 설정 (언어, 테마)
• 광고 추적 및 분석
• CSRF 토큰 전송

💾 localStorage 사용 시기

• 사용자 기본 설정 (다크모드, 폰트)
• 임시 저장 (작성 중인 글, 폼 데이터)
• 캐시 데이터 (API 응답)
• 게임 스코어 및 진행상황
• 오프라인 데이터

🔒 sessionStorage 사용 시기

• 일회성 데이터 (현재 세션만)
• 민감한 임시 정보
• 위저드 폼 중간 상태
• 탭별 독립 데이터
• 새로고침 시에만 유지할 데이터

코드 예시

🍪 쿠키 사용 예시

// 쿠키 설정 (7일 후 만료)
const setCookie = (name, value, days) => {
    const expires = new Date(Date.now() + days * 24 * 60 * 60 * 1000).toUTCString();
    document.cookie = `${name}=${value}; expires=${expires}; path=/; secure; samesite=strict`;
};

// 쿠키 읽기
const getCookie = (name) => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
    return null;
};

// 사용 예시
setCookie('username', '김철수', 7);
const username = getCookie('username');
console.log(username); // 김철수

💾 localStorage 사용 예시

// 객체 데이터 저장
const userSettings = {
    theme: 'dark',
    language: 'ko',
    fontSize: 16
};
localStorage.setItem('userSettings', JSON.stringify(userSettings));

// 데이터 읽기
const savedSettings = JSON.parse(localStorage.getItem('userSettings'));
console.log(savedSettings.theme); // dark

// 특정 키 삭제
localStorage.removeItem('userSettings');

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

🔒 sessionStorage 사용 예시

// 폼 진행 상태 저장
const formProgress = {
    step: 2,
    answers: ['A', 'B', 'C'],
    startTime: new Date().toISOString()
};
sessionStorage.setItem('formData', JSON.stringify(formProgress));

// 페이지 새로고침 후에도 데이터 유지
const savedProgress = JSON.parse(sessionStorage.getItem('formData'));
if (savedProgress) {
    console.log(`현재 ${savedProgress.step}단계입니다.`);
}

// 탭을 닫으면 자동으로 삭제됨

보안 고려사항

🛡️ 쿠키 보안 설정

• HttpOnly: JavaScript 접근 차단 (XSS 방지)
• Secure: HTTPS에서만 전송
• SameSite: CSRF 공격 방지
• Domain/Path: 접근 범위 제한

⚠️ Web Storage 보안 주의점

• 민감한 정보(비밀번호, 토큰) 저장 금지
• XSS 공격에 취약 - 입력값 검증 필수
• 사용자가 직접 수정 가능 - 서버 검증 필요
• HTTPS 사용 권장

🔐 보안 쿠키 설정 예시

// 보안 쿠키 설정
document.cookie = "sessionId=abc123; " +
                 "secure; " +           // HTTPS에서만
                 "httponly; " +         // JS 접근 차단
                 "samesite=strict; " +  // CSRF 방지
                 "max-age=3600; " +     // 1시간 후 만료
                 "path=/";              // 전체 경로

💡 결론 및 권장사항

서버와의 통신이 필요하면 쿠키, 영구 보관이 필요하면 localStorage, 임시 보관이 필요하면 sessionStorage를 선택하세요.

보안을 최우선으로 고려하여 민감한 정보는 서버 사이드에서 관리하고, 각 저장 방식의 특성을 이해하여 적절히 조합해 사용하는 것이 현대 웹 개발의 모범 사례입니다.

사용자 경험과 보안, 두 마리 토끼를 모두 잡는 것이 성공적인 웹 애플리케이션의 핵심입니다! 🚀