브라우저 저장소

오늘은 브라우저 저장소에 대해 알아보도록하겠습니다

 

Web Storage

HTML5에는 웹의 데이터를 클라이언트에 저장할수있는 자료구조인 WebStorage가 포함되어있습니다

 

웹스토리지의 개념은 key,value 구조로 데이터를 저장하고 키를 기반으로 데이터를 조회할수있는 저장소입니다

저장소는 크게 영구저장소(로컬스토리지), 임시저장소(세션저장소)로 구성이 되어있으며

데이터의 지속성을 구분할수있기에 응용환경에 맞는 선택이 가능합니다

 

쿠키와의 차이점

1. 쿠키는 매번 서버로 전송됩니다

웹사이트에서 쿠키를 설정하면 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송이되게 됩니다 반면 웹스토리지는 저장된 데이터가 클라이언트에 존재할뿐 서버로 전송은 이루어지지 않기 때문에 네트워크 트래픽 비용이 줄어듭니다

 

2. 단순 문자열을 넘어 객체 정보를 저장할수있습니다

문자열 기반 데이터 외에 체계적으로 구조화된 객체를 저장할수 있기 때문에 웹 스토리지를 사용하여 개발을 진행할경우 쿠키보다 편리하게 개발을 할수있습니다

 

3. 데이터 용량의 제한이 없습니다

쿠키는 개수와 용량에 제한이있습니다. 하나의 사이에서 저장할수 있는 최대 쿠키의 개수는 20개 이며, 최대 쿠키 크기는 4kb로 제한이 되어있습니다. 반면 웹스토리지는 쿠키와 같은 용량 제한없이 데이터를 저장할수있습니다

 

4. 영구적으로 데이터 저장이 가능합니다

쿠키는 만료일자를 지정해야 되기에 언젠간 쿠키가 삭제가 됩니다. 그러나 웹스토리지 같은경우는 만교 기간 설정이 없습니다. 즉 한번 저장한 데이터를 직접적으로 삭제하기 전까지는 영구적으로 존재합니다

 

 

로컬 스토리지 와 세션 스토리지

로컬 스토리지

저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능합니다. 로컬스토리지는 도메인 마다 별도로 로컬스토리지가 생성이 되며, 윈도우 전역 객체의 로컬 스토리지 라는 컬렉션을 통해 저장과 조회가 이루어집니다

 

세션스토리지

세션스토리지는 데이터의 지속성과 엑세스 범위에 특수한 제한이 존재하는 스토리지 입니다

 

데이터 유지 측면에서의 차이

세션 스토리지는 데이터가 영구적으로 보관되지 않습니다. 마치 쿠키와 비슷한 성질을 가지고 있으며. 현재 페이지가 브라우징 되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지됩니다

 

반면 로컬스토리지는 브라우저를 종료해도 데이터가 보관되어있어 다음번 접속에도 저장한 데이터를 사용할수있습니다

(세션 스토리지는 브라우저가 종료가 되면 저장된 데이터가 지워집니다)

 

 

데이터 범위 측면에서의 차이

세션 스토리지도 웹 스토리지에 포함되어있는 스토리지 이기에 로컬스토리지와 같이 도메인별로 별도로 생성이 됩니다

그러나 세션스토리지는 같은 사이트의 같은 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역으로 취급합니다. 이는 브라우저 컨텍스트가 서로 다르기 때문입니다

 

탭 브라우징 이나 브라우저를 하나더 실행해서 같은 페이지를 실행했을때

이 두페이지의 세션스토리지는 각각 별개의 영역으로 서로 침범하지 못합니다. 

이러한 특징은 도메인만 같으면 전역적으로 공유가능한 로컬스토리지 와 구분되는 특징입니다

 

또한 웹스토리지 보안은 서로 다른 도메인의 데이터 침범을 막고있지만

클라이언트, 즉 사용자를 막지는 않습니다. 그렇기에 클라이언트는 얼마든지 저장된 값을 임의로 수정할수있습니다