요즘 브라우저들은 사용자의 브라우저에 웹사이트 데이터를 저장하는 다양한 옵션을 제공합니다. 이를 통해 웹사이트 소유자는 장기적으로 저장하기 위해 데이터를 유지하고, 오프라인 사용을 위해 웹사이트 콘텐츠나 문서를 저장하고, 사용자 기본 설정을 저장하고, 상태를 적용하는 등의 작업을 수행할 수 있습니다.
사용자의 브라우저에 웹 사이트 데이터를 저장하는데 사용할 수 있는 다양한 유형의 브라우저 스토리지에 대해 알아보도록 하겠습니다.
localStorage
- 값을 문자열로 저장하는 key-value 스토리지
- 설정이나 자바스크립트로 브라우저를 명시적으로 지우지만 않으면 영구 저장 됩니다.
- 최대 10MB 데이터 저장 가능합니다.
- 포트와 호스트가 동일함을 의미하는 프로토콜(http/https) 동일 출처 정책을 따릅니다.
장점
간편한 사용: 간단한 key-value 형식으로 데이터를 저장하고 검색할 수 있습니다.데이터의 영구보존: 브라우저를 닫아도 데이터가 유지됩니다.도메인 공유: localStorage는 동일한 도메인 내에서 여러페이지나 탭 간에 데이터를 공유할 수 있습니다. 이는 한번 저장된 데이터를 여러 컴포넌트나 페이지에서 활용할 수 있는 장점을 제공합니다.동기작업: 동기적으로 수행됨으로써, 데이터에 대한 신뢰성과 안정성을 제공하며, 비동기 처리로 인한 복잡성을 줄여줍니다.
단점
보안 위험: 클라이언트 측에 데이터를 저장하므로 보안에 주의해야합니다. 따라서 중요한 정보나 민감한 데이터를 저장할 때에는 암호화를 고려해야합니다.데이터 관리: localStorage는 JavaScript를 사용하여 데이터를 직접 관리해야 합니다. 데이터를 추가, 수정, 삭제하는 등의 작업을 수동으로 처리해야 하며, 복잡한 데이터 관리 기능은 제공되지 않습니다.
사용사례
사용자 관련 데이터를 저장하는 데 사용할 수 있습니다.
localStorage.setItem(“key”, “value”)
localStorage.getItem(“key”)
localStorage.removeItem(“key”)sessionStorage
하나의 세션에 대한 데이터만 저장한다는 점을 제외하면 localStorage 개체와 동일합니다.
- 값을 문자열로 저장하는 key-value 스토리지
- 저장된 데이터는 탭이나 윈도우창이 닫힌 후에는 유지되지 않습니다.
- 최대 10MB 데이터 저장 가능합니다.
- 동일 출처 정책을 따르고 탭에 바인딩됨
장점
데이터 보안: sessionStorage도 localStorage와 마찬가지로 클라이언트 측에서 데이터를 저장하지만, 데이터가 서버로 전송되지 않기 때문에 보안에 민감한 데이터를 임시로 저장하기에 적합합니다.사용자 세션 동안 데이터 보존: sessionStorage에 저장된 데이터는 사용자의 세션 동안에만 유효합니다. 같은 웹 사이트 내에서 페이지를 이동하거나 새로고침해도 데이터는 계속해서 사용할 수 있습니다.
단점
용량 제한: sessionStorage의 용량도 브라우저마다 다르지만, 일반적으로 5MB 이하입니다. 큰 데이터나 많은 양의 데이터를 저장해야 하는 경우에는 다른 스토리지 옵션을 고려해야 할 수 있습니다.도메인 및 탭 제한: sessionStorage는 도메인 및 탭에 한정되어 있습니다. 다른 도메인의 페이지나 다른 브라우저 탭에서는 sessionStorage에 저장된 데이터에 접근할 수 없습니다.
사용사례
언어를 선택하는 것과 같이 한 세션에 대해서만 사용자 관련 데이터 저장합니다.
sessionStorage.setItem(“key”, “value”)
sessionStorage.getItem(“key”)
sessionStorage.removeItem(“key”)IndexedDB Storage
- IndexedDB는 JavaScript 기반의 객체 지향 데이터베이스입니다.
- objects, key-value를 모두 저장가능합니다.
- 사용자의 브라우저 내부에 많은 양의 데이터를 지속적으로 저장할 수 있는 방법입니다.
- 로컬스토리지, 세션스토리지와 달리 비동기식입니다.
- IndexedDB 작업은 onsuccess, onerror, oncomplete 등과 같이 다양한 이벤트에 의해 이벤트 구동됩니다.
- 지속적인 인터넷 연결이 필요하지 않은 애플리케이션에 유용합니다.
- 동일 출처 정책을 따릅니다.
- 명시적으로 삭제하지 않는 영구저장 됩니다.
장점
-
용량: IndexedDB는 일반적으로 브라우저마다 몇 십 메가바이트 이상의 용량을 가지고 있어 큰 양의 데이터를 저장할 수 있습니다. 기기의 저장 용량에 제한되지 않기 때문에 대용량 데이터 관리에 적합합니다. -
구조화된 데이터: IndexedDB는 데이터를 테이블 형식이 아닌 객체 저장소(object store)로 저장합니다. 이는 복잡한 데이터 구조를 사용하고 데이터 간의 관계를 유지할 수 있음을 의미합니다. 데이터베이스 스키마를 정의하고 쿼리를 실행하여 데이터를 효율적으로 저장하고 검색할 수 있습니다. -
인덱싱과 검색: IndexedDB는 데이터를 인덱싱하여 빠른 검색을 지원합니다. 특정 속성에 대한 인덱스를 생성하고 쿼리를 수행하여 데이터를 검색할 수 있습니다. 이는 대량의 데이터에서 원하는 정보를 효율적으로 찾는 데 도움이 됩니다. -
오프라인 지원: IndexedDB는 웹 애플리케이션을 오프라인 환경에서 동작시킬 수 있는 기능을 제공합니다. 데이터를 로컬에 저장하여 네트워크 연결이 없어도 애플리케이션을 사용할 수 있게 합니다.
단점
-
복잡성: IndexedDB는 다른 웹 스토리지 기술에 비해 학습 곡선이 높습니다. 데이터베이스 스키마를 정의하고 인덱스를 관리하는 등의 작업에 익숙해지는 데 시간이 걸릴 수 있습니다. -
비동기적인 API: IndexedDB는 비동기 API를 사용하여 데이터를 조작합니다. 이는 개발자가 콜백 또는 프라미스를 사용하여 데이터 조작 작업을 처리해야 함을 의미합니다. 비동기 처리에 익숙하지 않은 개발자에게는 어려울 수 있습니다. -
크로스 브라우저 호환성: IndexedDB는 모든 브라우저에서 완벽하게 지원되지 않을 수 있습니다. 특히 오래된 브라우저 버전에서는 호환성 문제가 발생할 수 있습니다.
마무리
로컬 저장소와 세션 저장소의 주요 차이점은 세션 저장소는 한 세션 내에서만 유지되고 탭이나 창이 닫히면 만료되지만 로컬 저장소는 명시적으로 삭제할 때까지 웹 브라우저에서 여러 세션을 유지할 수 있다는 것입니다.
쿠키의 경우 모든 요청에 대해 서버로 전송되지만 로컬 저장소 및 세션 저장소의 경우 서버로 전송되지 않고 클라이언트 측에서만 사용됩니다.
공통적으로는 모두 동일 출처 정책(웹 페이지가 자신의 출처와 동일한 출처에서 온 리소스와만 상호작용할 수 있도록 제한하는 보안방식)을 따릅니다.
참고자료
- The Different Types of Browser Storage
https://betterprogramming.pub/the-different-types-of-browser-storage-82b918cb3cf8- Browser storage: Local Storage, Session Storage, Cookie, IndexedDB and WebSQL
https://medium.com/@lancelyao/browser-storage-local-storage-session-storage-cookie-indexeddb-and-websql-be6721ebe32a- ChatGPT : 브라우저 각 저장소의 장단점
