[JavaScript] 쿠키(Cookie), 세션(Session), 로컬스토리지(LocalStorage) 완벽 정리하기

쿠키(Cookie), 세션(Session), 로컬스토리지(LocalStorage) 완벽 정리하기

웹 개발을 하다 보면 데이터를 클라이언트 측에 저장해야 할 일이 많습니다. 이때 자주 등장하는 개념이 쿠키(Cookie), 세션(Session), 그리고 **로컬스토리지(LocalStorage)**입니다. 이 세 가지는 모두 데이터를 저장하는 방식이지만, 저장 위치나 유지 기간, 보안 수준이 서로 다릅니다.

이번 포스팅에서는 각 기술의 차이점부터 사용법, 그리고 언제 어떤 것을 써야 하는지에 대한 팁까지 완벽하게 정리해드리겠습니다.

---

✅ 쿠키(Cookie)

쿠키란?

쿠키는 사용자의 브라우저에 저장되는 작은 데이터 파일입니다. 주로 로그인 정보, 사이트 방문 기록, 사용자 설정 등을 저장하는 데 사용됩니다.

특징

• 크기 제한: 약 4KB
• 만료 기간 설정 가능
• 자동으로 서버에 전송됨 (매 요청마다)
• 보안 민감 정보 저장에 적합하지 않음

사용 예시

// 쿠키 생성
function setCookie(name, value, days) {
  const d = new Date();
  d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = "expires=" + d.toUTCString();
  document.cookie = `${name}=${value};${expires};path=/`;
}

// 쿠키 읽기
function getCookie(name) {
  const decodedCookie = decodeURIComponent(document.cookie);
  const cookies = decodedCookie.split(';');
  for (let i = 0; i < cookies.length; i++) {
    const c = cookies[i].trim();
    if (c.indexOf(name + "=") === 0) {
      return c.substring(name.length + 1);
    }
  }
  return "";
}

// 쿠키 삭제
function deleteCookie(name) {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
}

---

✅ 세션(SessionStorage)

세션스토리지란?

sessionStorage는 브라우저 탭 단위로 데이터를 저장하는 방식입니다. 브라우저 탭이나 창을 닫으면 저장된 데이터는 사라집니다.

특징

• 탭 단위로 동작
• 브라우저나 탭을 닫으면 데이터 삭제
• 서버로 전송되지 않음
• 최대 저장 용량: 약 5MB

사용 예시

// 저장
sessionStorage.setItem("username", "paperlover");

// 읽기
const name = sessionStorage.getItem("username");

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

// 모두 삭제
sessionStorage.clear();

사용 팁

• 임시 데이터 저장에 적합 (예: 입력 폼 자동완성, 다단계 폼 데이터 유지 등)

---

✅ 로컬스토리지(LocalStorage)

로컬스토리지란?

localStorage는 브라우저에 데이터를 영구 저장하는 방식입니다. 사용자가 직접 지우기 전까지 데이터가 남아 있습니다.

특징

• 도메인 기준으로 저장됨
• 브라우저를 꺼도 유지됨
• 서버로 전송되지 않음
• 최대 저장 용량: 약 5~10MB

사용 예시

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

// 읽기
const token = localStorage.getItem("token");

// 삭제
localStorage.removeItem("token");

// 모두 삭제
localStorage.clear();

사용 팁

• 로그인 상태 유지, 테마 설정 저장, 즐겨찾기 목록 유지 등에 유용

---

🧠 쿠키 vs 세션 vs 로컬스토리지 비교표

항목	쿠키	세션스토리지	로컬스토리지
저장 위치	브라우저 + 서버로 전송	브라우저 (탭 한정)	브라우저 (영구)
용량 제한	약 4KB	약 5MB	약 5~10MB
만료 시점	직접 설정 가능	탭 닫으면 삭제	수동 삭제 전까지 유지
서버 전송 여부	O	X	X
보안 민감도	민감정보 저장 지양	상대적으로 안전	민감정보 저장 지양

---

🧭 언제 어떤 걸 써야 할까?

상황	추천 저장 방식
로그인 상태 유지	로컬스토리지 (또는 HttpOnly 쿠키)
단일 탭에서만 유효한 데이터	세션스토리지
서버에 자동 전송해야 하는 정보	쿠키
사용자의 설정값 (테마 등)	로컬스토리지
민감한 정보 저장	절대 저장 ❌ → 서버에서 관리

---

🔒 보안 팁

• 로컬스토리지와 세션스토리지에는 절대 토큰, 비밀번호 저장하지 말 것!
• 인증 관련 정보는 HttpOnly 쿠키 사용 권장 (JavaScript로 접근 불가능하여 보안 강화)
• 모든 저장된 데이터는 XSS에 취약할 수 있으므로 사용자 입력은 항상 필터링

---

✅ 마무리 정리

JavaScript에서 사용할 수 있는 클라이언트 저장 기술인 쿠키, 세션스토리지, 로컬스토리지는 각각의 용도와 특징이 다릅니다. 프로젝트 상황에 맞게 적절히 선택해서 사용해야 하며, 보안에 특히 신경 써야 합니다.

• 짧은 데이터 + 서버 전송 필요 → 쿠키
• 일시적인 데이터 + 탭 제한 → 세션스토리지
• 장기 저장 + 설정/기록 → 로컬스토리지

보안이 중요한 상황이라면 항상 서버 기반 저장을 고려하는 것이 가장 안전한 방법입니다.

---

📚 관련 글

• JavaScript에서 form 입력값 검증하는 방법
• [fetch API와 CORS 완전 이해하기]

---

🏷️ 태그

#JavaScript #쿠키 #세션스토리지 #로컬스토리지 #웹스토리지 #프론트엔드 #브라우저저장소