javascript | Cookie 설정하기, value 가져오기, 삭제하기

오늘 하루 보지 않기 기능을 구현할 때, Local Storage나 Cookies를 사용합니다. Local Storage는 간단하게 key-value 형식으로 저장할 수 있지만 Cookies를 사용하게 되면 만료기간을 설정 시에 저장할 수 있어서, 만료기간이 지나면 자동으로 쿠키가 삭제되기 때문에 더 유용하게 쓸 수 있습니다. 

---

🍋 구현 방법

저 같은 경우에는 프로젝트를 진행할때 쿠키 관련 스크립트를 utils 폴더에 넣어놓고 사용합니다.

setCookie 함수에서는 쿠키이름, 쿠키의 value, 만료일자(1일, 2일, 3일...) , getCookieValue와 deleteValue 함수의 인자로는 앞단에서 설정한 쿠키의 이름만 설정해주면 됩니다. 

const setCookie = (name: string, value: string, days: number) => {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);

  document.cookie =
    name + '=' + value + '; expires=' + date.toUTCString() + '; path=/';
};

const getCookieValue = (key: string) => {
  let cookieKey = key + '=';
  let result = '';
  const cookieArr = document.cookie.split(';');

  for (let i = 0; i < cookieArr.length; i++) {
    if (cookieArr[i][0] === ' ') {
      cookieArr[i] = cookieArr[i].substring(1);
    }

    if (cookieArr[i].indexOf(cookieKey) === 0) {
      result = cookieArr[i].slice(cookieKey.length, cookieArr[i].length);
      return result;
    }
  }
  return result;
};

const deleteCookie = (name: string) => {
  document.cookie = name + '=; expires=Thu, 01 Jan 1999 00:00:10 GMT;';
};

 

setCookie('__cookie', 'cookie_is_delicious', 3);
getCookieValue('__cookie');
deleteCookie('__cookie');

---

🍋 결과 화면

---

** 함수에서 설정한 만료기간과 실제 Cookies에 보이는 만료기간은 약 9시간이 차이나는 것처럼 나오지만, 실제로 설정한 날짜에 맞춰 만료가 됩니다