[CS / Web] 웹 개발에서 쿠키, 세션 저장소 및 로컬 저장소 이해

웹 개발에는 쿠키, 세션 저장소 및 로컬 저장소와 같이 클라이언트 측에 데이터를 저장하는 다양한 방법이 있습니다. 이러한 메커니즘은 사용자 데이터를 관리하고 전반적인 브라우징 경험을 개선하는 데 중요한 역할을 합니다.

📍 쿠키

쿠키란?

• 사용자의 브라우저에 저장되는 작은 데이터 조각
• 모든 HTTP 요청과 함께 서버로 전송되어 서버가 사용자를 식별하고 인증할 수 있도록한다
• 만료 날짜가 있으며 지정된 기간 동안 지속되거나 브라우저 세션이 종료되면 만료되도록 설정이 가능하다
• 쿠키는 크기가 제한되어 있으며 일반적으로 몇 킬로바이트에서 몇 메가바이트 범위
• 클라이언트 측과 서버 측 모두에서 액세스하고 수정할 수 있다

쿠키의 동작 방식

1. 클라이언트가 페이지를 요청
2. 서버에서 세션 ID 등을 포함한 쿠키 생성
3. HTTP 헤더에 쿠키를 포함 시켜 response를 클라이언트 측에 전송
4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관
5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 전송
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

 

📍 세션 저장소

세션이란?

• 일정 기간 동안 같은 사용자(클라이언트)로 부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술이다
• 하나의 탭/창에 저장된 데이터는 다른 탭/창에서 액세스할 수 없다
• 브라우저 세션이 종료되면(예: 브라우저 또는 탭 닫기) 세션 저장소에 저장된 데이터가 자동으로 지워진다
• 세션 저장소는 쿠키에 비해 일반적으로 몇 메가바이트에서 수십 메가바이트에 이르는 더 큰 저장 용량을 가지고 있다
• JavaScript의 sessionStorage 개체를 사용하여 액세스하고 수정할 수 있다

 

📍 로컬 저장소

로컬 저장소란?

• 브라우저 세션이 종료된 후에도 클라이언트 측에 데이터를 영구적으로 저장할 수 있다
• 로컬 저장소 데이터는 사용자가 명시적으로 제거하거나 애플리케이션에서 지울 때까지 계속 사용할 수 있다
• 동일한 출처(즉, 동일한 웹사이트/도메인)의 모든 탭과 창에서 공유된다
• 로컬 스토리지는 일반적으로 몇 메가바이트에서 수백 메가바이트에 이르는 쿠키 및 세션 스토리지보다 더 큰 스토리지 용량을 가지고 있다
• JavaScript의 localStorage 객체를 사용하여 액세스 및 수정할 수 있다