local storage, session storage, cookie

Q.브라우저 저장소에 대해서 차이점을 설명해주세요(local storage, session storage, cookie)

로컬 스토리지

• 브라우저나 os가 재시작해도 데이터가 파기되지 않음
• 동일한 오리진을 가진 모든 창에서 공유되기 때문에 한 창에서 데이터를 설정하면 다른 창에서 변동사항을 볼 수 있음

세션 스토리지

• 로컬스토리지에 비해서 자주 사용되지 않음
• 페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않음
  하지만 탭을 닫고 새로 열 때는 사라짐
  그런데 하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유됩니다.

쿠키

• 4kb 용량 제한
• 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면 브라우저는 이 내용을 자체적으로 브라우저에 저장
• 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달
• 쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰임

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

참고
https://ko.javascript.info/cookie
https://ko.javascript.info/localstorage