[JS/JavaScript] JavaScript로 쿠키(Cookie) 설정,읽기,삭제 구현

쿠키 설정하기

function setCookie(cookieName, value, exdays, domain, secureBool) {
    const exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    let cookieValue = encodeURIComponent(value) + "; path=/;";
    
    if (exdays) {
        cookieValue += " expires=" + exdate.toUTCString() + ";";
    }

    if (domain) {
        cookieValue += " domain=" + domain + ";";
    }

    if (secureBool === true) {
        cookieValue += " secure;";
    }

    document.cookie = cookieName + "=" + cookieValue;
}

매개변수

1. cookieName: 쿠키의 이름을 지정합니다. 이 이름은 쿠키를 식별하는 데 사용됩니다.
2. value: 쿠키에 저장할 값을 지정합니다. encodeURIComponent를 사용하여 특수 문자가 포함된 값을 안전하게 인코딩합니다.
3. exdays: 쿠키의 유효 기간(일 단위)을 설정합니다. 이 값이 0이면 세션 쿠키가 되어 브라우저 종료 시 삭제됩니다.
4. domain (선택적): 쿠키가 유효한 도메인을 지정합니다. 설정된 도메인에서만 쿠키가 전송됩니다.
5. secureBool (선택적): 쿠키에 Secure 속성을 설정할지 여부를 나타냅니다. true로 설정되면 쿠키는 HTTPS 연결을 통해서만 전송됩니다.

쿠키 설정 과정

1. 만료일 계산: exdays 값을 현재 날짜에 더하여 쿠키의 만료일을 설정합니다. 만료일은 UTC 문자열로 변환되어 쿠키에 추가됩니다.
2. 쿠키 값 생성: 쿠키 값은 key: value 형식으로 생성되며, 인코딩된 값과 기본 경로(/)가 설정됩니다.
3. 옵션 설정:
   • expires 옵션은 쿠키의 유효 기간을 설정합니다.
   • domain 옵션은 쿠키가 유효한 도메인을 설정합니다.
   • secure 옵션은 HTTPS를 통한 안전한 전송을 보장합니다.
4. 쿠키 저장: document.cookie를 통해 쿠키를 생성하고 설정된 속성을 포함한 문자열을 브라우저에 저장합니다.

// 'userToken'이라는 이름의 쿠키를 설정하고 7일 뒤에 만료되며, 'example.com' 도메인에서만 유효하고 HTTPS를 통해서만 전송됩니다.
setCookie('userToken', 'abc123', 7, 'example.com', true);

 

쿠키 읽기

function getCookie(cookieName) {
    cookieName = cookieName + '=';
    let cookieData = document.cookie;
    let start = cookieData.indexOf(cookieName);
    let cookieValue = '';
    if (start != -1) {
        start += cookieName.length;
        let end = cookieData.indexOf(';', start);
        if (end == -1) end = cookieData.length;
        cookieValue = cookieData.substring(start, end);
    }
    
    return decodeURIComponent(cookieValue);
}

매개변수

• cookieName: 가져오려는 쿠키의 이름을 나타냅니다. 함수는 이 이름을 사용하여 쿠키를 검색합니다.

작동 원리

1. 쿠키 데이터 접근: document.cookie를 사용하여 브라우저에 저장된 모든 쿠키를 문자열 형식으로 가져옵니다. 이 문자열은 세미콜론(;)으로 구분된 name=value 쌍의 형태로 구성됩니다.
2. 쿠키 검색:
   • indexOf 메서드를 사용하여 cookieData 문자열에서 cookieName=의 시작 위치를 찾습니다.
   • cookieName 뒤에 '='를 추가하여 정확한 매칭을 보장합니다.
3. 쿠키 값 추출:
   • start가 -1이 아니라면 해당 쿠키가 존재함을 의미합니다.
   • start를 cookieName.length만큼 증가시켜 실제 쿠키 값의 시작 위치를 설정합니다.
   • end를 통해 값의 끝 위치를 찾습니다. 이는 다음 세미콜론(;)의 위치이거나, 해당 쿠키가 마지막일 경우 문자열의 끝입니다.
   • substring 메서드를 사용하여 start와 end 사이의 문자열을 추출하여 cookieValue에 저장합니다.
4. 디코딩 및 반환:
   • decodeURIComponent를 사용하여 인코딩된 쿠키 값을 디코딩하여 원래의 문자로 복원합니다.
   • 디코딩된 쿠키 값을 반환합니다. 쿠키가 없으면 빈 문자열을 반환합니다.

// 'userToken' 쿠키의 값을 가져옴
const userToken = getCookie('userToken');

console.log(userToken); // 예시 출력: 'abc123'

 

쿠키 삭제

쿠키 삭제는 별도의 메서드를 만들지 않고 setCookie 함수를 활용하여 간단히 수행할 수 있습니다.

쿠키를 삭제하려면 해당 쿠키의 만료일을 과거로 설정하면 됩니다.

이렇게 하면 브라우저는 해당 쿠키를 즉시 삭제합니다.

// 'userToken' 쿠키를 삭제
setCookie('userToken', '', -1);

// 특정 도메인에서 'userToken' 쿠키를 삭제
setCookie('userToken', '', -1, 'example.com');

// 특정 도메인에서 'userToken' 쿠키를 삭제하고, HTTPS로 전송된 경우
setCookie('userToken', '', -1, 'example.com', true);