localStorage vs sessionStorage vs Cookie

웹 개발을 하다 보면 클라이언트 측에서 데이터를 저장해야 하는 상황이 자주 발생한다. 사용자의 설정값을 기억하거나, 장바구니 정보를 유지하거나, 로그인 상태를 관리하는 등의 기능을 구현할 때 말이다. 이때 사용할 수 있는 주요 저장소가 바로 localStorage, sessionStorage, Cookie이다.

개인적으로 진행한 프로젝트에 이미지를 저장할 일이 좀 많았다. (matajo or tripon...) 근데 이떄 로컬 스토리지에 이미지를 올렸다가 용량 이슈로 고생하고 모두 presigned url을 활용해서 DB에 올렸다.

어떤 순간에 어떤 곳에 저장하는 게 효율적인지 .... 모르겠어서 다시 공부했다.

🤔 궁금한 점
세 가지 저장소 모두 브라우저에 데이터를 저장한다는 공통점이 있지만, 언제 어떤 것을 사용해야 할까?

세 가지 저장소의 핵심 차이점

각 저장소는 데이터 수명, 저장 용량, 서버 전송 여부, 보안성 면에서 서로 다른 특징을 가지고 있다.

구분	localStorage	sessionStorage	Cookie
저장 위치	브라우저	브라우저	브라우저
데이터 수명	영구적 (명시적 삭제 전까지)	탭/브라우저 종료 시 삭제	만료일 설정 가능
저장 용량	5~10MB	5~10MB	4KB 이하
서버 전송	❌ 자동 전송 안 됨	❌ 자동 전송 안 됨	✅ 매 요청마다 전송
접근 방식	JavaScript만	JavaScript만	JavaScript + 서버
데이터 형태	문자열 (직렬화 필요)	문자열 (직렬화 필요)	문자열
주요 용도	장기 설정, 테마 등	임시 데이터, 폼 상태	인증, 세션 관리

localStorage | 영구 보관소

localStorage는 브라우저에 데이터를 영구적으로 저장하는 저장소다. 사용자가 직접 삭제하거나 브라우저 캐시를 지우지 않는 한 데이터가 계속 유지된다.

💡 localStorage의 특징

• 브라우저를 껐다 켜도 데이터가 유지됨
• 5~10MB의 큰 저장 용량
• 서버로 자동 전송되지 않아 네트워크 부담 없음

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

// 데이터 조회
const theme = localStorage.getItem('theme');
const settings = JSON.parse(localStorage.getItem('userSettings'));

localStorage는 사용자 설정, 테마 정보, 장바구니 데이터 등 장기간 보관해야 하는 데이터에 적합하다. 특히 사용자 경험을 개선하기 위해 이전 방문 시의 상태를 기억해야 할 때 유용하다.

sessionStorage | 임시 보관소

sessionStorage는 브라우저 탭이 열려있는 동안만 데이터를 저장한다. 탭을 닫거나 새로고침하면 데이터가 사라지는 특징이 있다.

⚡ sessionStorage의 특징

• 탭/브라우저 종료 시 자동 삭제
• 탭마다 독립적인 저장 공간
• localStorage와 동일한 용량 (5~10MB)

// 임시 데이터 저장
sessionStorage.setItem('currentStep', '3');
sessionStorage.setItem('formData', JSON.stringify({
  name: '홍길동',
  email: 'hong@example.com'
}));

// 데이터 조회
const step = sessionStorage.getItem('currentStep');
const formData = JSON.parse(sessionStorage.getItem('formData'));

sessionStorage는 다단계 폼의 임시 저장, 일회성 상태 관리, 페이지 내비게이션 상태 등에 주로 사용된다. 보안이 중요한 임시 데이터를 다룰 때도 적합하다.

Cookie | 서버와의 소통창구

Cookie는 가장 오래된 저장 방식으로, 서버와 클라이언트 간의 데이터 교환이 핵심 목적이다. 매 HTTP 요청마다 자동으로 서버에 전송되는 특징이 있다.

🔒 Cookie의 특징

• 4KB 제한으로 소량 데이터만 저장
• 만료일 설정 가능
• Secure, HttpOnly 등 보안 옵션 제공
• 매 요청마다 서버로 자동 전송

// 쿠키 설정
document.cookie = "userId=user123; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
document.cookie = "sessionId=abc123; path=/; secure; httpOnly";

// 쿠키 읽기 (복잡한 파싱 필요)
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

Cookie는 사용자 인증, 세션 관리, 트래킹 등 서버와의 협력이 필요한 작업에 사용된다. 하지만 용량 제한과 보안 취약점 때문에 신중하게 사용해야 한다.

실제 사용 시나리오별 선택 가이드

🎨 사용자 설정 저장

// 테마, 언어 설정 등 → localStorage
localStorage.setItem('userPreferences', JSON.stringify({
  theme: 'dark',
  language: 'ko',
  autoSave: true
}));

📝 폼 데이터 임시 저장

// 작성 중인 글, 다단계 폼 → sessionStorage
sessionStorage.setItem('draftPost', JSON.stringify({
  title: '임시 제목',
  content: '작성 중인 내용...',
  lastSaved: new Date().toISOString()
}));

🔐 로그인 상태 관리

// 인증 토큰, 세션 ID → Cookie (HttpOnly 권장)
// 서버에서 설정하는 것이 보안상 더 안전함
document.cookie = "accessToken=jwt_token_here; secure; httpOnly; path=/";

이미지와 대용량 데이터 저장 시 주의사항

이미지나 대용량 텍스트를 저장할 때는 몇 가지 고려사항이 있다.

⚠️ 주의사항

• 이미지는 base64로 인코딩해야 하므로 원본보다 약 33% 커짐
• localStorage/sessionStorage도 5~10MB 한도가 있음
• Cookie는 4KB 제한으로 이미지 저장에 부적합

// 이미지를 localStorage에 저장하는 예시
function saveImageToStorage(file) {
  const reader = new FileReader();
  reader.onload = function(e) {
    try {
      localStorage.setItem('profileImage', e.target.result);
      console.log('이미지 저장 완료');
    } catch (error) {
      console.error('저장 용량 초과:', error);
      // IndexedDB나 서버 저장으로 대안 제시
    }
  };
  reader.readAsDataURL(file);
}

대용량 데이터는 IndexedDB나 서버 저장 방식을 고려하는 것이 좋다.

마무리

세 가지 저장소의 특성을 정리하면 다음과 같다:

사용 목적	추천 저장소	이유
장기 설정 저장	localStorage	영구 보관, 대용량
임시 상태 관리	sessionStorage	자동 정리, 보안
인증/세션 관리	Cookie	서버 연동 필수

📌 핵심 원칙
데이터의 수명, 용량, 보안 요구사항, 서버 연동 필요성을 고려해서 적절한 저장소를 선택하자.

각 저장소의 특성을 이해하고 상황에 맞게 활용한다면, 더 나은 사용자 경험을 제공하는 웹 애플리케이션을 만들 수 있을 것이다.