[FE 기술 면접] 브라우저 저장소의 차이점 (LocalStorage,SessionStorage,Cookie)

브라우저 저장소란?

웹 브라우저에서 데이터를 임시로 저장할 수 있는 공간

1. Cookie

특징:

• HTTP 요청 시 자동으로 서버에 전송되어 클라이언트와 서버 간 통신에 활용됨
• 서버가 쿠키를 통해 사용자 식별 및 세션 유지 가능
• 용량 제한: 약 4KB
• 만료 기간: 설정 가능하며, 지정한 기간 경과 시 자동 삭제

장점:

• 서버와 클라이언트 간 정보 공유로 로그인 상태 유지와 사용자 맞춤 정보 제공에 유용

단점:

• 용량이 매우 제한적임 (4KB)
• HTTP 요청마다 쿠키가 포함되어 네트워크 트래픽 증가 가능

💡 왜 문제가 될까?

• 쿠키의 용량 제한은 약 4KB이나, 모든 요청마다 전송되어 빈번한 요청 발생 시 네트워크 속도에 영향을 미칠 수 있음

사용 예시:

• 광고 차단: "7일간 보지 않기" 정보 저장 (쿠키 만료 기간으로 설정)
• 세션 유지: 로그인 상태 유지 및 인증 정보 서버 전달

---

2. LocalStorage와 SessionStorage 소개

HTML5에서는 브라우저에 데이터를 저장하기 위한 LocalStorage와 SessionStorage API를 제공함

이들은 클라이언트 측에서만 데이터를 저장하고, 서버와 통신하지 않는다는 점에서 쿠키와 다름

둘의 차이는 데이터의 소멸 시점에 있음:

• LocalStorage: 브라우저를 닫아도 데이터 유지됨
• SessionStorage: 현재 탭(세션)이 닫히면 데이터 삭제됨

---

2.1 LocalStorage

특징:

• 데이터를 도메인별로 저장하며, 같은 도메인 내의 모든 탭과 공유됨
• 사용자가 명시적으로 삭제하기 전까지 데이터 유지됨
• 저장 용량: 약 5MB

장점:

• 장기적 데이터 저장에 적합함
• 인증 토큰이나 사용자 설정 등 서버와 관련 없는 데이터 관리에 유용함

보안 주의

• 사용자가 브라우저 개발자 도구로 쉽게 접근할 수 있어서 민감한 데이터(ex. 비밀번호)를 로컬스토리지에 저장 시 보안 취약점 발생 가능함

아래 이미지처럼 크롬 개발자모드에서 로컬스토리지에 저장된 데이터를 확인할 수 있다

사용 예시:

• 자동 로그인

---

2.2 SessionStorage

특징:

• 현재 탭에서만 유효하며, 다른 탭이나 창과 데이터 공유 불가
• 탭 종료 시 데이터 삭제
• 저장 용량: 약 5MB

장점:

• 세션(탭) 동안만 필요한 데이터 저장에 유용
• 각 탭이 독립적으로 데이터를 관리하여 안전

사용 예시:

• 폼 데이터 임시 저장

---

LocalStorage, SessionStorage, Cookie 비교

항목	LocalStorage	SessionStorage	Cookie
유지 기간	영구적	탭 종료 시까지	만료 기간 설정 가능
데이터 접근	클라이언트 측	클라이언트 측	클라이언트와 서버 모두
저장 용량	약 5MB	약 5MB	약 4KB
HTTP 요청 포함 여부	미포함	미포함	HTTP 요청 시 자동 전송
사용 목적	장기 데이터 저장	일시적 데이터 저장	서버와 클라이언트 간 데이터 교환
주요 사용 용도	자동 로그인, 사용자 설정	폼 임시 저장, 페이지 상태	인증 정보, 광고 차단, 팝업 상태 유지

---

선택 기준

• Cookie:서버와 클라이언트 간 데이터 교환 필요 시
  • 사용예: 로그인 세션 유지, 사용자 맞춤 광고
• LocalStorage:서버와 관계없이 데이터를 브라우저에 영구적
  • 저장예: 인증 토큰 저장, 사용자 인터페이스 설정
• SessionStorage:브라우저 탭 실행 중 필요한 데이터
  • 저장예: 임시 폼 데이터 저장, 세션 기반 작업

참고: https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-localStorage-sessionStorage