LocalStorage vs SessionStorage vs Cookies

브라우저 스토리지의 종류

1. LocalStorage

브라우저에 영구적으로 데이터를 저장하는 방식.

// 데이터 저장
localStorage.setItem('username', 'john');

// 데이터 조회
const username = localStorage.getItem('username');

// 데이터 삭제
localStorage.removeItem('username');

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

특징:

• 영구 저장 (브라우저를 닫아도 유지)
• 약 10MB 저장 가능
• 문자열만 저장 가능 (객체는 JSON.stringify 필요)
• 도메인별로 별도 저장소
• 수동으로 삭제하기 전까지 유지

2. SessionStorage

브라우저 세션 동안만 데이터를 저장.

세션이 유지되는 경우:

• 페이지 새로고침 ⭕
• 같은 탭에서 다른 페이지로 이동 ⭕
• 브라우저 내에서 탭 이동 ⭕

세션이 종료되는 경우:

• 브라우저 탭을 닫음 ❌
• 브라우저 창을 닫음 ❌
• 브라우저를 완전히 종료 ❌

// 데이터 저장
sessionStorage.setItem('tempData', 'value');

// 데이터 조회
const tempData = sessionStorage.getItem('tempData');

// 데이터 삭제
sessionStorage.removeItem('tempData');

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

특징:

• 세션 종료시 자동 삭제
• 약 5MB 저장 가능
• 문자열만 저장 가능
• 탭별로 독립적인 저장소
• 페이지 새로고침해도 유지

3. Cookies

가장 전통적인 데이터 저장 방식.

// 쿠키 설정
document.cookie = "username=john; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// 쿠키 읽기
const cookies = document.cookie;

// 쿠키 삭제 (만료일을 과거로 설정)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

특징:

• 만료 기간 설정 가능
• 약 4KB로 용량 제한적
• 서버로 자동 전송됨
• HttpOnly 옵션으로 보안 강화 가능
• 도메인과 경로 설정 가능

🔹 각각의 사용 시기

LocalStorage 사용

• 사용자 설정/선호도
• 테마 설정
• 장바구니 정보
• 자동 저장 데이터

SessionStorage 사용

• 임시 폼 데이터
• 뒤로가기 데이터
• 한 번만 보여줄 정보
• 임시 작성 내용

Cookies 사용

• 로그인 상태 유지
• 사용자 식별
• 광고 트래킹
• 서버와의 세션 관리

🔹 데이터 저장시 주의사항

1. 보안

   • 민감한 정보는 저장하지 않기
   • HttpOnly 쿠키 사용 고려
   • XSS 공격 주의

2. 용량

   • 각 저장소의 용량 제한 확인
   • 필요 없는 데이터는 정기적으로 삭제

3. 호환성

   • 시크릿 모드 사용 고려
   • 오래된 브라우저 지원 확인
   • 쿠키 차단 상황 대비

4. 성능

   • 과도한 저장은 성능 저하 유발
   • 필요한 데이터만 저장
   • 정기적인 정리 필요