브라우저 저장소 정리(feat.localStorage, sessionStorage, IndexedDB)

localStorage, sessionStorage 및 IndexedDB는 최신 웹 브라우저에서 사용할 수 있는 세 가지 웹 저장소 기술이다. 사용자의 브라우저에 로컬로 데이터를 저장한다는 동일한 목표를 공유하지만 용도, 용량 및 성능이 다르다. 재밌어보이니 각각의 스토리지 기술의 차이점과 장점/단점에 대해 정리했다.

 

✅ localStorage

localStorage는 브라우저에 키-값 쌍을 저장할 수 있는 간단하고 가벼운 스토리지 기술이다. 최대 10MB의 데이터를 저장할 수 있으며 사용자가 브라우저를 닫은 후에도 데이터를 계속 사용할 수 있다. localStorage에 저장된 데이터는 도메인에 따라 다르다. 즉, 한 도메인에 저장된 데이터는 다른 도메인에서 접근 할 수 없다는 걸 말하며, 다른 사용자의 컴퓨터와 결과가 다를 수 있다는 말과 같다. setItem이나 getItem과 같은 데이터 읽기 및 쓰기를 위한 동기식 API를 제공하여 사용하기도 쉽다.

 

장점

• 간단하고 사용하기 쉽다.
• 최대 10MB의 대용량 데이터를 저장할 수 있다.
• 사용자가 브라우저를 닫은 후에도 데이터는 계속 사용할 수 있다.

단점

• 특정 도메인으로 제한된다.
• 동기식 API는 대용량 데이터를 처리할 경우 성능 문제를 일으킬 수 있다.
• 배열 및 객체와 같은 복잡한 데이터 유형을 지원하지 않는다.

 

✅ sessionStorage

sessionStorage는 localStorage와 유사하지만 브라우저 세션 기간 동안만 데이터를 저장한다. 사용자가 브라우저를 닫으면 데이터가 손실된다. 또한 10MB의 동일한 용량 제한이 있으며 도메인에 따라 다르다.

장점

• 데이터는 브라우저 세션 동안에만 사용할 수 있으므로 향상된 보안을 제공한다.
• 최대 10MB의 대용량 데이터를 저장할 수 있다.

단점

• 특정 도메인으로 제한된다.
• 사용자가 브라우저를 닫으면 데이터가 없어진다.

 

✅ IndexedDB

IndexedDB는 구조화된 데이터를 저장하기 위한 흔히들 알고 있는 데이터베이스와 유사한 인터페이스를 제공하는 고급 스토리지 기술이다. 각 사용자마다의 용량의 퍼센트로 최대 수 기가바이트에 이르는 많은 양의 데이터를 저장할 수 있으며, 배열 및 객체와 같은 복잡한 데이터 유형을 처리할 수 있다. 또한 비동기식 API를 제공한다. 즉, 다음 코드 줄을 실행하기 전에 코드가 데이터가 기록될 때까지 기다릴 필요가 없다.

 

장점

• 최대 수 기가바이트에 이르는 많은 양의 구조화된 데이터를 저장할 수 있다.
• 배열 및 객체와 같은 복잡한 데이터 유형을 처리할 수 있다.
• 비동기식 API는 대용량 데이터를 처리하는데 더 나은 성능을 제공한다.
• 도메인 전체에서 사용할 수 있으므로 웹 응용 프로그램에서 더 많은 유연성을 제공한다.

단점

• localStorage 및 sessionStorage에 비해 더 복잡하고 사용하기 어렵다.
• 비동기 API는 일부 개발자가 작업하기가 더 어려울 수 있다.
• 비교적 최근 웹 브라우저에서만 지원한다.

 

✨요약

localStorage, sessionStorage 및 IndexedDB는 모두 장단점이 있다. localStorage 및 sessionStorage는 간단하고 사용하기 쉽지만 용량이 제한되어 있고 도메인에 따라 다르며, IndexedDB는 구조화된 데이터를 저장하기 위한 실제 데이터베이스 같이 강력한 기능을 제공하지만 사용하기가 더 복잡하고 이전 웹 브라우저에서는 지원되지 않는다. 스토리지를 선택할 때는 요구 사항에 따라 다르게 대응 해야 할 것이며, 각각의 장단점을 잘 따져 고민해 선택 해야 한다.