브라우저 저장소로써 Web Storage 와 Cookie 의 차이와 용례

1. Cookie

  쿠키는 클라이언트 로컬에 저장되는 키/값 쌍의 저장 데이터이다. 애플리케이션의 상태를 유지하고 사용자 경험을 개선하는 방법 중 하나로 이용된다. 다만 민감한 정보를 저장하는 것은 조금 적합치 않으며 보안을 고려해야한다.

• 유지되는 기간
  • 쿠키는 설정된 만료 날짜 또는 세션 기간 동안 브라우저에 저장된다.
  • 세션 쿠키는 브라우저 세션이 종료될 때 삭제되며, 영속적인 쿠키는 설정된 만료 날짜에 따라 삭제된다.
• 도메인 경로 제한
  • 쿠키는 특정 도메인과 경로에서만 접근 가능합니다. 이것은 웹 사이트가 자신의 쿠키에만 접근할 수 있도록 보안을 유지하는 데 도움이 됩니다.
• 용도 :
  • 인증 및 세션 관리: 쿠키는 사용자 인증을 유지하고 로그인 상태를 추적하는 데 사용됩니다. 세션 쿠키는 사용자의 브라우저 세션 동안 로그인 정보를 저장합니다.
  • 사용자 설정 저장: 사용자 환경 설정, 언어, 테마 등과 같은 사용자 지정 정보를 저장하는 데 활용됩니다.
  • 트래킹 및 분석: 웹 사이트 이용 통계 및 사용자 동작 분석을 위해 사용자의 활동을 추적하는 데 사용됩니다.
  • 쇼핑 카트 및 장바구니: 온라인 쇼핑 사이트에서 상품을 장바구니에 추가하거나 주문 내역을 추적하기 위해 사용됩니다.
• 보안 고려사항
  • 쿠키에는 민감한 정보를 저장하지 않는 것이 좋습니다. 민감한 정보는 서버 측에 안전하게 저장되어야 합니다.
  • HttpOnly 및 Secure 플래그를 사용하여 쿠키의 보안을 강화할 수 있습니다.
• 제한된 용량
  • 쿠키의 크기는 제한되어 있으며, 일반적으로 도메인당 4KB의 데이터만 저장할 수 있습니다.
• 서버와 클라이언트간의 데이터 교환
  • 클라이언트가 요청하지 않아도 브라우저 요청이 있을 경우 Request Header에 넣어서 자동으로 서버에 전송한다.
  • 서버는 HTTP 응답 헤더를 통해 쿠키를 브라우저에 설정하고, 브라우저는 해당 도메인에 대한 모든 HTTP 요청에 쿠키를 자동으로 첨부하여 서버에 전송합니다.

2. Web Storage

web storage는 session storage와 local storage가 있습니다.

• session storage는 페이지 세션이 유지되는 동안 제공되는 출처(오리진)에 대해 독립적인 저장 공간입니다. 쿠키보다 큰 5MB의 저장공간을 제공하며 브라우저 또는 탭이 닫힐 때까지만 유지됩니다. session storage의 데이터는 api 호출에 담을 수 없어 서버에 전송이 불가합니다.임시 장바구니같은 휘발성 데이터를 저장할 때 사용합니다
• local storage는 저장한 데이터가 브라우저를 닫아도 영구적으로 유지되고 세션 간에도 유지되는 저장 공간입니다. JS를 통해서 접근 가능하며 local storage의 데이터는 api 호출에 담을 수 없어 서버에 전송이 불가합니다. 주로 사용자 설정, 옵션, 사용자 로그인 정보, 캐싱된 데이터 등을 저장하는 데 사용됩니다.

 

3. Web Storage vs Cookie

저장용량 서버로의 전송, 데이터의 수명에서의 차이가 있습니다

저장용량의 차이로는 쿠키가 4kb이고 가진 웹 스토리지는 5mb ~ 10mb입니다.

서버로의 전송의 차이점은 쿠키는 모든 http요청과 함께 서버로 자동으로 전송됩니다 반면 웹 스토리지는 서버로 자동으로 전송되지 않으며 클라이언트 측에서만 관리합니다.

데이터의 수명의 차이점은 쿠키는 만료 날짜 또는 세션동안 유지되며 만료 날짜가 지나면 자동으로 삭제됩니다 웹 스토리지는 세션 스토리지의 데이터는 세션동안 유지되며 로컬 스토리지의 데이터는 직접 삭제하지 않는 이상 유지됩니다.

쿠키의 용례로는 사용자의 언어 및 지역 장바구니 사용자 추적과 분석 인증 및 세션관리에 사용됩니다.

웹 스토리지의 용례로는 웹 어플리케이션에서 사용자 설정을 저장하고 장바구니 임시 데이터 및 상태관리에 사용됩니다.