웹 서버에 의해, 사용자의 컴퓨터에 저장되는 정보

• 서버에서 User의 웹 브라우저에 전송해두는 작은 데이터 조각. ( 쿠키! )
• 브라우저에서, 쿠키를 저장해두었다가 동일한 서버에 재 요청을 할 때, 저장된 쿠키를 발송한다.
• 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 / 아닌지 를 판단할 때 주로 사용된다.
• 상태가 없는 [ stateless ] HTTP 프로토콜에서 상태 정보를 기억시켜 준다.
• 쿠키의 주요 목적
  • 세션 관리 : 서버에 저장해야 할 로그인, 장바구니 등의 정보를 관리
  • 개인화 : 사용자 선호사항, 테마 등 개인화 세팅
  • 트래킹 : 사용자 행동을 기록, 분석
• 사운드나 이미지 파일을 일시적으로 저장하여 로딩을 빠르게 하는 캐시와는 다르다.
• 별도의 '삭제'하는 방법은 없으며, 쿠키의 기간을 만료시켜 삭제를 실행한다.

Cookie in JS

// 쿠키를 저장하는 setCookie Function

let setCookie = (key, value, expireHours) => {
  let setCookieDate = new Date();
  let saveDay = expireHours * 60 * 60 * 1000;

  setCookieDate.setTime(setCookieDate.getTime() + saveDay);
  document.cookie =
    key +
    "=" +
    escape(value) +
   	// scope 도메인 입력
    // ";domain=127.0.0.1" +
    ";path=/; expires=" +
    setCookieDate.toGMTString() +
    ";";
};

// 쿠키를 불러오는 getCookie Function

let getCookie = (key) => {
  key = new RegExp(key + "=([^;]*)");
  return key.test(document.cookie) ? unescape(RegExp.$1) : "";
};

// 쿠키를 삭제하는 deleteCookie Function :: setCookie()를 활용한 것이므로 꼭 필요한 것은 아님

let deleteCookie = (key, value) => {
  setCookie(key, value, 0);
};

과거에는, 클라이언트 측에 정보를 저장할 때 쿠키를 주로 사용하곤 했다.
쿠키를 사용하는 게 데이터를 클라이언트 측에 저장할 수 있는 유일한 방법이었을 때는 이 방법이 타당했지만, 현재는 modern storage APIs 를 사용해 정보를 저장하는 걸 권장한다.
모든 요청마다 쿠키가 함께 전송되기 때문에 ( 특히, mobile data connections 에서 ) 성능이 떨어지는 원인이 될 수 있기 때문이다.
정보를 클라이언트 측에 저장하려면 Modern APIs의 종류인 웹 스토리지 API ( localStorage 와 sessionStorage ) 와 IndexedDB 를 사용하면 된다.