쿠키, 세션, 웹스토리지

---

쿠키, 세션, 웹스토리지는 웹 애플리케이션에서 클라이언트 측 데이터를 저장하고 관리하는 데에 사용되는 주요 메커니즘이다.

쿠키

클라이언트에 저장되는 작은 데이터 조각
클라이언트(브라우저) 로컬에 저장되는 키와 값 형태의 작은 파일로 이름, 값 만료시간, 경로정보가 들어있다.
서버가 HTTP 응답의 일부로 설정할 수 있으며, 이후 클라이언트는 해당 쿠키를 동일한 서버에 대한 HTTP 요청의 일부로 포함해서 보낸다.

쿠키 사용 목적

1. 세션관리 : 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
2. 사용자 맞춤 : 사용자가 선호하는 옵션이나 테마 등의 세팅
3. 사용자 추적 : 사용자의 행동을 분석하고 기록하는 용도

쿠키의 특징

• 저장 위치 : 클라이언트의 브라우저
• 데이터 크기 : 일반적으로 각 쿠키는 최대 4KB 크기의 데이터를 저장할 수 있다.
• 수명 : 쿠키는 만료 날짜를 지정할 수 있다. 세션 쿠키는 브라우저가 닫힐 때까지 지속되고, 지속 쿠키는 지정된 만료 날짜까지 유지된다.
• 보안 : Secure 속성을 설정하면 HTTPS 연결에서만 전송된다. HttpOnly 속성을 설정하면 JavaScript에서 접근할 수 없다.
• 사용 예시 : 사용자 인증 정보, 사용자 설정, 추적 정보 등

세션

서버 측에 저장되는 데이터
서버에서 클라이언트를 구분하기 위해 세션 ID를 부여하고, 웹 브라우저가 서버에 접속해 브라우저를 종료할 때까지 인증상태를 유지한다.
접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정 가능하다.
데이터를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 된다.

세션 특징

• 저장 위치 : 서버
• 데이터 크기 : 서버의 저장 용량에 따라 다르다.
• 수명 : 서버에서 설정한 시간 동안만 유지된다. 일반적으로 사용자가 로그아웃하거나 브라우저를 닫으면 세션이 만료된다.
• 보안 : 데이터가 서버에 저장되므로 클라이언트 측보다 안전하다. 하지만 세션 ID가 탈취되지 않도록 보안 조치가 필요하다.
• 사용 예시 : 로그인 상태 유지, 장바구니 정보 등 사용자의 지속적인 상태를 관리하는 데 사용

웹스토리지

클라이언트(브라우저)에 데이터를 저장할 수 있도록 HTML5에서 도입된 저장소
간단한 Key-Value 스토리지 형태
쿠키와 달리 자동 전송 위험성이 없다.
Origin단위로 접근이 제한되는 특성 덕분에 CSRF로부터 안전하다.
오직 문자형 데이터 타입만을 지원한다.
LocalStorage와 SessionStorage 두가지 유형이 있다.

로컬 스토리지(LocalStorage)

• 저장 위치 : 클라이언트의 브라우저
• 데이터 크기 : 도메인 당 약 5MB
• 수명 : 영구적으로 저장되며, 명시적으로 삭제하지 않는 한 유지된다.(동일한 브라우저를 사용할 때만 해당)
• 보안 : JavaScript를 통해 접근할 수 있으므로 민감한 데이터를 저장하는 데는 적합하지 않다.
• 사용 예시 : 영구적으로 저장할 필요가 있는 데이터

세션 스토리지(SessionStorage)

• 저장 위치 : 클라이언트의 브라우저
• 데이터 크기 : 도메인 당 약 5MB
• 수명 : 브라우저 세션이 종료될 때까지 유지된다. 탭이나 창을 닫으면 삭제된다.
• 보안 : JavaScript를 통해 접근할 수 있으므로 민감한 데이터를 저장하는 데는 적합하지 않다.
• 사용 예시 : 단기적인 데이터 저장

쿠키, 세션, 웹스토리지의 차이

특성	쿠키 (Cookies)	세션 (Sessions)	로컬스토리지 (LocalStorage)	세션스토리지 (SessionStorage)
저장 위치	클라이언트	서버	클라이언트	클라이언트
데이터 크기	최대 4KB	서버에 따라 다름	도메인당 약 5MB	도메인당 약 5MB
수명	설정된 만료 날짜까지	세션 종료 시까지	영구적	세션 종료 시까지
보안	Secure, HttpOnly 설정 가능	서버 측 저장, 보안 강화 필요	JavaScript 접근 가능, 보안 취약	JavaScript 접근 가능, 보안 취약
사용 사례	인증 정보, 사용자 설정	로그인 상태, 장바구니	영구적으로 저장할 데이터(사용자 설정)	단기 데이터 저장(폼 데이터 일시 저장)