[javascript] 자바스크립트에서 cookie를 조회하고 저장하고 삭제하는 법 // 웹 쿠키 다루는 법!

■ 쿠키 저장하기

// 쿠키 저장하기 함수
export function setCookie(name, value = "", expireDays = "", path = "/") {
  let expires = "";
  if (expireDays) {
    let date = new Date();
    date.setTime(date.getTime() + expireDays * 24 * 60 * 60 * 1000);
    expires = `expires=${date.toUTCString()};`;
  }
  document.cookie = `${name}=${value || ""};${expires}path=${path}`;
}

웹브라우저에 쿠키를 저장하는 함수이다.

매개변수로는 저장할 쿠키의 key 이름, 저장할 값, 그리고 만료일을 받아온다.

값과 만료일에는 기본 값으로 ""를 할당해놨음

만료일의 값이 존재한다면 해당 만료일을 밀리초로 변경해서 expires에 저장해놓는다.

여기서 실질적으로 쿠키가 저장된다.

개인적으로 신기했던 것은 window를 통해 cookie를 저장할 지 알았는데 document를 통해 쿠키를 저장한다는 점이였다...

 

아무튼 cookie에 이름=값;만료일=밀리초;경로=/(루트); 이런 식으로 값이 저장되는 것이다.

path는 쿠키가 저장되어 반영 될 범위인데 난 전역적으로 쿠키를 쓸거라서 그냥 고정으로 박아놨음

 

---

 

■ 쿠키 조회하기(가져오기)

// 쿠키 가져오기
export function getCookie(cookieName) {
  cookieName = `${cookieName}=`;
  let cookieData = document.cookie;

  let cookieValue = "";
  let start = cookieData.indexOf(cookieName);

  if (start !== -1) {
    start += cookieName.length;
    let end = cookieData.indexOf(";", start);
    if (end === -1) end = cookieData.length;
    cookieValue = cookieData.substring(start, end);
  }
  
  return unescape(cookieValue);
}

쿠키를 가져올 때는 살짝 복잡한데... 100% 이해는 아직 못함ㅋㅋㅋ

일단 document에 저장한 쿠키를 가져온 후 indexOf()함수를 통해 쿠키 이름과 값이 들어있는 문자열의 위치를 반환한다.

 

아래는 indexOf에 대해 궁금하다면 참고...

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

String.prototype.indexOf() - JavaScript | MDN

 

document.cookie에 "a=123;b=456;c=789;" 이렇게 들어있고, 내가 찾는 쿠키의 key 값이 b라고 가정하자.

cookie.indexOf("b=");을 해주면 b=이라는 글자의 위치를 알려줄 것이다.

 

만약 찾을 수 없다면 -1이 반환되는데, -1이 아니라면 쿠키에서 해당 쿠키가 가지고 있는 길이만큼 잘라준다 (이부분 이해 잘 못했음...)

마지막 return의 unescape()함수에 대해서는 아래 갓 생활코딩님의 설명을 참고하길 바란당...

요약하면 특수문자가 포함되어 있을 수도 있는 cookie의 값을 decode해주는 것임

https://opentutorials.org/course/50/199

unescape - 생활코딩

 

---

 

■ 쿠키 삭제하기

export function deleteCookie(name, path = "", domain = "") {
  let date = new Date();
  date.setDate(date.getDate() - 1);

  let deletePath = path ? `;path=${path}` : `;path=/`;
  let deleteDomain = domain && `;domain=${domain}`;

  let cookieValue = `${name}=${deletePath}${deleteDomain};expires=${date.toUTCString()};`;

  if (getCookie(name)) document.cookie = cookieValue;
  
  return;
}

삭제하는건 나름... 간단하다.

 

우선 쿠키의 이름을 받아온다.

 

path와 domain은 해당 쿠키를 삭제할 경로와 도메인인데

받아온 path값이 있으면 걔를 넣어주고 없으면 걍 / 루트에서 지우고,

도메인도 지정해주면 적어주고, 아니면 나두고...ㅋㅋㅋㅋ

 

그리고 expires만료일은 현재 시간으로 지정해준다.

그리고 해당 쿠키의 만료일을 현재로 바꿔준 후 document의 쿠키에 다시 반영해주면

정상적으로 쿠키가 삭제되는 것을 볼 수 있다!!