쿠키 vs. 세션 스토리지 vs. 로컬 스토리지

공통점

• stateless한 HTTP를 보완하기 위해 사용되는 데이터 저장 기술이다.
• 브라우저에 노출되므로, 보안을 위해 중요한 정보는 포함하지 않는 것이 좋다.

 

 

쿠키 (Cookie)

• 서버 측에서 생성하고 관리하는 기술이다. 서버는 사용할 쿠키를 헤더를 통해 클라이언트 측에 전달하며, 이후 클라이언트는 모든 서버 요청에 해당 쿠키를 자동으로 포함하여 전송한다.
• 쿠키를 적용할 도메인이나 경로, 만료 기간, 보안 등을 설정할 수 있다.
• 만료 기간이 지나면 자동으로 삭제된다. 따로 설정하지 않으면 세션 쿠키가 되어 브라우저가 종료될 때까지 유지된다.
• 최대 4KB의 저장 용량을 갖는다.
• 사용자 인증, 사용자 추적 및 세션 관리, 팝업 창 “오늘 하루 보지 않기” 등

 

 

웹 스토리지(Web Storage)

• 클라이언트 측에서 데이터를 생성하고 관리하는 기술이다.
  • 종류: 세션 스토리지, 로컬 스토리지
• 서버 요청 시 자동 포함X, 필요할 경우 수동으로 처리해줘야 한다.
• 만료 기간 설정 불가
• 최대 5MB의 저장 용량→ 쿠키의 부족한 저장 용량 문제 해결

 

 

세션 스토리지 (Session Storage)

• 브라우저 탭 단위로 작동한다.
  • 여러 탭을 띄울 경우 각 탭은 독립된 세션 스토리지 공간을 가진다.
  • 새로고침 → 데이터 유지
  • 탭, 브라우저 종료 → 데이터 삭제
• 이전 스크롤 위치 저장, 비회원 장바구니, 일회성 로그인 등

 

 

로컬 스토리지 (Local Storage)

• 데이터를 직접 삭제하기 전까지 영구적으로 존재한다.
• 동일한 도메인 내에서 작동한다.
  • 여러 탭을 띄우더라도 도메인 같으면 데이터가 공유된다.
  • 새로고침, 탭/브라우저 종료 → 데이터 유지
• 사용자 설정(ex. 웹 페이지 테마, 언어), 글 임시 저장, 회원 장바구니, 자동 로그인 등

 

 

---

+) 예전에 쿠키와 세션 인증 방식을 비교해본 적이 있는데..

지금 다시 보니 세션이랑 세션 스토리지를 헷갈려한 부분도 보이고.. 틀린 개념도 많았다 ㅜ

기본적인 개념들도 꾸준히 복기해야하는 이유를 다시 한 번 깨닫는다.

 

 

틀린 부분만 보완했다!

쿠키(Cookie)와 세션(Session)