담비의 개발블로그

[JavaScript]Cookie 설정법 본문

언어&프레임워크/JAVASCRIPT

[JavaScript]Cookie 설정법

담비12 2024. 10. 11. 19:41

자바스크립트에서 쿠키 설정법에 대해 알아보도록 하좌! 

 

1. 쿠키 설정하기

쿠키를 설정하려면 document.cookie에 문자열 형식으로 값을 할당한다.

document.cookie = "key=value; expires=날짜; path=경로";

 

key=value: 쿠키의 이름과 값이다.

expires=날짜: 쿠키가 만료될 날짜를 설정한다. 형식은 GMT 날짜 형식이다.

path=경로: 쿠키가 적용될 경로를 설정한다. 기본값은 현재 경로이다.

 

- GMT날짜 형식 예시 : Wed, 11 Oct 2024 10:30:00 GMT /요일, 날짜(연도포함) 시간(24시간형식) GMT(그리니치 표준시)

 

2. 쿠키 가져오기

쿠키를 가져올 때는 document.cookie를 사용한다. 이 값은 모든 쿠키가 ;로 구분된 문자열로 반환된다. 특정 쿠키를 가져오려면 문자열을 파싱해야 한다.

function getCookie(name) {
  const cookieArr = document.cookie.split(";");
  for (let i = 0; i < cookieArr.length; i++) {
    const cookiePair = cookieArr[i].trim().split("=");
    if (cookiePair[0] === name) {
      return cookiePair[1];
    }
  }
  return null;
}

// 쿠키 가져오기
const username = getCookie("username");
console.log(username); // 'JohnDoe' 출력

 

 

3. 쿠키 삭제하기

쿠키를 삭제하려면 만료 날짜를 과거로 설정하면 된다.

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

위의 예시는 username이라는 쿠키를 삭제한다. path를 설정해야 특정 경로에 설정된 쿠키를 삭제할 수 있다.