Cookie의 maxAge, Expires

Leo·2023년 7월 3일
0

FrontEnd

목록 보기
21/26
post-thumbnail

쿠키는 사용자가 웹 페이지 방문시 클라이언트 로컬에 저장되는 키와 값이 들어있는 데이터 파일이다.

key와 value로 쌍으로 구성되며 String 형태로 이루어져 있다

최대 300개까지 저장이 가능하며 하나의 도메인당 20개의 값만 가질 수 있다.
이 때 하나의 쿠키값은 4KB까지 가능하다

웹 서버가 웹 브라우저에게 보내어 저장했다가 서버의 부가적인 요청이 있을 때 다시 서버로 보내주는 문자열 정보라고 할 수 있다.

우리는 이 쿠키를 통해 브라우저를 종료했다가 다시 접속하더라도 로그인 상태를 유지할 수 있게 되는 것이다.

브라우저를 종료하면 삭제되는 임시 쿠키를 세션 쿠키(Seesion Cookie)라고 하고, 브라우저의 종료 여부와 상관없이 설정한 옵션만큼 사용 가능한 쿠키를 지속 쿠키(Persistent Cookie or permanent Cookie)라고 한다.
Permanent 쿠키는 쿠키를 생성할 때, Expires 또는 Max-Age 옵션을 추가한다.

expires와 max-age

쿠키의 유효일자 또는 만료기간을 지정한다.

expires나 max-age 옵션을 설정하지 않으면, 브라우저를 닫을 때 쿠키도 함께 삭제된다. 이런 쿠키를 세션쿠키 라고 한다.

expires나 max-age 옵션을 설정하면, 브라우저를 닫아도 쿠키가 삭제되지 않는다.
expires와 max-age를 둘다 설정하면, max-age가 우선 적용된다.

expires

expires는 쿠키가 만료될 날짜를 지정하여 브라우저에게 쿠키의 삭제시기를 알려주기 위해서 사용한다.
브라우저는 설정된 유효일자까지 쿠키를 유지하다가, 해당 일자가 되면 쿠키를 자동으로 삭제한다. expires 옵션을 과거로 지정하면 쿠키는 삭제된다.

쿠키의 유효일자는 반드시 GMT 포맷으로 설정해야한다. 다음은 유효기간이 하루인 쿠키를 만드는 예시이다.

//rememberme라는 쿠키에 값 1을 저장하고, 현재시간으로부터 1시간동안 유효
res.cookie('rememberme', '1', { expires: new Date(Date.now() + 3600000) })

max-age

max-age는 expires의 대안으로, 현재 시간을 기준으로 쿠키를 유지할 기간 즉, 쿠키의 만료기간을 지정할 수 있다.
현재 설정하고자 하는 만료일시까지의 시간을 밀리세컨드로 환산한 값을 설정한다. (express가 아닌 set-cookie로 쿠키 옵션을 설정한 경우, 단위는 '초') 0이나 음수로 설정하면 쿠키는 바로 삭제된다.

res.cookie('rememberme', '1', { maxAge: 3600000 })

정리
Cookie는 HTTP 프로토콜의 비상태성을 보완하기 위한 수단으로,
브라우저에 데이터를 저장할 때 사용한다.
Cookie의 Maxage 옵션은 쿠키를 얼마나 유지할 것인지 만료기간을 설정하는 옵션이며,
Expires 옵션은 언제 폐기할 것인지 삭제할 시기를 지정하는 옵션이다.
두 옵션을 동시에 설정하면
Max-age가 더 높은 우선 순위로 적용이 되고, 이 두 옵션 중 하나라도 설정하지 않으면,
해당 쿠키는 세션 쿠키로 간주하여 브라우저가 닫힐 때 폐기가 된다.
따라서 쿠키를 빠르게 폐기하고 싶다면 옵션을 설정하지 않는 것이 좋고,
쿠키를 계속 사용하고 싶다면 두 옵션 중에 하나라도 설정해주는 것이 좋다.
이 때, 브라우저를 종료하면 삭제되는 임시 쿠키를 세션 쿠키(Session Cookie) 라고 하고, 설정한 옵션만큼 사용 가능한 쿠키(Persistent Cookie) 를영속성 쿠키라고 한다

0개의 댓글