Cookie

쿠키는 브라우저에 저장되는 작은 크기의 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부

Reference: 모던자바스크립트 쿠키와 document.cookie

쿠키는 주로 웹 서버에 의해 만들어 진다.
서버가 HTTP 응답 헤더(header)의 Set-Cookie 에 내용을 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장한다.

브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때 마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달한다.

쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰인다.

1. 사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정
2. 사용자가 동일 도메인에 접속하려고 하면 브라우저는 HTTP Cookie 헤더에 인증 정보가 담긴 고윳값(세션 식별자)을 함께 실어 서버에 요청을 보냄
3. 서버는 브라우저가 보낸 요청 헤더의 세션 식별자를 읽어 사용자를 식별

localStorage와 sessionStorage

웹 스토리지 객체(web storage object)인 localStorage 와 sessionStorage 는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.

sessionStorage 는 페이지를 새로고침해도 데이터가 사라지지 않고,
localStorage 는 브라우저를 다시 실행해도 데이터가 사라지지 않는다.

쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까?

쿠키 이외에 다른 방식을 사용하는 이유

• 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해준다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다.
• 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것이다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다.
• 웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

localStorage

• 오리진이 같은 경우 데이터는 모든 탭과 창에서 공유
• 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다.

sessionStorage

• sessionStorage는 현재 떠 있는 탭 내에서만 유지
  • 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장된다
  • 그런데 하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유된다
• 페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않는다. 하지만 탭을 닫고 새로 열 때는 사라진다