LocalStorage, SessionStorage, IndexedDB 알아보기
💡 web storage
HTML5에서는 웹 데이터를 클라이언트에 저장할 수 있는 기술인 web storage에 대해서 LocalStorage, SessionStorage, IndexedDB 등의 기술들을 제공하고 있다.
(Web SQL Database 기술도 포함되어 있지만 본 글에서는 Web SQL Database를 제외한 나머지 3개의 기술에 대해서만 다뤄보려고 한다.)
web storage는 cookie보다 훨씬 더 많은 데이터를 저장할 수 있으며, 서버에 데이터를 저장하거나 복잡한 데이터베이스를 구축하지 않아도 데이터를 쉽게 관리할 수 있게 해준다.
이러한 이유로, web storage는 웹 애플리케이션 개발에서 매우 유용하게 사용되고 있다.
앞서 언급한 3가지 기술에 대하여 각각의 장점과 단점을 알아보고, 어떤 상황에서 어떠한 기술을 사용하면 좋을지 그 적합한 사용 예시에 대해서도 함께 살펴보고자 한다.
📍 web storage와 cookie 비교하기
그전에, web storage와 비슷하게 데이터를 저장하는 방식인 cookie에 대해서 간단히 알아보려고 한다.
cookie는 web storage 기술에 속하는 방식이 아닌, HTTP 프로토콜을 사용하는 웹 서버에서 클라이언트에게 데이터를 저장하는 방식이다.
웹 사이트에서 cookie를 설정하게 되면 web storage와는 달리, 모든 웹 요청이 쿠키 정보를 포함하여 서버로 전달이 된다. 즉, 서버 전송이 이뤄지지 않는 web storage와 달리 cookie의 경우 서버 전송이 이뤄지기 때문에 web storage보다 네트워크 트래픽 비용을 많이 든다는 단점이 있다.
더불어, cookie는 단순 문자열만 저장이 가능하다. web storage도 문자열 형태로만 데이터 저장이 가능하지만 객체를 저장할 수 있는 메서드를 제공하고 있다. 따라서 web storage가 cookie보다는 더 다양한 형태의 데이터를 저장할 수 있다는 장점이 있다.
마지막으로, cookie의 경우에는 용량 제한이 있어 20개의 쿠키만 저장이 가능하다. 하지만, web storage는 따로 용량 제한이 없어 더 많은 데이터를 저장할 수 있다.
| web storage VS cookie | 서버 전송 | 데이터 저장 형태 | 용량 제한 |
|---|---|---|---|
| cookie | 서버 전송 X | 문자열만 저장 가능 | 제한 O |
| web storage | 서버 전송 O | 객체 등의 다양한 형태로 저장 가능 | 제한 X |
1️⃣ LocalStorage VS SessionStorage
사실상, LocalStorage와 SessionStorage는 저장소로서의 기능은 대부분 동일하다.
다만, 차이점이 있다면 "데이터 유지"에 있어서 다른 특징을 가지고 있다.
👉🏻 직접 데이터를 삭제해 줘야 하는 LocalStorage
LocalStorage의 경우에는 데이터 유지에 있어서 시간적 제한도 없고 브라우저를 종료해도 데이터가 그대로 유지된다.
LocalStorage는 용어 그대로 Local에 도메인 별로 지속되는 저장소이기 때문에 직접 데이터를 삭제하지 않는 이상 데이터가 계속해서 유지된다.
👉🏻 세션이 종료되는 데이터가 삭제되는 SessionStorage
반면에 SessionStorage는 세션이 종료되면(브라우저의 탭이 종료되면) 데이터가 저절로 삭제가 된다. 즉, 데이터 유지에 있어서 로컬 전체의 기준이 아닌 브라우저의 탭 단위(세션)가 데이터 유지 기준이 되는 것이다.
(sessionStorage의 세션은 가장 작은 단위인 탭 단위를 의미한다. 브라우저의 탭마다 sessionStorage이 따로 배정이 되기 때문에 같은 도메인이라고 할지라도 탭마다 서로의 영역을 공유하지 않는다. 따라서 독립된 탭은 서로의 값을 침범할 수도 없게 되는 것이다.)
👉🏻 데이터를 언제까지 유지할 것인가?
데이터 저장소로서 둘의 기능은 동일하지만 데이터가 언제까지 유지되느냐에 따라서 각각 다르게 사용이 된다.
만약, 브라우저를 종료를 해도 데이터가 그대로 유지되어야 한다면 LocalStorage를 사용해서 데이터를 저장해야 하고 반대로, 탭을 종료하면 데이터가 그대로 소멸하게 하고 싶다면 SessionStorage를 사용해야 한다.
앞서 언급한 이 둘의 장/단점은 사실상 장점과 단점으로 바라보기보다는 각가의 특징으로 이해하는 것이 좋다.
데이터가 오래 유지된다고 해서 좋은 것이 아니라, 탭을 종료할 때마다 데이터를 삭제해 줘야 하는 서비스가 있는 반면에 브라우저가 종료되어도 데이터가 그대로 유지되어야 하는 서비스가 있을 수 있기 때문에 서비스의 특성에 따라서 적절한 저장소를 사용하는 것이 바람직하다.
2️⃣ web storage VS IndexedDB
web storage와 함께 알아볼 개념이 하나 더 있는데 바로 IndexedDB다.
IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API다.
👉🏻 MDN - IndexedDB
즉, IndexedDB 역시 web storage와 같이 데이터를 저장하는 저장소 중 하나다.
다만, web storage와 비교되는 큰 차이점은 "데이터 저장 용량"이다.
web storage 중 LocalStorage의 경우, 위에서 용량의 제한이 없다고 설명했지만 사실상 용량 제한은 브라우저마다 다르기 때문에 무제한으로 저장할 수 있는 건 아니다.
다만, 우리가 LocalStorage의 용량 제한에 큰 불편함을 느끼지 않았기 때문에 대부분의 경우에는 LocalStorage를 사용해서 원하는 데이터를 모두 저장할 수 있다.
하지만, 그 이상의 데이터를 저장해야 할 때가 있는데 이때 LocalStorage 보다 더 많은 대용량의 데이터를 저장할 수 있는 ndexedDB를 사용하면 된다.
IndexedDB는 LocalStorage보다 더 많은 데이터를 저장하고 검색할 수 있도록 데이터 색인을 생성하기 때문에 대규모 데이터 처리에 매우 유용하다.
더불어 IndexedDB는 데이터베이스의 형식으로 데이터를 저장하기 때문에 web storage에서는 저장할 수 없는 복잡한 데이터 구조를 지원하기도 한다.
IndexedDB는 보다 많은 대용량의 데이터 처리가 가능하기 때문에 많은 양의 데이터를 처리해야 할 경우에는 IndexedDB를 사용하는 것이 좋고, 그렇지 않은 경우에는 간단한 데이터 처리라면 web storage를 사용하는 것이 좋다.
✅ 참고 사이트
https://velog.io/@ejchaid/localstorage-sessionstorage-cookie%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-localStorage-sessionStorage
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%BF%A0%ED%82%A4Cookie-%EB%8B%A4%EB%A3%A8%EA%B8%B0
