/ Docs

LocalStorage와 sessionStorage (with 쿠키🍪)

• 내(서버)가 만든 쿠키~
• 웹 스토리지
  • 로컬 스토리지
  • 세션 스토리지

프론트엔드 중요 개념 - HTTP 개념 정리 3편입니다.

프론트엔드 프로그래밍의 기반이 되는 개념 입니다.

개념정리 끝에는 관련 면접질문을 첨부하였으니 도움이 되었으면 좋겠습니다.

내(서버)가 만든 쿠키~

쿠키는 클라이언트(브라우저)에 저장되는 작은 데이터 조각으로, 서버가 클라이언트에 상태 정보를 저장하기 위해 응답 헤더에 포함시켜 전송합니다.

• HTTP의 무상태성을 보완
• 저장위치 : 클라이언트
• 저장 용량 제한 (4KB)
• HTTP 요청시 자동으로 서버에 전송됨
• 만료 시간 설정 가능
• 도메인 기반으로 저장되며 브라우저 간 공유 가능
• 단점: 작은 용량, 서버 전송으로 인한 트래픽 증가, 보안 취약

---

웹 스토리지

HTML5에서는 쿠키의 단점들을 보완한 좀 더 간단한 웹 저장소(Web Storage)를 도입했습니다.

웹 저장소는 브라우저에서 데이터를 저장하고 관리하는 기술로, 쿠키와 유사하지만 데이터 전송과 용량 등에서 차이가 있습니다.

쿠키 vs Web Storage

특징	cookie	web storage
저장위치	클라이언트	클라이언트
데이터 전송	요청마다 모든 쿠키 전송	자동 전송 안됨 (개발자가 제어)
용량 제한	4KB	5MB 이상
만료 시점	설정 가능	sessionStorage : 탭 종료시 localStorage : 직접 삭제시
데이터 형식	문자열	JS객체
세션 정의	브라우저 단위 (다른 탭, 다른 창도 같은세션)	sessionStoarge : 탭 단위

쿠키와 구별되는 Web Storage의 장점은 다음과 같습니다.

1. 쿠키와 달리 서버에 전송되지 않는다. → 트래픽 비용 줄여줌
2. 객체정보를 저장할 수 있다.
3. 용량의 제한이 크다.
4. 쿠키는 같은 브라우저라면 값을 공유했는데, sessionStorage는 같은 브라우저여도, 다른 탭이라면 값을 공유하지 않는다.

로컬 스토리지

로컬 스토리지는 쿠키의 요청마다 모든 쿠키 전송을 개선합니다.

로컬 스토리지는 클라이언트 내에서 장기적/영구적으로 데이터를 저장하는 데 사용합니다. 저장한 데이터는 브라우저를 종료해도 유지되기 때문에 서버 통신이 필요 없거나 나중에도 사용하는 데이터를 저장할 때 적합합니다.

예) 사용자 테마, 언어 설정, 최근 본 항목

• 지속성 있는 데이터 저장
• 로컬에 도메인 별로 지속되는 저장소
• 직접 삭제 전까지 유지됨 (브라우저가 종료되도 유지)
• 저장 용량이 크고, 서버 전송 없음

세션 스토리지

세션 스토리지는 쿠키의 도메인이 같으면 항상 쿠키를 보낸다을 개선합니다.

세션 스토리지는 세션(탭)이 종료될때까지 지속되는 스토리지입니다. 따라서 잠깐 동안 유지해야 하는 데이터를 저장할 때 적합합니다.

예) 채팅 입력 내용, 폼 자동 저장

• 브라우저 탭 단위로 격리됨
• 세션(탭) 종료시 모두 삭제
• 같은 브라우저간 공유X, 같은 탭 간 공유X

⛔

example.com에서 생성된 쿠키는, example.com 도메인으로 요청을 보낼때마다 함께 전송됩니다.

이때 동일한 도메인에 포함된 다른 서브 페이지 또한 쿠키에 접근할 수 있기 때문에 보안상이나 트래픽 문제가 발생합니다.

---

쿠키와 웹 스토리지 사용처 한눈에보기

목적	추천 저장 방식	특징
자동 로그인 여부, 광고 ~일동안 보지 않기	쿠키	기간 설정,서버와의 상호작용
사용자 테마 설정, 언어 설정	로컬 스토리지 localStorage	클라이언트 내 장기저장
채팅, 임시 폼 저장, 탭별 데이터, 실시간 업데이트 정보	세션 스토리지 sessionStorage	탭 단위의 임시 저장

🌞

localStorage, sessionStorage의 등장에도, 쿠키는 쿠키만의 쓰임새가 존재합니다.

• 쿠키는 서버와의 상태 유지를 위해 사용, 자동 전송이 필요한 경우 유리
• localStorage는 클라이언트 내 장기 저장, 서버 통신 필요 없는 값에 적합
• sessionStorage는 탭 단위의 임시 저장소, 세션 중 유지되는 값 저장에 유리

관련 면접 질문

@ 쿠키, sessionStorage, localStorage의 차이점은 무엇인가요?