[JavaScript] client에서 쿠키 생성, 수정, 삭제하는 방법

 

안녕하세요. 이번 시간에는 client에서 쿠키 생성, 수정, 삭제하는 방법에 대해 알아보겠습니다.

document.cookie 를 사용해서 구현해보겠습니다.

 

먼저 쿠키 생성, 삭제하는 방법입니다.

아래의 함수를 실행하면 (개발자도구 -> 애플리케이션 -> 쿠키 )에 쿠키가 생성, 삭제 됩니다.

삭제하는 것은 만료기간을 과거로 설정해서 삭제되는 방식입니다.

setCookie()함수를 실행해서 생성한 쿠키는 브라우저를 종료하면 자동으로 삭제됩니다.

원하는 이름의 쿠키를 삭제하는 방법
deleteCookie("user") : user라는 이름의 쿠키가 삭제됨.
function deleteCookie(name) {
        document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
원하는 이름, 값의 쿠키 생성
단, 같은 이름의 쿠키가 이미 있다면 값이 변경됨.
setCookie("user", "example") : user라는 이름, example라는 값을 가진 쿠키 생성
또는 이미 user라는 이름을 가진 쿠키를 생성했었다면, user라는 이름을 가진 cookie의 값이 example로 변경됨.
function setCookie(name,value){
        document.cookie = name+"="+value+"; path=/;"
}

 

 

 

원하는 쿠키를 가져오는 방법입니다.

getCookie(cname) : 주어진 이름(cname)의 쿠키를 반환하는데, 조건에 맞는 쿠키가 없다면 ""을 반환합니다.

getCookie("user") : user라는 이름을 가진 cookie 값 반환. (example 반환)
getCookie("user2") : user라는 이름을 가진 쿠키가 없다면 "" 반환
function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

 

 

아래를 참고하면서 진행하면 좋을 것 같습니다.

 

 

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

Document.cookie - Web APIs | MDN

https://www.w3schools.com/js/js_cookies.asp

JavaScript Cookies