쿠키 - 세션쿠키와 지속쿠키의 차이점(+지속쿠키 설정 방법)

세션쿠키 vs 지속쿠키

• 세션쿠키(Session Cookie) : 세션쿠키는 메모리에 저장되어(디스크x) 브라우저가 종료되면 삭제된다.
• 지속쿠키(Persistent Cookie) : 지속쿠키는 디스크에 저장되어 브라우저가 종료되거나 심지어 컴퓨터가 재시동 되더라도 남아있다. 만료 시간이 존재하고, 만료되면 삭제되는것이 특징이다. 예시로 Google Analytics Cookie가 있다.

→ 쿠키 저장시 Max-Age, Expires값을 설정한다면 저장 기한이 있는 지속쿠키로 저장되고, 이 두 값을 설정하지 않고 저장하면 자동으로 세션쿠키로 저장된다.

react-cookie에서 지속쿠키 설정 방법

const cookies = new Cookies();
cookies.set('ACCESS_TOKEN', res.data.accessToken, { maxAge: 2 * 60 * 60 }); // 단위: 초, 2시간

const cookies = new Cookies();
const expires = new Date();
expires.setFullYear(expires.getFullYear() + 1);
cookies.set('ACCESS_TOKEN', res.data.accessToken, { expires: expires });

: maxAge값을 주어 현재 시간부터 기간을 설정하거나, expires값을 주어 만료 시간을 직접 설정하게 되면 지속쿠키로 설정할 수 있다.

 

여담으로 프로젝트에서 쿠키에 저장된 Access Token의 저장기한을 주도록 구현하기 위해 관련 내용을 조사했는데, 이대로 구현한다면 토큰은 지속쿠키가 되었다. 하지만 브라우저가 종료되면 로그인 정보도 사라지도록 구현해야 했기 때문에 결국 세션쿠키로 구현하였다..ㅜ^ㅜ

 

참고문서

- https://www.cookiepro.com/knowledge/what-is-a-persistent-cookie/ 

- https://www.npmjs.com/package/react-cookie