본문 바로가기
카테고리 없음

[프론트엔드 기술면접] 브라우저 저장소 차이점(local storage, sessin storage, cookie)

by 지 요니 2023. 7. 25.

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

 

쿠키는 만료기간이 있는 키-값 저장소로, 클라이언트에 저장됩니다. 서버에 요청을 보낼 때마다 자동으로 전송되는 특징을 가지고 있습니다.

로컬스토리지와 세션스토리지는 사용자 정보를 키-값 형태로 클라이언트 브라우저에 저장됩니다. 로컬스토리지는 브라우저를 종료해도 유지되어 유저가 삭제하지 않는 이상 영구적으로 데이터를 보관할 수 있고, 세션스토리지는 브라우저 종료시 데이터가 사라진다는 특성을 가지고 있습니다.

 

쿠키(Cookie): 일시적으로 필요한 가벼운 데이터 저장이 필요할 때

  • 장점: 클라이언트에 저장되기 때문에 서버 요청마다 자동으로 전송되어 사용자 식별이 용이합니다. 브라우저에 의해 자동으로 관리되므로 구현이 비교적 간단합니다. 만료 날짜/시간, 경로, 도메인 등을 설정하여 유연하게 제어할 수 있습니다.
  • 단점: 보안 측면에서 취약(로컬에 정보 저장)할 수 있으며, 쿠키를 탈취 당하면 데이터가 노출될 수 있습니다. 브라우저에 저장되기 때문에 용량 제한이 있을 수 있습니다. (4KB)로 제한 브라우저 설정에 의해 차단될 수 있거나 사용자가 삭제할 수 있습니다.

로컬 스토리지(Local Storage): 지속적으로 필요한 데이터 저장이 필요할 때(자동 로그인)

  • 장점: 클라이언트 측에서 데이터를 영구적으로 저장할 수 있습니다. 브라우저를 종료하고 다시 열어도 데이터가 유지됩니다. 비교적 간단한 API를 제공하므로 사용이 편리합니다.
  • 단점: 서버와의 데이터 동기화가 필요한 경우에는 별도의 로직이 필요합니다. 클라이언트 측에 저장되기 때문에 보안 취약성이 있을 수 있습니다. 용량 제한이 있을 수 있으며, 너무 많은 데이터를 저장하면 성능이 저하될 수 있습니다.

세션 스토리지(Session Storage): 일시적으로 필요한 데이터 저장이 필요할 때(일회성 로그인)

  • 장점: 세션이 종료되면 데이터도 자동으로 삭제되므로 일시적인 정보를 효과적으로 관리 클라이언트(브라우저) 측에서 데이터를 저장하고 관리하기 때문에 서버의 부하를 줄일 수 있고, 빠른 응답 시간을 제공 JavaScript API를 통해 쉽게 조작, 데이터의 추가, 수정, 삭제, 조회 등을 간단한 메서드를 사용하여 처리
  • 단점: 세션 스토리지는 로컬 스토리지(Local Storage)보다 용량이 제한적, 대용량 데이터를 저장하기에는 제한적 세션이 종료되면 저장된 데이터도 함께 삭제 메인 간 데이터 공유가 필요한 경우에는 다른 방법을 사용

댓글