브라우저 저장소

💻 자세한 정보성 글이 아닌 면접 대비 간단하게 정리한 글입니다!

1 브라우저 저장소 분류

• 웹 스토리지(Web Storage) : 웹 데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소.
• 쿠키(Cookie) : 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장소
  
  

2 브라우저 저장소 각 개념

1. 웹 스토리지

   • HTML5부터 추가된 클라이언트 기반 키-벨류 저장소

   • 로컬 스토리지와 세션 스토리지가 있음 - 영구성의 차이

   • 요청마다 서버에 전달되지 않으므로 자원낭비가 적고, 표준을 지켜 설계하면 보안도 강화됨

     1) 로컬 스토리지

     • 브라우저를 종료해도 데이터를 보관(영구성)
     • 도메인만 같으면 전역적으로 데이터가 공유되는 특성을 가지고 있음
     • 만료기간 없이 저장이 가능하여 자동로그인에 사용됨

     2) 세션 스토리지

     • 만료기간이 있어 브라우저가 종료되면 데이터가 삭제(비영구성) - 같은 탭에서는 새로고침 시에는 데이터가 유지됨
     • 자동 임시 저장 용도로 쓰임 ( ex) 입력폼 정보 저장, 비로그인 장바구니 등)
     • 도메인이 같더라도 브라우저가 다르면 브라우저 컨텍스트가 다르기 때문에 각각의 세션 스토리지가 형성되어 데이터 공유가 되지 않음

2. 쿠키

   • 브라우저 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일

   • HTTP 요청을 보낼 때 서버에 특정 요청을 보내면 서버는 요청 자체만으로는 이 요청이 누가 보낸건지 알 수 없음

   • 암호화 없이 전달되므로 도청당하면 정보를 쉽게 도난당할 수 있음

   • 이 때 쿠키에 정보를 담아 서버에 보내면 서버는 쿠키를 읽어 요청자를 파악함

   • 쿠키는 4KB의 용량 제한을 가지며 한 사이트당 20개의 쿠키를 가질 수 있음

   • 유효기한 지정 가능

   • 서버와의 통신을 목적으로 만들어졌기 때문에 쓸데없는 값이 많으면 그만큼 네트워크 트래픽이 증가

• 쿠키의 목적
  1) 세션 관리 : 서버가 알아야될 정보(로그인 및 사용자 정보, 접속시간)
  2) 개인화 : 사용자에 맞는 페이지 제공
  3) 트래킹 : 사용자 행동 및 패턴 분석
  
  

3 웹 스토리지와 쿠키의 차이점

• 웹스토리지는 쿠키와 달리 서버에 전송되지 않고 명시적으로만 전송 가능하므로 서버에 부담이 가지 않음
• 또한 필요한 경우에만 꺼내 쓰는 것임으로 자동 전송의 위험성이 없음
• 다른 오리진이 요청할 때에는 꺼내쓰고 싶어도 오리진 단위로 접근이 제한되는 특성 덕분에 값을 꺼내쓸 수 없음(CSRF)
• 웹스토리지는 쿠키에 비해 용량이 넉넉함