[TIL] 브라우저 저장소

이현동·2023년 5월 12일
0

TIL

목록 보기
50/59
post-custom-banner

브라우저의 저장소

Web Storage란 HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능입니다.

브라우저 저장소의 종류는 Cookie, WebStorage 두가지로 나눠지고,
WebStorage는 LocalStorage와 SessionStorage로 이루어져 있습니다.

Web Storage와 Cookie의 차이

  1. 웹사이트에서 쿠키를 설정하면 이후 모든 요청은 쿠키정보를 포함하여 서버로 전송됩니다. 이는 불필요한 트래픽을 발생시킬 수 있습니다. 반대로 web storage는 데이터가 클라이언트단에 저장만 되어있을 뿐 서버로의 전송은 이루어지지 않습니다.

  2. 단순한 문자열을 넘어서 web storage는 객체 정보를 저장할 수 있습니다. 문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있는 web storage는 개발 편의성적인 측면으로 cookie보다 편리하다고 할 수 있습니다. 각 브라우저별로 지원여부를 확인해야합니다.

  3. web storage는 용량의 제한이 없습니다. cookie의 경우에는 한개의 쿠키당 약 4kb로 제한되어 있고, 총 개수는 300개, 하나의 도메인당 20개로 제한이 되어있습니다. web storage경우에는 이러한 제한이 없습니다.

  4. 쿠키는 만료일자를 설정하지 않으면 세션쿠키, 설정하면 지속적쿠키로 간주됩니다. 세션쿠키의 경우 메모리에 저장이 되어 브라우저나, 탭이 닫히면 삭제됩니다. 반대로 지속적쿠키의 경우 디스크에 저장되어 임의로 삭제하거나, 만료일이 도래하기 전까지는 데이터가 저장됩니다. web storage의 경우에는 만료기간의 설정이 없습니다.

Web Storage

web storage에는 local storage와 session storage 두가지 저장소가 있습니다.

local storage

저장한 데이터를 지우지 않는한 영구적으로 보관이 가능합니다. 도메인별로 Local Storage가 생성되고, Windows 전역객체의 Local Storage 컬렉션을 통하여 저장과 조회가 이루어집니다.

Session Storage

Session Storage의 경우에는 데이터의 지속성과 액세스 범위에 제한이 있습니다. Windows 전역객체의 Session Storage라는 컬렉션을 통하여 저장과 조회가 이루어집니다.

차이점

1. 데이터 유지

Local Storage의 경우 영구적으로 보관이 가능한 반면, Session Storage의 경우에는 세션쿠키와 성질이 비슷합니다. 즉 브라우저가 열려있는 동안에는 페이지를 reload해도 유지가 되며 브라우저가 종료되면 데이터는 삭제됩니다.

2. 데이터 범위

Session Storage의 경우 web storage의 한 종류이기에 도메인 별로 생성되는 것이 당연합니다. 하지만 추가적으로 같은 사이트의 같은 도메인이라 해도 브라우저가 다르면 서로 다른 저장소를 생성합니다. Session Storage는 브라우징되고 있는 브라우저 컨텍스트 내에서 생성되고 유지되기 때문입니다.
즉 탭 브라우징이나 다른 브라우저를 실행하여 같은 도메인으로 접속하였을 때, 이 두 페이지의 Session Storage는 별개의 영역으로 서로 참조하거나 침범할 수 없다는 뜻입니다. 이는 도메인만 같으면 전역적으로 공유가 가능한 Local Storage와 구분되는 큰 특징입니다.


참고자료

EJlog
limuubin.log

profile
https://hdlee.dev
post-custom-banner

0개의 댓글