By aPOST in 자바스크립트 —

자바스크립트 쿠키 저장 및 관리 총정리

쿠키는 웹 사이트 방문자의 개인화 정보를 클라이언트 브라우저 저장하는 단순하면서도 효율적인 수단입니다.

인터넷 환경 변화에 따라 쿠키의 비중은 점차 낮아지고 있지만, 여전히 방문자의 정보를 파악하고, 임시 데이터를 보관해두는 중요한 수단입니다.

클라이언트, 또는 웹 브라우저는 DOM 객체에 쿠키 정보를 담고 있는 쿠키 속성을 제공합니다.

"document.cookie" 속성은 DOM에 담고 있는 쿠키 문자열이며, 이 정보를 읽어서 쿠키 값을 가져오거나, 반대로 쿠키 값을 저장할 수 있습니다.

객체가 아니고 메서드도 제공되지 않기 때문에 쿠키 문자열을 읽어서 파싱 하고 쿠키 정보를 구분하는 것은 어디까지나 자바스크립트의 몫입니다.

쿠키 기본 알기

- 쿠키 문자열 구조

기본 쿠키 문자열은 다음과 같이 구성됩니다.

쿠키키=쿠키값; path=/; expires=Sat, 02 Oct 2021 17:46:04 GMT;

하나의 문자열로 각 속성 값을 세미콜론(;)으로 구문해서 문자열로 만듭니다.

쿠키의 만료 표시 시각은 GMT(Greenwich Mean Time) 시각입니다. 반드시 이렇게 표시를 해야 하기 때문에 자바스크립트의 Date 객체에서 제공하는 toGMTString() 메서드를 이용해서 날짜 객체를 GMT 시각 문자열로 변환하는 방법을 사용하는 것이 좋습니다.

- 쿠키정보

"키=값"의 문자열 정보를 저장합니다.

키로 접근해서 쿠키 값에 해당하는 값을 가져옵니다.

쿠키를 추가할 때는 document.cookie 속성에 새 쿠키 문자열을 대입만 하면 기존 쿠키 정보에 새 쿠키가 추가됩니다.

쿠키 키와 값은 2바이트 언어 지원이 잘 되기 때문에 한글로 사용할 수 있습니다.

- 쿠키 경로(path)

도메인 하위로 하위 쿠키 경로를 지정할 수 있습니다. 사이트에서 사용하는 쿠키 종류가 많고, 하위 URL단위로 쿠키를 따로 사용하는 경우 쿠키 경로를 추가로 지정해서 쿠키를 관리할 수 있습니다.

일반적으로 쿠키 개수가 많지 않으면 루트(/) 경로만 사용합니다.

- 만료일(expires)

만료일은 GMT 시각 문자열입니다. 쿠키는 삭제 기능이 없으며, 현재 시각 이전으로 만료일을 지정하면 자동으로 만료되어 삭제됩니다.

보안 문제나 개인 정보 노출 문제가 중요한 이슈 중의 하나이기 때문에 쿠키 만료 시간은 가능하면 짧게 지정하는 것이 좋습니다. 가능하면 3개월 이내를 추천하며 최대 1년은 넘지 않도록 쿠키 만료시간을 설정하는 것이 좋습니다.

쿠키 저장

날짜 정보는 Date 객체를 사용해 toGMTString() 함수로 변경해서 날짜 문자열을 생성해서 사용합니다.

쿠키 값은 특수문자나 2바이트 문자 처리를 위해서 escape() 함수로 이스케이핑을 하는 것을 추천합니다.

30일 후에 만료되는 쿠키를 저장하고 싶다면 setCookie('key', 'value', 30); 과 같이 실행하면 됩니다.

//쿠키 저장
// expiredays 는 일자 정수 - 365년 1년 쿠키
function setCookie(key, value, expiredays) {
    let todayDate = new Date();
    todayDate.setDate(todayDate.getDate() + expiredays); // 현재 시각 + 일 단위로 쿠키 만료 날짜 변경
    //todayDate.setTime(todayDate.getTime() + (expiredays * 24 * 60 * 60 * 1000)); // 밀리세컨드 단위로 쿠키 만료 날짜 변경
    document.cookie = key + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";";
}

쿠키 삭제

쿠키는 별도의 삭제 기능이 없습니다.

쿠키는 만료 시각이 현재 시간 이전이면 만료되어 삭제됩니다.

따라서 setCookie()와 마찬가지로 document.cookie에 기존 쿠키를 덮어쓰면 됩니다. 단, 만료 시각은 현재 시각 이전으로 설정해야 합니다.

//쿠키 삭제
//쿠키는 삭제가 없어서 현재 시각으로 만료 처리를 함.
function delCookie(key){
    let todayDate = new Date();
    document.cookie = key + "=; path=/; expires=" + todayDate.toGMTString() + ";" // 현재 시각 이전이면 쿠키가 만료되어 사라짐.
}

쿠키 읽기

정규표현식을 사용해서 쿠키들을 분리하고, 분리한 쿠키에서 일치하는 쿠키 키를 가진 쿠키를 찾아서 쿠키 값을 반환합니다.

문자열 검색 루프 문으로 처리를 하는 방법보다 더 간결하기 때문에 이 방법으로 쿠키 값을 가져오는 것을 추천합니다.

setCookie() 함수에서 escape() 함수로 이스케이핑을 했기 때문에 가져온 쿠키 값(RegExp.$1) 도 unescape() 함수로 언이스케이핑을 해야 합니다. setCookie() 함수에서 escape() 함수를 사용하지 않았을 경우 반드시 getCookie() 함수에서도 unescape() 함수를 삭제해야 합니다.

// 쿠키 읽기
function getCookie(key){
	key = new RegExp(key + '=([^;]*)'); // 쿠키들을 세미콘론으로 구분하는 정규표현식 정의
	return key.test(document.cookie) ? unescape(RegExp.$1) : ''; // 인자로 받은 키에 해당하는 키가 있으면 값을 반환
}

쿠키 체크

getCookie() 함수를 이용해 불리언 값을 반환하는 함수입니다.

getCookie() 함수에 의존하므로 해당 함수가 없으면 에러가 발생합니다.

//쿠키 체크 - 있으면 true 없으면 false
//getCookie() 에 의존
function boolCheckCookie(key) {
    return getCookie(key) != '' ? true : false;
}

쿠키 수정

쿠키는 같은 키가 있으면 기존 쿠키를 덮어씁니다.

따라서 쿠키 수정은 별도로 정의할 필요가 없습니다.

setCookie()로 기존 쿠키를 덮어쓰면 되기 때문에 setCookie() 함수를 사용합니다.

쿠키 테스트

쿠키가 있으면 값을 반환하고, 쿠키가 없으면 쿠키 값을 입력받는 프롬프트를 표시해서 사용자에게 쿠키 값을 입력받아 쿠키를 저장하는 테스트 함수입니다.

쿠키가 있는지를 확인하고, 임의의 쿠키값을 넣어볼 수 있도록 만든 함수입니다.

//쿠키 체크 테스트 함수
//getCookie() 에 의존
function checkCookieTest(key) {
    let val = getCookie(key);
    if (val != "") {
      return val;
    } else {
      val = prompt(key+" 쿠키의 값을 입력해주세요:", "");
      if (val != "" && val != null) {
        setCookie(key, val, 365);
        return val;
      }
    }
}
자바스크립트 관련글
글 196 개 모두보기 →