[Javascript] setCookie, getCookie 브라우저 쿠키관련세팅하기 (+ 쿠키 저장, 조회, 삭제)

세팅을 하다보면 쿠키를 이용해 작업이 진행되어야하는 경우가 있다!

지금 하고 있는 이벤트의 경우 참여여부를 확인한다던지 뭐 그런경우..?!

API접근전 상태를 체크해야할 때 주로 사용해주고 있다.

 

이벤트를 예로 들어 설명해보자!

 

쿠키 저장

setCookie

이벤트 참여가 완료되면 setCookie함수를 이용해 브라우저 쿠키에 저장

function setCookie(name, value, exp) {
    var date = new Date();
    date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);
    document.cookie = name + '=' + escape(value) + ';expires=' + date.toUTCString() + ';path=/';
};

 

쿠키 불러오기

getCookie

페이지 로드시 쿠키유무 여부를 판단하여 케이스에 따라 세팅

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

 

쿠키 초기화

쿠키 저장, 사용에 대해 알았다면..

쿠키 삭제에 대해서도 알아봐야징!

방법은 아주 간단하게 setCookie를 초기화시키면된다!

setCookie파라미터 중 exp가 실행시간을 의미하는데 이때 -1을 넣으면 해당 쿠키가 삭제된다

setCookie(~~~~,~~~~,-1);

이런식으로 불러와도 되고!

같은 개념으로 함수를 만들어 놓고 필요한 상황에 불러와도 된다!

function resetCookie(cName) {
    var expireDate = new Date();
    expireDate.setDate(expireDate.getDate() - 1);
    document.cookie = cName + "= " + "; expires=" + expireDate.toGMTString() + "; path=/";
}