브라우저 저장소 차이점 (LocalStorage, SessionStorage, Cookie)

브라우저 저장소 분류

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

 

웹 스토리지 ( Web Storage)

웹 스토리지는 HTML5에 추가된 클라이언트 기반 키-밸류 저장소 이며,

웹 스토리지는 로컬 스토리지 ( Local Storage ) 와 세션 스토리지 ( Session Storage ) 로 나눌 수 있습니다.

로컬 스토리지 ( Local Storage ) 는 브라우저를 종료해도 데이터를 보관(영구성)합니다. 또한, 도메인만 같으면 전역적으로 데이터가 공유되는 특성을 가지고 있습니다.

세션 스토리지 ( Session Storage ) 는 브라우저가 종료되면 데이터가 삭제(비영구성)됩니다. 도메인이 같더라도 브라우저가 다르면 ( 탭 브라우저, 다른 브라우저 ) 브라우저 컨택스트가 다르기 때문에 각각의 세션 스토리지가 형성되어 데이터 공유가 되지 않습니다.

쿠키 ( Cookie )

쿠키는 애초에 서버와 클라이언트가 지속적으로 데이터 교환을 하기 위해 만들어 졌습니다. 예를 들어 우리가 HTTP 요청을 보낼때 서버에 특정 요청을 보내면 서버는 요청 자체만으로는 이 요청이 누가 보낸 것인지 알 수 없습니다. 이 때 우리는 쿠키에 정보를 담아서 서버에 보내면 서버는 쿠키를 읽어서 요청자를 파악합니다. 쿠키는 4KB의 용량 제한을 가지고 있으며 한 사이트당 20개의 쿠키를 가질 수 있습니다. 또한 쿠키는 만료기한을 지정할 수 있습니다. 쿠키는 서버와의 통신을 목적으로 만들어 졌기 때문에 더 주의해야 됩니다. 쿠키에 쓸데없는 값이 많다면 그만큼 네트워크 트래픽이 증가하게 됩니다.

쿠키의 목적

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

 Web Storage의 차이점(cookie와 비교)

웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다.

Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이는 네트워크 트래픽 비용을 줄여 준다.

 

 

단순 문자열을 넘어(스크립트) 객체정보를 저장할 수 있다.

문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있다는 것은 개발 편의성을 제공해주는 주요한 장점이 된다. 브라우저의 지원 여부를 확인해 봐야 하는 항목이다.

 

쿠키는 개수와 용량에 있어 제한이 있다. 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이며 최대 쿠키 크기는 4KB로 제한되어 있다.

Web Storage에는 이러한 제한이 없다. 

 

쿠키는 만료일자를 지정하게 되어 있어 언젠가 제거된다. 
WebStorage는 만료기간의 설정이 없다. 즉, 한번 저장한 데이터는 영구적으로 존재하는 것이다.

 

 

 

 

참조 : https://ryuhojin.tistory.com/10, https://velog.io/@ejchaid/localstorage-sessionstorage-cookie%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90