본문 바로가기
DEV

[javascript] cookie 다루기 : 확인, 등록, 삭제 예제

by 아노앤유노 2024. 4. 11.
반응형

 

cookie 다루기 : 확인, 등록, 삭제 예제

 

1. cookie 확인

쿠키를 확인하려면 document.cookie를 사용한다. 이 속성은 현재 페이지의 모든 쿠키를 문자열로 반환한다.

console.log(document.cookie);

 

1-1. cookie명으로 값 확인하기

function getCookie(cookieName) {
    // 현재 페이지의 모든 쿠키를 가져옵니다.
    const cookies = document.cookie.split(';');

    // 각 쿠키를 확인하여 원하는 쿠키명이 있는지 검사합니다.
    for (let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i].trim();
        // 쿠키명이 주어진 쿠키명과 일치하는지 확인합니다.
        if (cookie.startsWith(cookieName + '=')) {
            // 쿠키 값만을 추출하여 반환합니다.
            return cookie.substring(cookieName.length + 1);
        }
    }
    // 해당 쿠키명이 없으면 null을 반환합니다.
    return null;
}

// 예시: 쿠키명이 'username'인 쿠키의 값을 가져옵니다.
const username = getCookie('username');
console.log(username);

 

2. cookie 등록하기

document.cookie = "cookieName=cookieValue; expires=Thu, 01 Jan 2026 00:00:00 UTC; path=/";

 

cookieName은 쿠키의 이름이고, cookieValue는 쿠키의 값이다. expires는 쿠키의 만료 날짜이며, 이는 UTC 형식의 문자열로 지정된다. path는 쿠키의 유효 경로를 나타낸다. 이 값을 /로 설정하면 현재 도메인의 모든 페이지에서 쿠키를 사용할 수 있다.

*이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

3. cookie 삭제하기

document.cookie = "cookieName=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

 

cookieName은 삭제할 쿠키의 이름이다.

 

단, 보안 및 개인 정보 보호를 고려하여 쿠키를 다룰 때 주의해야 한다.

반응형