[HTTP] HTTP 쿠키 🍪

HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재요청 시 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용한다. 이를 사용하면 사용자의 로그인 상태를 유지할 수 있다.

상태가 없는 HTTP 프로토콜에서 상태 정보를 기억시켜주기 때문이다.

 

쿠키는 주로 세 가지 목적을 위해 사용된다.

• 세션 관리(Session Management)
  • 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
• 개인화(Personalization)
  • 사용자 선호, 테마 등의 세팅
• 트래킹(Tracking)
  • 사용자 행동을 기록하고 분석하는 용도

과거엔 클라이언트 측에 정보를 저장할 때 쿠키를 주로 사용하곤 했습니다. 쿠키를 사용하는 게 데이터를 클라이언트 측에 저장할 수 있느 ㄴ유일한 방법이었을 때는 이 방법이 타당했지만, 지금은 Modern storage APIs를 사용해 정보를 저장하는 걸 권장한다.

모든 요청마다 쿠키가 함께 전송되기 때문에 성능이 떨어지는 원인이 될 수 있다.

 

정보를 클라이언트 측에 저장하려면 Modern APIs의 종류인 웹 스토리지 API(localStorage와 sessionStorage)와 IndexedDB를 사용하면 된다.

 

웹 스토리지 API는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공한다.

 

• sessionStorage: 각각의 출처에 대해 독립적인 저장 공간을 페이지 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공한다.
  • 세션에 한정해, 즉 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장한다.
  • 데이터를 절대 서버로 전송하지 않는다.
  • 저장 공간이 쿠키보다 크다.(최대 5MB)
• localStorage: 위와 같지만, 브라우저를 닫았다 열어도 데이터가 남아있다.
  • 유효기간 없이 데이터를 저장하고, Javascript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라진다.
  • 저장 공간이 셋 중 제일 크다.

위의 방식은 Window.sessionStorage와 Window.localStorage 속성을 통해 사용할 수 있다.