공통점은 모두 웹 스토리지(Web Storage) 기술입니다.
웹 브라우저 내부에 데이터를 저장하는 데 사용됩니다.
localStorage
웹 브라우저의 Local Storage에 데이터를 저장하는 데 사용되는 JavaScript 객체입니다.
이를 사용하여 브라우저 내부에 데이터를 저장하고, 나중에 사용자가 방문할 때 데이터를 불러올 수 있습니다.
key-value 쌍으로 데이터를 저장하며 데이터는 문자열 형태로 저장됩니다.
저장 가능한 용량은 브라우저마다 다르며, 일반적으로는 5~10MB로 제한되어 있습니다.
또한 localStorage에 저장된 데이터는 브라우저를 닫아도 유지되며 동일한 도메인에서만 접근이 가능합니다. 즉, 도메인이 다르면 다른 localStorage를 사용합니다.
localStorage는 쿠키와 다르게 HTTP 요청 시 서버로 전송되지 않습니다.
SessionStorage
localStorage와 마찬가지로 웹 브라우저의 Session Storage에 데이터를 저장하는 데 사용되는 JavaScript 객체입니다.
locaStorage와 비슷한 방식으로 동작하지만 sessionStorage는 브라우저의 탭이나 창이 열려있는 동안에만 유지됩니다.
즉, 브라우저나 탭을 닫으면 sessionStorage에 저장된 데이터는 모두 삭제됩니다.
IndexedDB
IndexedDB는 웹 브라우저 내부에 데이터베이스를 생성하고, 데이터를 저장하고 검색하는 데 사용되는 API입니다.
IndexedDB는 대용량 데이터를 저장하고 검색하는 데에 유용합니다.
localStorage와 sessionStorage와 달리 비동기적으로 데이터를 저장하고 검색합니다. 따라서 DB 내부 명령 처리에 대한 지연이 없습니다.
IndexedDB는 key-value 형태가 아닌 객체 형태로 데이터를 저장하며 저장된 데이터는 index를 사용하여 검색합니다.
IndexedDB에서 생성된 데이터베이스는 브라우저의 로컬 파일 시스템에 저장된다. 따라서, 브라우저를 종료해도 데이터베이스는 유지됩니다.
localStorage, sessionStorage와 마찬가지로 동일한 도메인일 경우에만 접근이 가능합니다.
IndexedDB는 브라우저에 의해 관리되지 않기 때문에 개발자가 직접 데이터를 저장하고 검색하도록 컨트롤 할 수 있습니다.
