[JS] Cookie - 에이블런 프론트엔드부트캠프 24일차

1. 개념

쿠키란 서버가 사용자의 브라우저에 전송하는 작은 데이터 조각이다. 브라우저는 이 데이터 조각들을 저장해놨다가 동일한 서버에 재요청시 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에 들어왔는지 아닌지를 판단할 때에 주로 사용한다. 

2. 사용 방법

JS에서 쿠키를 생성하는 방법은 다음과 같다. 

document.cookie = 'name=value; path=/; expires=date'

 

키밸류의 형태로 쿠키를 저장하고, 저장 경로, 쿠키 만료일을 지정한다.

3. 예제

새로운 접속자는 팝업창을 띄우고, 사용자가 이전에 오늘 하루 그만보기 버튼을 클릭하였을 경우, 팝업창을 띄우지 않는 코드를 구현했다.

먼저, 쿠키를 생성하는 함수를 구현해줬다. 

function setCookie(name, value, due) {
    const day = new Date();
    const date = day.getDate();
    day.setDate(date + due)
    const dueDate = day.toGMTString();

    document.cookie = `${name}=${value}; path=/; expires=${dueDate}`;
}

 

그 후, 오늘 그만 보기 버튼을 체크한 상태에서 닫기 버튼을 클릭했을 경우 쿠키를 생성하도록 클릭 이벤트를 구현했다

btnClose.addEventListener('click', (e) => {
    e.preventDefault();

    popup.style.display = 'none';

    let isChecked = popup.querySelector('input[id=ck]').checked;
    if (isChecked) {
        setCookie('today', 'done', 1);
    }
})

 

접속자가 쿠키가 없을 경우 팝업을 띄우고, 없다면 띄우지 않는 코드를 구현했다

// cookie does not exist -> block
popup.style.display = (isCookie == -1) ? 'block' : 'none';

 

만약 쿠키 삭제 버튼을 클릭했을 경우 쿠키의 만료일을 현재 시간으로 바꾸어 쿠키 삭제를 진행하도록 구현했다.

btnDel.addEventListener('click', (e) => {
    e.preventDefault();
    setCookie('today', 'done', 0);
})