브라우저 저장소

브라우저 저장소

브라우저 저장소는 클라이언트 웹 브라우저에 저장할 수 있는 기능이다. 쿠키가 첫등장하면서 쿠키를 사용하였지만 쿠키의 단점들이 부각되면서 Web Storage가 도입되어 사용되었다.

쿠키의 단점

• 적은 저장공간과 보안 문제
• 성능저하 문제
• HTTP 특성인 비연결성, 무상태성 때문에 클라이언트의 정보들이 페이지를 이동할때마다 초기화

📢 HTTP의 비연결성, 무상태성

• 비연결성(Connectionless): 클라이언트가 서버에게 Request를 보내고, 서버가 클라이언트에게 Response를 보내면 접속을 종료한다.
• 무상태성(Stateless): 통신이 끝나면 상태 정보를 유지하지 않는다.

그렇다면 쿠키 대신 나온 Web Storage에 대해서 알아보자.

Web Storage

HTML5부터 제공하는 기능으로서 데이터를 클라이언트 웹 브라우저에 저장할 수 있도록 제공하는 기능이다.

특징

• 쿠키에 비해 많은 정보를 저장할 수 있다.
• 단순한 문자열을 넘어 객체 정보를 저장할 수 있다.
• 만료 기간의 설정이 없어 영구적으로 데이터 저장이 가능하다.

종류

LocalStorage
보관 기한이 없는 데이터를 저장할 수 있는 객체
브라우저를 끄거나, 컴퓨터를 재실행해도 데이터가 사라지지 않는다.
도메인마다 별도의 LocalStorage가 생성되고 같은 도메인에서 전역적으로 공유가 가능하며, windows 전역 객체의 LocalStorage라는 컬렉션을 통해서 저장과 조회가 이루어 진다.

Session Storage
세션스토리지는 각 세션마다 데이터가 개별적으로 저장된다. 브라우저에서 여러개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장된다.
Session Storage는 Local Storage와 다르게 세션을 종료하면 데이터가 자동으로 제거되며, 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없다.

IndexedDB

IndexedDB는 비동기적으로 데이터를 저장하고 검색한다. 또한, IndexedDB는 키-값 쌍이 아닌, 객체 형태로 데이터를 저장하며, 저장된 데이터는 색인(index)을 사용하여 검색한다. 이를 통해 대용량의 데이터를 빠르게 검색할 수 있다.

IndexedDB 와 Storage 차이

IndexedDB 많은 데이터를 저장하기 하고, 이를 Index 를 이용하여, 빠르게 검색할 수 있게 설계 되었다.
Storage 인 Local Storage 와 Session Storage 는 최대 10MB 만 저장이 가능하며, 오직 String 형태만 저장이 가능하다.
IndexedDB 는 javascript 가 이해하는 어떠한 값이라도 모두 저장할 수 있다.
IndexedDB 는 용량 제한은 특별히 없으나, HDD 저장소 상태 나 브라우저의 상태에 따라서 달라 질 수 있다.
시크릿 모드에서 IndexedDB, Storage 를 사용하면, 값은 저장되지 않고 브라우저 종료시 사라진다.
작은 규모의 데이터는 Storage 를 사용하는것이 좋지만, 큰 데이터는 IndexedDB 를 사용하는 것이 여러모로 유리하다.