[javascript] 쿠키로 개인화 데이터 관리하기

쿠키는 도큐먼트 객체의 전역 객체로 제공됩니다.

document.cookie 로 접근할 수 있습니다.

전체 쿠키를 보려면 

console.log(document.cookie);

로 출력할 수 있습니다.

콘솔에 표시되는 쿠키 정보는

키1=값1;키2=값2;키3=값3;...

형식으로 표현됩니다.

쿠키를 저장하는 가장 기본 방법은

document.cookie = 'pcode=12345;expires=Mon, 15 Jun 2020 09:45:10 GMT';

과 같습니다.

쿠키를 저장하면 기존 쿠키 값에 새 쿠키 값이 추가되어 저장됩니다.

"키=값;" 은 이해가 쉽지만, 그 뒤에 오는 만료일자 정보는 UTC 시간 값으로, 이런 만료 날짜 값을 쿠키를 저장할 때마다 일일이 작성해서 저장하는 것은 쉽지 않은 일입니다.

그래서 대부분 이해하기 쉬운 현재 날짜를 기준으로 +/- 날짜값을 넣는 형식의 쿠키를 가져오고 저장하는 함수를 만들어 사용합니다.

고대의 주문서(Elder Scroll) 처럼 태초에 자바스크립트가 있던때부터 내려오는 유사한 코드로 된 함수들이 있습니다.

직접 구현하기 위해 고민할 필요없이 이미 구현되어 있는 함수를 가져다 쿠키 정보를 관리하는데 사용하는 것을 추천합니다.

쿠키 저장, 값얻기, 삭제 함수는 다음과 같습니다.

쿠키값 가져오기

쿠키 객체에는 만료되지 않는 쿠키만 표시되므로, 쿠키 정보를 ';' 와 '='로 분리하면 원하는 쿠키의 값을 얻을 수 있습니다.

function getCookie(name) {
    var arr_cookies, keyval;
    arr_cookies = document.cookie.split(';');
    for (var i=0; i < arr_cookies.length; i++) {
        keyval = arr_cookies[i].split('=');
        if (keyval[0] == name) {
            return keyval[1];
        }
    }
    return '';
}

위처럼 루프를 돌아 원하는 쿠키값을 찾는 방법보다는 정규표현식을 사용해 조금 더 고급스럽고 간결하게 쿠키값을 찾을 수 있습니다.

function getCookie(name){
name = new RegExp(name + '=([^;]*)'); // 찾는 쿠키 키 뒤에 있는 값을 찾는 정규표현식
return name.test(document.cookie) ? unescape(RegExp.$1) : ''; // 있으면 찾은 값을 반환
}

쿠키값 저장

쿠키 값을 추가 합니다. 

복잡한 GMT 날짜 포맷 대신 현지 시각을 기준으로 + 날짜수를 파라메터로 넘겨 쿠키설정을 합니다.

예를 들어

setCookie('pcode','12345',365);

와 같은 형식으로 365일동안 유지되는 쿠키값을 설정할 수 있습니다.

function setCookie(name, value, expiredays) {
    var dt, expires;
    expiredays = expiredays || 1;
    dt = new Date();
    dt.setTime(dt.getTime() + (expiredays * 24 * 60 * 60 * 1000)); // 24 * 60 * 60 * 1000 대신 86400000 을 사용해도 됨.
    expires = "expires=" + dt.toUTCString();
    document.cookie = name + "=" + value + "; " + expires;
}

쿠키 삭제 

쿠키 삭제는 쿠키 저장 함수를 그대로 사용합니다.

쿠키를 저장할 때 과거 날짜이면 쿠키가 만료되어 무효화되기 때문에 별도의 삭제 없이 쿠키를 만료하는 것으로 쿠키 삭제 처리를 합니다.

같은 쿠키 이름으로 다시 값을 지정하려면 날짜를 미래로 설정해주면 됩니다.

function delCookie(name) {
setCookie(name, '', -1);
}