브라우저 저장소

Reina·2024년 1월 11일

JavaScript browser indexedDB localstorage sessionStorage storage 프론트앤드

브라우저에는 웹 사이트의 상태나 데이터 등을 저장하기 위한 저장소가 존재한다. 이를 활용해 웹 사이트는 소유자의 데이터를 장기적으로 저장하기 위해 유지하고, 오프라인 사용을 위해 콘텐츠나 문서를 저장하고, 사용자 기본 설정을 저장하고, 상태를 적용하는 등의 작업을 수행할 수 있다.

브라우저에 웹 사이트 데이터를 저장하는 저장소는 localStorage, sessionStorage, IndexedDB 로 세 가지가 있다. 이들은 사용자의 브라우저에 로컬 데이터를 저장한다는 점은 동일하지만 용도 및 용량, 성능이 다르다.

오늘은 이들의 차이점과 장단점에 대해 알아보자.

`localStorage`

localStorage 는 최대 5~10MB까지 저장할 수 있으며, 저장된 데이터의 경우 삭제하지 않는 이상 만료되지 않고 영구적으로 유지된다. 이로 인해 자동 로그인이나 다크 모드 등에 주로 사용한다.

페이지의 프로토콜별로 구분하여 저장되므로 https://naver.com 와 http://naver.com 의 localStroage 는 서로 공유가 되지 않는다.

key-value 쌍을 저장할 수 있으며, key와 value의 경우 문자열 을 사용해야 한다. 만약 다른 값(배열, 객체 등)을 사용하고 싶다면, JSON.stringify(); 메서드를 사용해 문자열로 변환 후 사용하면 된다.

localStorage.setItem(“name”, “reina”);
localStorage.getItem(“name”);     // "reina"
localStorage.removeItem(“name”);  // null

/* 객체 저장 시 */
localStorage.setItem("name", JSON.stringfy({ 1 : "reina" }));
JSON.parse(localStorage.getItem("name"));   // { 1 : "reina" }

장점

간편한 사용: 간단한 key-value 형식으로 데이터를 저장하고 검색할 수 있다.

데이터의 영구성: 데이터가 영구적으로 보존되므로 사용자가 웹 사이트를 다시 방문할 때 이전에 저장한 데이터를 사용할 수 있다.

동기 작업: setItem 이나 getItem 과 같은 데이터 읽기 및 쓰기를 위한 동기식 API를 수행하므로, 데이터에 대한 신뢰성과 안정성을 제공하며 비동기 처리로 인한 복잡성이 줄어든다.

단점

보안 위험: 클라이언트 측에 데이터를 저장하므로 보안에 주의해야 한다. 따라서 중요한 정보나 민감한 데이터를 저장하기엔 적합하지 않고, 꼭 해야 한다면 암호화를 고려해야 한다.

불편한 데이터 관리: localStorage 는 JavaScript를 사용하여 데이터를 직접 관리해야 한다. 데이터의 추가, 수정, 삭제 등을 수동으로 처리해야 하며, 복잡한 데이터 관리 기능은 제공되지 않는다.

제한된 도메인: 저장된 데이터는 도메인에 따라 다르므로 한 도메인에 저장된 데이터는 다른 도메인에서 접근할 수 없다. 이로 인해 다른 사용자의 컴퓨터와 결과가 다를 수 있다.

`sessionStorage`

sessionStorage 와 localStorage 의 가장 큰 차이점은 데이터의 영구성이다. sessionStorage 는 브라우저 세션이 종료될 때 저장된 데이터가 삭제되므로 데이터의 만료 기간이 존재한다. (새로고침은 해당 안 됨) 비로그인 장바구니, 글쓰기 내용 복구, 입력 폼 정보 저장, 사이트 언어 선택 등에 사용된다.

sessionStorage.setItem(“name”, “reina”);
sessionStorage.getItem(“name”);     // "reina"
sessionStorage.removeItem(“name”);  // null

sessionStorage 의 장단점은 localStorage 과 모두 동일하지만 데이터의 보안과 영구성에 대해 반대의 장단점을 가진다.

장점

데이터 보안: 데이터가 서버로 전송되지 않아 민감한 데이터를 임시로 저장하기에 적합하다. 하지만 클라이언트 측에 데이터를 저장하므로 이에 대한 위험은 여전히 존재한다.

단점

데이터의 일시성: 세션이 종료되면 데이터가 삭제되므로, 영구적인 저장이 필요한 데이터에는 적합하지 않다.

`indexedDB`

비교적 최근에 추가된 기술로 브라우저에 데이터를 영구적으로 저장할 수 있는 방법이다. 이는 구조화된 데이터를 저장하기 위한 객체 지향 데이터베이스로, 대량의 데이터를 처리하기에 적합하다는 특징을 가진다.

object, key-value 모두 저장 가능하며, IndexedDB 작업은 onsuccess, onerror, oncomplete 등과 같이 다양한 이벤트에 의해 이벤트 구동된다.

장점

큰 용량 : 큰 용량(최대 nGB)으로 인해 많은 양의 데이터를 저장할 수 있어 대용량 데이터 관리에 적합하다.

구조화된 데이터 : 데이터를 테이블 형식이 아닌 객체 저장소로 저장한다. 이로 인해 복잡한 데이터 유형(배열, 객체 등)을 처리할 수 있다.. 또한, 데이터베이스 스키마를 정의하고 쿼리를 실행하여 데이터를 효율적으로 저장하고 검색할 수 있다.

오프라인 지원 : 웹을 오프라인 환경에서 동작시킬 수 있는 기능을 제공한다. 이로 인해 데이터를 로컬에 저장해 오프라인 환경에서도 동작하며 지속적인 인터넷 연결이 필요하지 않은 애플리케이션에 유용하다.

비동기 작업: 비동기식 API를 통해 대용량 데이터를 처리하는데 더 나은 성능을 제공하고, 응답 시간 또한 빠르다.

단점

복잡성 : 다른 웹 스토리지 기술에 비해 사용법이 복잡하다. 데이터베이스 스키마를 정의하고 인덱스를 관리하는 등의 작업에 익숙해지는 데 시간이 걸릴 수 있다.

제한적인 호환성 : 모든 브라우저에서 완벽하게 지원되지 않을 수 있다. 비교적 최근 웹 브라우저에서만 지원하는 기능으로, 오래된 브라우저 버전에서는 호환성 문제가 발생할 수 있다.

localStorage, sessionStorage 및 IndexedDB 는 모두 장단점이 있다.

localStorage, sessionStorage는 사용이 간단하고 쉽지만, 용량이 제한되어 있고 도메인에 따라 다르다.
IndexedDB는 구조화된 데이터를 저장하기 위한 강력한 기능을 제공하지만, 사용하기가 복잡하고 모든 브라우저에서 완벽히 지원되지 않는다.

이러한 점들을 참고해 스토리지를 선택할 때는 각각의 장단점을 잘 따져 현재 상황에 알맞은 스토리지를 선택해야 할 것이다.