[JS] 쿠키 set get delete

쿠키때문에 뉴진스 노래 들을 때마다 스트레스 받는 병이 생겼어요.

 

쿠키란?

웹 사이트 방문자의 정보를 클라이언트 브라우저에 저장하여, 방문자 정보를 파악하거나 임시 데이터를 보관하는 데 사용할 수 있다.

DOM에 쿠키 문자열이 담겨있기 때문에, document.cookie 정보를 읽어서 쿠키 값을 활용할 수 있다.

(제일 어이없는 부분은) 쿠키 문자열은 1. 객체가 아님 2. 메서드가 제공되지 않음

따라서 내가 알아서 파싱하고 정보를 구분해야 한다. 

 

쿠키 문자열은 이렇게 생겼다.

쿠키키=쿠키값; path=/; expires=Sat, 02 Oct 2021 17:46:04 GMT;

쿠키 정보는 키 = 값 형태로 저장되며, 한글도 사용 가능하다.

만료일은 GMT 시각 문자열로 표기되며, 삭제 기능이 없기 때문에 만료일을 현재 시각 이전으로 지정하여 쿠키를 만료시켜 삭제해야 한다. (보안 문제로 인해 쿠키 만료 시간은 가능하면 짧게 지정하는 것이 좋다고 한다.) 또한, GMT 시각 문자열을 다루기 위해 toGMTString() 메서드를 사용하면 날짜 객체를 GMT 시각 문자열로 변환할 수 있다.

---

쿠키 사용하는 메서드 

1. 생성 및 수정

- 쿠키는 같은 키가 있으면 기존 쿠키 값을 덮어쓰기 때문에, 수정할 때도 생성 메서드와 똑같이 써주면 된다.

const setCookie = (key, value, expiredays) => {
    let todayDate = new Date();
    todayDate.setDate(todayDate.getDate() + expiredays);
    document.cookie =
      key +
      "=" +
      escape(value) +
      "; path=/; expires=" +
      todayDate.toGMTString() +
      ";";
  };

---

2. 받기

- 쿠키를 배열로 받고, 원하는 키값을 비교해가며 변수에 저장해주는 방법을 사용했다.

- 아래 예시 코드의 토큰 이름은 자신의 상황에 따라 바꿔서 작성하면 된다.

const getCookie = () => {
    let cookie = document.cookie.split("; ");
    let cookieArr = [];
    cookie.map((e) => {
      let c = e.split("=");
      cookieArr.push(c);
    });
    console.log(cookieArr);
    // 쿠키 속 access_token, my_access_token 받기
    let key = [];
    cookieArr.map((e) => {
      key.push(e[0]);
    });
    let indexAccessToken = key.indexOf(" my_access_token");
    let indexKakaoToken = key.indexOf(" access_token");
    access_token = cookieArr[indexAccessToken][1];
    kakaoToken = cookieArr[indexKakaoToken][1];
};

---

3. 삭제

- 앞에서 말했듯이, 쿠키는 삭제하는 기능이 없기 때문에 만료일을 현재 시각 이전으로 지정하여 만료시키는 방식으로 삭제하면 된다.

const deleteCookie = (key) => {
    setCookie(key, "", -1);
  };