개발일지

5월 취업대비반 - 브라우저 저장소 본문

frontEnd/기술면접

5월 취업대비반 - 브라우저 저장소

푸린푸린김푸린 2023. 5. 12. 15:39

 

브라우저 저장소는 크게 웹 스토리지와 쿠키로 나눌 수 있습니다.

  • 웹 스토리지 ( Web Storage ) : 웹 데이터를 클라이언트에 저장하기 위해 만들어졌으며 key-value쌍의 구조로 데이터를 저장하고 key를 기반으로 데이터를 조회할 수 있습니다.
  • 쿠키 ( cookie ) :  서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌으며 key-value쌍의 구조로 데이터를 저장합니다. 만료 기한을 지정할 수 있으며 쿠키값이 많다면 네트워크 트래픽이 증가하게 됩니다.
    • 쿠키의 목적 
      1. 세션 관리 : 서버가 알아야될 정보 ( 로그인 및 사용자 정보, 접속시간 ) 
      2. 개인화 : 사용자에 맞는 페이지 제공
      3. 트래킹 : 사용자 행동 및 패턴 분석

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

 

 

웹 스토리지는 로컬 스토리지와 세션 스토리지로 나눌 수 있습니다.

 

  • 로컬 스토리지 ( Local Storage ) : 브라우저를 종료해도 데이터를 보관합니다. 도메인이 같으면 전역적으로 데이터가 공유됩니다.
  • 세션 스토리지  ( Session Storage ) : 브라우저가 꺼지면 데이터가 삭제됩니다. 도메인이 같아도 브라우저가 다르면 브라우저 컨택스트가 달라 데이터가 공유되지 않습니다.

 

 

 

 

 

reference.

브라우저는 어떻게 동작하는가?(2012).https://d2.naver.com/helloworld/59361

브라우저 저장소( 로컬 스토리지, 세션 스토리지, 쿠키 ).프론트엔드 복습노트.(2022.02).23.05검색.https://ryuhojin.tistory.com/10

 

추가로 보면 좋을 블로그 

https://velog.io/@limuubin/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%A0%80%EC%9E%A5%EC%86%8C-%EB%B9%84%EA%B5%90%ED%95%98%EA%B8%B0

Comments