기본적인 쿠키 설정🍪

쿠키(웹 쿠키, 브라우저 쿠키)는 기본적으로 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다.(클라이언트에서 생성할 수도 있음) 브라우저는 쿠키를 저장해 놓았다가, 서버 요청 시 함께 전송한다. 4kb 용량 제한이 있다.

1️⃣ cookie의 라이프타임

1. 세션 쿠키(Session Cookie)
   세션 쿠키는 현재 세션이 끝날 때(브라우저를 닫을 때) 삭제된다.

2. 영속적인 쿠키(Persistent Cookie)
   영속적인 쿠키는 Expires 속성에 명시된 날짜에 삭제되거나, Max-Age 속성에 명시된 기간 이후에 삭제된다.쿠키를 저장할때 expires나 max-age 속성을 특별히 설정하지 않으면 세션 쿠키가 된다.

2️⃣ 기본적인 쿠키 설정

클라이언트에서 js로 쿠키를 저장할때 아래와 같이 작성한다

document.cookie = "COOKIE_NAME=cute; max-age=3600 * 24 * 7; Path=/;"; //이 외 필요한 속설들을 지정하도록 한다.

• Expires : GMT 형식이나 UTC 형식으로 쿠키 만료 날짜를 설정한다.
• Max-Age: 몇초뒤 쿠키가 만료 될지 설정한다.
• Secure: https에서만 쿠키가 전송된다.
• Domain: 도메인이 일치하는 요청에서만 쿠키가 전송하기 위해 설정. 도메인이 다르면 third-party cookie임
• SameSite: None,Lax,Strict 세 옵션이 있다. None→도메인이 달라도 전송한다. 크롬에서 SameSite 속성으로 None을 사용하려면 반드시 해당 쿠키는 Secure 쿠키여야 한다. Strict→도메인이 다르면 전송하지 않는다. Lax→Strict 보다 비교적 느슨한 정책이다.
• HttpOnly: 클라이언트에서 js로 쿠키를 조작할 수 없도록 한다.
• Path: 해당경로에서의 요청에서만 쿠키가 전송되도록 한다.

3️⃣ 쿠키 CRUD

쿠키 저장하기

function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
setCookie("username", "John", 30);

쿠키 가져오기

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

쿠키 삭제하기

function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
deleteCookie("username");

쿠키 갱신하기

function updateCookie(name, value, days) {
  setCookie(name, value, days);
}

4️⃣ 크로스 브라우징(사파리...)

브라우저마다 보안정책으로 인한 쿠키 최대 저장기간이 다르다. 사파리는 최대 7일이다. 굉장히 짧다.
크로스브라우징에 대응하는 코드를 짜다보면 사파리가 정말 싫어진다.

5️⃣ CAUTION

매 서버 요청마다 쿠키가 함께 전송되기 때문에 쿠키에 많은 정보를 저장하다 보면 네트워크 성능이 안 좋아질 수 있다.따라서 웹스토리지(localStorage,sessionStorage),indexedDB를 적절하게 사용하도록 하자.

참고
https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies