브라우저 저장소의 종류와 특징 : localStorage, sessionStorage, IndexedDB

브라우저 저장소란?

사용자가 웹 브라우저를 사용할 때 생성되고 저장되는 데이터는 종류에 따라 적합한 저장소에 저장된다. 예를 들면, 사용자 세션관리를 위해 클라이언트와 서버가 주고 받는 쿠키(Cookies)와 자원을 로컬에 저장함으로써 반복적인 요청을 방지하고 웹 자원이 효율적으로 로드될 수 있게 하는 캐시(Cache)라는 저장소가 존재한다.

 

이 밖에도, 웹 애플리케이션 내 로컬 저장 및 관리에 초점을 맞춘 로컬 스토리지(LocalStorage), 세션 스토리지(Session Storage), IndexedDB라는 브라우저 저장소가 존재하며, 각 저장소가 저장하는 데이터 종류와 장단점은 아래와 같다.

브라우저 저장소의 종류와 특징

• 로컬 스토리지 (Local Storage)
  로컬 스토리지는 클라이언트 측에서 데이터를 지속적으로 저장하기 위해 설계된 키-값 저장 메커니즘으로, 브라우저를 닫았다 열어도 데이터가 남아있다. 유효기간 없이 데이터를 저장하고, 자바스크립트를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 삭제해야만 지워진다. 또한 setItem() 및 getItem()과 같은 API를 제공하여 데이터 저장 및 검색도 용이하다는 특징이 있다.
  
  
• 세션 스토리지 (Session Storage)
  세션 스토리지는 로컬 스토리지와 마찬가지로 키-값 쌍을 사용하여 데이터를 쉽게 저장하지만, 저장된 데이터는 브라우저 또는 탭이 닫히면 삭제된다. 보통 한 세션 동안만 데이터를 유지하기 원할 때 유용하다.  
  
  
• IndexedDB
  사용자의 브라우저에 데이터를 영구적으로 저장할 수 있는 방법 중 하나로, 로컬 스토리지나 세션 스토리지에 비해 훨씬 더 큰 양의 데이터를 저장할 수 있다. IndexedDB의 작업은 모두 비동기적으로 수행되기 때문에 웹 애플리케이션의 메인 스레드를 차단하지 않는다. 예를 들면, IndexedDB를 통해 오프라인 상태에서도 사용자 데이터를 저장하고, 온라인 상태가 되면 서버와 동기화되는 저장 방식을 구현할 수 있다.

 

 

https://browsee.io/blog/unleashing-the-power-a-comparative-analysis-of-indexdb-local-storage-and-session-storage/

각 저장소에 대한 활용 예제

• 로컬 스토리지
  • 다크 모드, 언어 설정, 레이아웃 선호도등 사용자 정의 환경 설정을 저장할 수 있다.
  • 브라우저를 닫았다 다시 열어도 재 로그인할 필요없이 세션 유지가 가능하다.
    
    
• 세션 스토리지
  
  • 사용자가 양식을 작성하는 동안 페이지를 실수로 새로고침 하더라도 데이터를 복원 가능하다.
  • 사용자가 각 탭에서 별도의 쇼핑 카트를 관리할 수 있도록 별도의 세션 데이터를 관리한다.
    
    
• IndexedDB
  
  • 클라이언트 측에서 처리하거나 조회할 데이터 세트가 매우 클 경우, IndexedDB에 저장하고 검색할 수 있게 함으로써 서버에 대한 부담을 줄이고 더 빠른 데이터 접근을 가능하게 한다.
  • 오프라인에서도 작동하는 이메일 클라이언트처럼, 오프라인일때는 사용자의 작업 데이터를 저장하고, 인터넷 연결이 복구되면 서버와 동기화한다.

 

함께 알면 좋을 개념들

• 쿠키 (Cookies)
  클라이언트와 서버 간의 상태 정보를 유지하고 추적하기 웨해 사용되는 데이터 조각을 의미한다. 웹사이트는 사용자의 브라우저에 작은 데이터 조각(쿠키)를 저장하고, 이후에 브라우저가 동일한 서버 요청을 보낼 떄 이 쿠키를 서버로 다시 전송한다. 쇼핑 카트, 게임 점수, 로그인등의 세션 관리나 사용자의 언어 설정, 테마등 개인화된 UX도 제공할 수 있다. 단 약 4KB의 제한된 크기로 인해 성능 문제를 일으킬 수 있고, 사용자의 컴퓨터에 저장되기 때문에 공격자에 의해 탈취되거나 별조될 수 있다.
  
  
• 캐시 (Cache)
  웹 사이트를 방문할 때 브라우저에 의해 자동으로 저장되는 자원들의 임시 복사본을 의미한다. 저장되는 자원들은 보통 HTML페이지, 이미지, 스타일시트, 자바스크립트 파일등이 있다. 이러한 캐싱 메커니즘은 사용자가 동일한 웹사이트를 재방문할 경우, 브라우저는 이미 캐시에서 저장되어 있던 자원들을 로드하여 페이지가 빠르게 표시되게 한다. 단, 캐시된 자원이 최신 상태가 아닐 수 있으므로 웹 사이트의 실시간 업데이트가 중요한 경우 문제가 될 수도 있다. 
  
  
  

---

마치며

개인 프로젝트를 수행하면서 로컬 스토리지를 다뤘음에도 다른 브라우저 저장소들과의 차이를 명확하게 알지 못했지만, 이번 블로그 작성을 위해 각 저장소의 특징과 함께 실제 활용 사례들을 접하면서 개념을 정리해 볼 수 있었다. 실제로 은행이나 소셜커머스 사이트를 이용할 때 경험했던 크고 작은 UX들이 브라우저 저장소를 통해 구현된다는 사실도 매우 흥미로웠다. 

 

---

참고 문헌

1. Chanchal Aidasani, Browswer Storage: A comparative Analysis of IndexedDB, Local Storage, and Session Storage : https://browsee.io/blog/unleashing-the-power-a-comparative-analysis-of-indexdb-local-storage-and-session-storage/

2. mdn, Web Storage API : https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API#web_storage_%EA%B0%9C%EB%85%90%EA%B3%BC_%EC%82%AC%EC%9A%A9%EB%B2%95

3. mdn, IndexedDB 사용하기 : https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API/Using_IndexedDB