쿠키 & 세션 & 웹 스토리지

기술 면접 대비 + JWT 로그인 방식 시 토큰 저장소에 대해 고민하며 정리한 내용

 

---

공통점

웹 통신 간 유지하려는 정보를 connectionless, stateless 하게 저장하기 위해 사용함 (HTTP 프로토콜의 한계 보완)

 

 

 

---

쿠키(Cookie)

• 저장 위치 : 클라이언트 (PC)
  • 저장소 : 데스크탑에 파일 형태로
• 저장 형식 : text (key-value)
• 만료 시점 : 쿠키 저장 시 설정 (브라우저가 종료되어도, 만료 시점이 지나지 않으면 자동 삭제되지 않음)
• 클라이언트에 300개까지 쿠키 저장 가능. 하나의 도메인 당 20개의 값만 가질 수 있으며, 하나의 쿠키 값은 4kb까지 저장 가능
• Response Header에 set-cookie 속성을 사용하면 클라이언트에 쿠키 만들 수 있음
• 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request 시에 Request Header를 넣어서 자동으로 서버에 전송함

 

 

---

세션 (Session)

• 저장 위치 : 웹 서버
• 저장 형식 : Object
• 만료 시점 : 브라우저 종료 시 삭제 (기간 설정 가능)
  • 실제로는 서버의 세션 데이터는 일정기간 동안 사라지지 않음. 브라우저의 세션 정보가 사라짐
• 서버가 허용하는 한 용량 제한은 없으나, 사용자가 많아질수록 서버 메모리를 많이 차지함

 

 

---

쿠키 vs 세션

1. 저장위치
   • 쿠키 : 클라이언트
   • 세션 : 웹 서버
2. 속도 : 쿠키 > 세션
3. 보안 : 쿠키 < 세션
4. 라이프사이클
   • 쿠키 : 브라우저를 종료해도 만료 기간이 남아있으면 존재
   • 세션 : 브라우저 종료 시 만료 기간에 상관없이 종료

✔ 장바구니, 로그인 정보 저장 등은 둘 다 사용 가능하지만 주로 쿠키를 사용

 

 

 

---

웹 스토리지

• 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소
• key-value 스토리지 형태
• 쿠키와 달리 자동 전송 위험 X
• Origin 단위로 접근이 제한되는 특성 덕에 CSRF로부터 안전
• 쿠키보다 큰 저장 용량 (모바일 2.5MB, 데스크탑 5~10MB)
• 서버가 HTTP 헤더를 통해 스토리지 객체 조작 X
• 문자형 타입만 지원

 

로컬 스토리지 (Local Storage)

사용자가 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 계속 브라우저에 남아있음 (단, 동일한 브라우저를 사용할 때)

→ 지속적으로 필요한 데이터 저장 

ex) 자동로그인

 

 

세션 스토리지 (Session Storage)

데이터가 Origin 뿐 아니라 브라우저 탭에도 종속되기 때문에, 윈도우나 브라우저 탭을 닫을 경우 제거

→ 일시적으로 필요한 데이터 저장

ex) 일회성 로그인 정보, 입력폼 저장 등

 

 

---

🍀프로젝트에서 JWT 토큰을 어떤 저장소에 저장?

• Refresh Token → Cookie
  • 클라이언트 상의 별도의 처리없이 서버가 컨트롤 O
• Access Token → Local Storage
  • 로그인 정보 지속적 저장
  • 직접 로그아웃, 토큰 만료 시에만 삭제