[프론트엔드 기술면접] 브라우저 저장소 | 로컬 스토리지, 세션 스토리지, 쿠키

쿠키와 로컬 스토리지, 세션 스토리지는 모두 브라우저에서 데이터 저장소의 역할을 한다.
웹에서 로그인을 하기 위해서는 토큰을 발급받아 API를 호출해야 한다. 하지만, 반복되는 작업을 계속 하게 되는 것이 비효율적이고, 이를 보완하기 위해 쿠키를 서버와 클라이언트에 생성해서 토큰 발급 없이 쿠키만 가지고 서버에 요청을 할 수 있게 된다. 쿠키는 저장 공간이 4KB로 작은 편인데, 이러한 단점을 보완하여 만든 것이 웹 스토리지이다.

웹 스토리지는 서버에 클라이언트 데이터를 저장하지 않는다. 웹 스토리지에는 로컬 스토리지와 세션 스토리지가 있는데 로컬 스토리지는 브라우저에 정보가 계속해서 남아있는 반면, 세션 스토리지는 해당 세션이 끝나면 즉, 브라우저가 닫히면 데이터가 사라진다.

웹 스토리지는 데스크탑 기준 5~10MB의 저장 공간을 가지고 있어서 쿠키에 비해 훨씬 저장공간이 크다는 장점이 있다. 하지만, 웹 스토리지는 HTML5부터 지원하기 때문에 이전 브라우저에서는 지원이 되지 않는다는 단점이 있다.

웹 스토리지란?

• 서버가 아닌 클라이언트 내에서 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소
  간단한 Key-Value 스토리지 형태

  로컬 스토리지(Local Storage)란?

  브라우저를 닫아도 데이터가 영구적으로 남아있는 storage이다.
  지속적으로 필요한 데이터 저장(자동 로그인 등)

  세션 스토리지(Session Storage)란?

  브라우저를 닫으면 데이터도 사라지는 storage이다.
  일시적으로 필요한 데이터 저장(일회성 로그인 정보, 입력폼 저장 등)

쿠키(Cookie)란?

• 만료 기한이 존재하는 Key, Value 형태의 저장소
• 클라이언트(웹 브라우저) 로컬에 작은 ‘텍스트 파일’로 저장 (로그인 자동 입력, 다시 보지 않음 팝업창)
• 웹 사이트에 쿠키 설정 시, 이 후의 모든 웹 요청에는 자동으로 쿠키 정보가 포함되어 서버에 전송된다.