HTML5에서는 웹 데이터를 클라이언트에 저장할 수 있는 기술인 web storage
에 대해서 LocalStorage
, SessionStorage
, IndexedDB
등의 기술들을 제공하고 있다.
(Web SQL Database 기술도 포함되어 있지만 본 글에서는 Web SQL Database를 제외한 나머지 3개의 기술에 대해서만 다뤄보려고 한다.)
web storage
는 cookie
보다 훨씬 더 많은 데이터를 저장할 수 있으며, 서버에 데이터를 저장하거나 복잡한 데이터베이스를 구축하지 않아도 데이터를 쉽게 관리할 수 있게 해준다.
이러한 이유로, web storage
는 웹 애플리케이션 개발에서 매우 유용하게 사용되고 있다.
앞서 언급한 3가지 기술에 대하여 각각의 장점과 단점을 알아보고, 어떤 상황에서 어떠한 기술을 사용하면 좋을지 그 적합한 사용 예시에 대해서도 함께 살펴보고자 한다.
그전에, 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 |
사실상, LocalStorage
와 SessionStorage
는 저장소로서의 기능은 대부분 동일하다.
다만, 차이점이 있다면 "데이터 유지"에 있어서 다른 특징을 가지고 있다.
LocalStorage
의 경우에는 데이터 유지에 있어서 시간적 제한도 없고 브라우저를 종료해도 데이터가 그대로 유지된다.
LocalStorage
는 용어 그대로 Local에 도메인 별로 지속되는 저장소이기 때문에 직접 데이터를 삭제하지 않는 이상 데이터가 계속해서 유지된다.
반면에 SessionStorage
는 세션이 종료되면(브라우저의 탭이 종료되면) 데이터가 저절로 삭제가 된다. 즉, 데이터 유지에 있어서 로컬 전체의 기준이 아닌 브라우저의 탭 단위(세션)가 데이터 유지 기준이 되는 것이다.
(sessionStorage의 세션은 가장 작은 단위인 탭 단위를 의미한다. 브라우저의 탭마다 sessionStorage이 따로 배정이 되기 때문에 같은 도메인이라고 할지라도 탭마다 서로의 영역을 공유하지 않는다. 따라서 독립된 탭은 서로의 값을 침범할 수도 없게 되는 것이다.)
데이터 저장소로서 둘의 기능은 동일하지만 데이터가 언제까지 유지되느냐에 따라서 각각 다르게 사용이 된다.
만약, 브라우저를 종료를 해도 데이터가 그대로 유지되어야 한다면 LocalStorage
를 사용해서 데이터를 저장해야 하고 반대로, 탭을 종료하면 데이터가 그대로 소멸하게 하고 싶다면 SessionStorage
를 사용해야 한다.
앞서 언급한 이 둘의 장/단점은 사실상 장점과 단점으로 바라보기보다는 각가의 특징으로 이해하는 것이 좋다.
데이터가 오래 유지된다고 해서 좋은 것이 아니라, 탭을 종료할 때마다 데이터를 삭제해 줘야 하는 서비스가 있는 반면에 브라우저가 종료되어도 데이터가 그대로 유지되어야 하는 서비스가 있을 수 있기 때문에 서비스의 특성에 따라서 적절한 저장소를 사용하는 것이 바람직하다.
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