게으른 개발자의 끄적거림

Javascript 쿠키에 값 저장, 가져오기, 삭제하는 방법

끄적잉 2024. 2. 1. 22:37
반응형

Javascript 쿠키에 값 저장, 가져오기, 삭제하는 방법!

 

JavaScript를 사용하여 쿠키에 값을 저장하고 가져오며 삭제하는 방법은 다양한 상황에 따라 다르지만, 기본적인 예시를 통해 설명하겠습니다.

 

 

 

### 1. 쿠키에 값 저장하기:

쿠키에 값을 저장하려면 `document.cookie`를 사용합니다. 쿠키는 문자열로 저장되며, 각각의 쿠키는 세미콜론(`;`)으로 구분됩니다.


function setCookie(name, value, daysToExpire) {
    var expirationDate = new Date();
    expirationDate.setDate(expirationDate.getDate() + daysToExpire);

    var cookieString = name + "=" + encodeURIComponent(value) + "; expires=" + expirationDate.toUTCString() + "; path=/";
    document.cookie = cookieString;
}

// 예시: 이름이 "username"인 쿠키에 "John"이라는 값을 7일 동안 저장
setCookie("username", "John", 7);

 

반응형


### 2. 쿠키에서 값 가져오기:

저장된 쿠키 값을 가져오려면 `document.cookie`에서 해당 쿠키의 값을 찾아야 합니다.

 

 

function getCookie(name) {
    var cookies = document.cookie.split("; ");
    
    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i].split("=");
        if (cookie[0] === name) {
            return decodeURIComponent(cookie[1]);
        }
    }
    return null;
}

// 예시: "username" 쿠키에서 값을 가져오기
var usernameValue = getCookie("username");
console.log("Username: " + usernameValue);

 

 


### 3. 쿠키 삭제하기:

쿠키를 삭제하려면 쿠키의 만료일을 이전 날짜로 설정하면 됩니다.


function deleteCookie(name) {
    document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

// 예시: "username" 쿠키 삭제
deleteCookie("username");


이러한 함수들을 사용하면 간단하게 JavaScript로 쿠키를 다룰 수 있습니다. 다만, 보안과 관련된 이슈에 주의해야 하며, 민감한 정보를 다룰 때는 보다 안전한 방법을 고려해야 합니다.

반응형