Javascript - HTTP 쿠키의 정의와 사용하는 방법 with js-cookie

HTTP 쿠키는 웹 브라우저에 저장되는 작은 크기의 문자열로, HTTP 통신을 할 때 값을 주고받을 수 있도록 만들어진 보조적인 수단입니다. 기본적으로 HTTP 프로토콜은 상태가 없으며(stateless), 제한적이지만 쿠키를 이용해 값들을 주고받을 수 있게 정의된 개념입니다. 정확한 명세는 RFC 6265에 정의되어 있습니다.

HTTP 쿠키의 정의를 알아보자.

쿠키(Cookie)는 브라우저와 서버 간에 지속적으로 유지할 수 있는 데이터를 제공함으로써, 상태를 가질 수 있도록 하는 HTTP 상태 관리 개념입니다. 쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 전달받은 내용(데이터)을 저장하는데 이를 쿠키라고 이야기합니다. 또한 브라우저는 서버와 통신할 때 저장하고 있는 내용을 HTTP 요청 헤더의 Cookie에 넣어 전달합니다.

 

 쿠키를 사용하는 목적은 크게 3가지로 볼 수 있습니다.

 

- 세션 관리(Session management)

: 로그인 정보나 장바구니 목록 같이 서버에서 가지고 있어야 할 정보를 관리할 때

 

- 개인화(Personalization)

: 개인을 식별하고, 맞춤형 서비스를 제공해야 할 때

 

- 추척(Tracking)

: 사용자의 행동을 기록하고 분석해야 할 때

 

 tip. 여기서 짚고 넘어가야 할 이야기!

 과거에는 클라이언트(브라우저)가 데이터를 관리할 수 있는 방법은 쿠키로 제한적이었지만, 현재에는 쿠키뿐만 아니라 웹 스토리지 API(localStorage, sessionStorage)를 사용할 수 있습니다. 쿠키에 저장된 데이터는 서버와 통신을 해야 할 때 항상 전달되기 때문에 성능적인 측면과 보안적인 이슈가 있기 때문에 클라이언트에서는 쿠키를 직접적으로 사용하는 것을 권장하지 않습니다.

 

 

바닐라 자바스크립트로 쿠키를 저장하고 읽고 삭제하는 방법

클라이언트(브라우저)에서는 직접적으로 쿠키를 접근하는 것은 좋지 않지만 학습을 위해 쿠키를 저장하고, 읽고, 삭제하는 코드를 자바스크립트로 작성해 보았습니다.

 

 쿠키 저장하기 - setCookie()

const setCookie = function (name, value, expiredDay) {
    const expired = new Date();
    expired.setTime(expired.getTime() + expiredDay * 24 * 60 * 60 * 1000);

    document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + expired.toUTCString() + ';path=/';
};

setCookie('usePopup', 'true', 1);

 쿠키 읽기 - getCookie()

const getCookie = function (name) {
    var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return value ? decodeURIComponent(value[2]) : null;
};

getCookie('usePopup');

 쿠키 삭제하기 - deleteCookie()

const deleteCookie = function (name) {
    document.cookie = name + '=; expires=Thu, 01 Jan 1999 00:00:10 GMT;';
}

deleteCookie('usePopup');

 만약 불가피한 상황에 의해서 쿠키를 관리해야 하는 상황이 생긴다면 직접 자바스크립트 코드를 작성하는 것도 좋지만, 이는 생각보다 번거롭고 고민해야 하는 부분들이 있기 때문에 직접 만들기보다는 자바스크립트 쿠키 라이브러리 사용을 권장드립니다.

 

 

자바스크립트 라이브러리로 쿠키 관리하기 [js-cookie]

js-cookie는 자바스크립트로 쿠키를 처리하기 위한 가벼운 자바스크립트 쿠키 라이브러리입니다. RFC 6265를 준수하였으며 브라우저 호환성이 보장되고, 모든 문자를 허용합니다. js-cookie를 사용하는 방법은 어렵지 않습니다. 상세한 설명과 자세한 설명은 공식 github를 방문해서 확인해주세요.

 

 CDN으로 라이브러리 사용하기

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script>

 쿠키 저장하기

// 쿠키에 값 설정하기
Cookies.set('name', 'value');

// 유효기간과 함께 쿠키에 값 설정하기
Cookies.set('name', 'value', { expires: 7 });

 쿠키 읽기

// 쿠키 값 가져오기
Cookies.get('name'); // 'value'
Cookies.get('nothing'); // undefined

// 모든 쿠키 값 가져오기
Cookies.get(); // { name: 'value' }

 쿠키 삭제하기

Cookies.remove('name');