브라우저 저장소 차이점

들어가기전

 

WEB STORAGE이란 웹의 데이터를 클라이언트에 저장할 수 있는 자료구조다.

키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이타를 조회하는 패턴이다.

 

내부적으로는 영구저장소(LocalStorage)와 임시저장소(SessionStorage)가 분리되어 

데이터 지속성에 따라 선택적으로 사용이 가능하다.

 

Web Storage는 웹 환경에 Cookie와 유사한 개념이다.

Web Storage vs cookie 차이점

 

서버전송

web storage는 데이터를 클라이언트에만 저장할 뿐 서버로 전송은 이루어지지 않는다.

cookie는 매번 서버로 전송된다.

 

객체저장

Web Storage는 문자열 이외에도 구조화된 객체를 저장할 수 있다는 개발 편의성을 제공해준다.

단, 브라우저의 지원 여부를 확인해 봐야한다.

 

용량제한

하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개, 최대 데이터 크기는 4KB.

web Storage는 용량제한이 없다. 쿠키는 개수와 용량에 있어 제한이 있다.

 

만료일자

web storage는 한번 저장한 데이터는 영구적으로 존재한다.

쿠키는 만료일자를 지정하게 되어 있어 언젠가 사라진다.

 

 

LocalStorage와 SessionStorage

 

LocalStorage

저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.

도메인마다 로컬스토리지가 별도로 생성된다. Windows 전역 객체의 LocalStorage 컬렉션을

통해 저장과 조회가 이루어진다.

SessionStorage

SessionStorage는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다. 

Windows 전역 객체의 LocalStorage 컬렉션을 통해 저장과 조회가 이루어진다.

 

데이터 유지 측면

LocalStorage는 브라우저를 종료해도 데이터는 보관된다. 반면

SessionStorage는 브라우저가 종료되면 데이터도 같이 지워진다.

현재 페이지가 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.

 

데이터 범위 측면

Web Storage는 데이터의 보안측면에서 도메인 단위로 별도 생성된다.

하지만 여기서 LocalStorage와 SessionStorage는 결정적인 차이가 있다.

LocalStorage는 도메인만 같으면 전역적으로 데이터가 공유되지만,

SessionStorage는 도메인이 같아도 브라우저가 다르면 데이터 공유가 안된다.

탭 브라우징이나 또 다른 브라우저를 실행했을 때, 서로 각각 SesssionStorage가 유지된다.

브라우저 컨텍스트가 다르기 때문이다.

 

* 브라우저 컨텍스트란 Document를 표시하는 환경을 말한다. 

즉 브라우저가 불러온 웹페이지라고 생각하면 된다.

 

#Ref

MDN

WEB STORAGE