웹 개발에는 쿠키, 세션 저장소 및 로컬 저장소와 같이 클라이언트 측에 데이터를 저장하는 다양한 방법이 있습니다. 이러한 메커니즘은 사용자 데이터를 관리하고 전반적인 브라우징 경험을 개선하는 데 중요한 역할을 합니다.
📍 쿠키
쿠키란?
- 사용자의 브라우저에 저장되는 작은 데이터 조각
- 모든 HTTP 요청과 함께 서버로 전송되어 서버가 사용자를 식별하고 인증할 수 있도록한다
- 만료 날짜가 있으며 지정된 기간 동안 지속되거나 브라우저 세션이 종료되면 만료되도록 설정이 가능하다
- 쿠키는 크기가 제한되어 있으며 일반적으로 몇 킬로바이트에서 몇 메가바이트 범위
- 클라이언트 측과 서버 측 모두에서 액세스하고 수정할 수 있다
쿠키의 동작 방식
- 클라이언트가 페이지를 요청
- 서버에서 세션 ID 등을 포함한 쿠키 생성
- HTTP 헤더에 쿠키를 포함 시켜 response를 클라이언트 측에 전송
- 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관
- 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 전송
- 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답
📍 세션 저장소
세션이란?
- 일정 기간 동안 같은 사용자(클라이언트)로 부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술이다
- 하나의 탭/창에 저장된 데이터는 다른 탭/창에서 액세스할 수 없다
- 브라우저 세션이 종료되면(예: 브라우저 또는 탭 닫기) 세션 저장소에 저장된 데이터가 자동으로 지워진다
- 세션 저장소는 쿠키에 비해 일반적으로 몇 메가바이트에서 수십 메가바이트에 이르는 더 큰 저장 용량을 가지고 있다
- JavaScript의 sessionStorage 개체를 사용하여 액세스하고 수정할 수 있다
📍 로컬 저장소
로컬 저장소란?
- 브라우저 세션이 종료된 후에도 클라이언트 측에 데이터를 영구적으로 저장할 수 있다
- 로컬 저장소 데이터는 사용자가 명시적으로 제거하거나 애플리케이션에서 지울 때까지 계속 사용할 수 있다
- 동일한 출처(즉, 동일한 웹사이트/도메인)의 모든 탭과 창에서 공유된다
- 로컬 스토리지는 일반적으로 몇 메가바이트에서 수백 메가바이트에 이르는 쿠키 및 세션 스토리지보다 더 큰 스토리지 용량을 가지고 있다
- JavaScript의 localStorage 객체를 사용하여 액세스 및 수정할 수 있다