Cookie의 유효기간

웹 브라우저에서 로컬에 작은 텍스트 데이터를 저장하는 영역인 쿠키!..

쿠키는 클라이언트와 서버 간의 상태를 유지하고 추적하기 위해 사용을 하는데, 여러 가지 옵션이 있다.

그중 유효기간에 대한 옵션을 살펴보려고 한다.

 

보통 쿠키가 언제까지 유효한지 설정되어 있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 사라진다. 이런 쿠키를 세션 쿠키라고 한다.

그럼 쿠키의 유효기간을 어떻게 설정할까? 🤔

 

MaxAge

MaxAge 옵션은 쿠키의 만료기간을 설정할 때 사용한다.

현재부터 만료기간까지의 브라우저에서 유지되는 시간을 초 단위로 설정한다.

예를 들어 아래와 같이 Max-Age=3600 이라고 한다면, 브라우저에 저장 후 1시간 동안 유지된다.

Set-Cookie: id=a3fWa; Max-Age=3600; Path=/

 

0이나 음수값을 설정하면 쿠키는 바로 삭제된다.

// 1시간 뒤에 쿠키가 삭제됩니다.
document.cookie = "user=John; max-age=3600";

// 만료 기간을 0으로 지정하여 쿠키를 바로 삭제함
document.cookie = "user=John; max-age=0";

 

 

Expires

Expires 옵션은 쿠키의 유효일자를 설정한다. 날짜/시간 값으로 지정이 된다.
expires=Wed, 21 Oct 2023 07:28:00 GMT 로 지정이 되었을 때, 해당 날짜의 시간에 쿠키가 만료된다.
expires는 반드시 GMT(Greenwich Mean Time) 포맷으로 설정이 되어야 한다.

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2023 07:28:00 GMT; Path=/

 

자바스크립트에서는 date.toUTCString 메서드로 쉽게 변경할 수 있다.

// 지금으로부터 하루 후
let date = new Date(Date.now() + 86400e3);
date = date.toUTCString();
document.cookie = "user=John; expires=" + date;

 

그럼 MaxAge와 Expires 둘 다 쿠키의 만료기한에 대한 설정 옵션인데 차이가 있을까? 🤔

 

MaxAge

• 상대적인 시간을 사용
• 클라이언트와 서버 사이의 시간 차이에 영향을 받지 않는다

Expires

• 특정 시간대로 설정되어 있음
• 클라이언트와 서버 사이에 시간 차이가 생길 경우 문제가 발생할 수 있음

이 외에도 HTTPS로 통신하는 경우에만 쿠키를 전송하는 secure 등 다양한 옵션이 있는 것 같다.

 

 

출처

https://ko.javascript.info/cookie