localStorage, sessionStorage, indexDB 등과 같은 것들은 모두 웹 스토리지(Web Storage) 기술이라고 불립니다. 웹 스토리지는 웹 브라우저 내부에 데이터를 저장하는 데 사용되는 기술로, 클라이언트 측 웹 애플리케이션에서 데이터를 유지하고 활용하는 데에 유용합니다.
localStorage
localStorage 란❓
📌
localStorage는 웹 브라우저의 로컬 스토리지(Local Storage)에 데이터를 저장하는 데 사용되는 JavaScript 객체입니다. 이를 사용하여 브라우저 내부에 데이터를 저장하고, 나중에 사용자가 방문할 때 데이터를 불러올 수 있습니다.
localStorage는 키(key)-값(value) 쌍으로 데이터를 저장하며, 데이터는 문자열 형태로 저장됩니다. 저장 가능한 용량은 브라우저마다 다르며, 일반적으로 몇 메가바이트 이하입니다.
localStorage 특징 💡
localStorage에 저장된 데이터는 브라우저를 닫아도 유지됩니다.localStorage에 저장된 데이터는 동일한 도메인에서만 접근할 수 있습니다. 즉, 도메인이 다르면 다른 `localStorage를 사용합니다.localStorage는 브라우저에 의해 관리되기 때문에, 일반적으로 안전한 스토리지 공간으로 간주됩니다. 그러나 보안상의 이유로 민감한 정보를 저장하는 것은 권장되지 않습니다.
localStorage는 웹 어플리케이션에서 사용자의 상태를 유지하거나, 사용자가 이전에 입력한 데이터를 저장하는 데에 자주 사용됩니다. 또한, localStorage는 쿠키와는 다르게 HTTP 요청 시 서버로 전송되지 않기 때문에, 데이터를 보안적으로 보호할 필요가 있는 경우에도 사용됩니다.
sessionStorage
sessionStorage 란❓
📌
SessionStorage는 웹 브라우저의 세션 스토리지(Session Storage)에 데이터를 저장하는 데 사용되는 JavaScript 객체입니다.localStorage와 마찬가지로,sessionStorage를 사용하여 브라우저 내부에 데이터를 저장하고, 나중에 사용자가 방문할 때 데이터를 불러올 수 있습니다.
sessionStorage는 localStorage와 비슷한 방식으로 동작하지만, 몇 가지 차이점이 있습니다. sessionStorage는 브라우저의 탭이나 창이 열려있는 동안에만 유지됩니다. 즉, 사용자가 웹 사이트를 방문하는 동안에는 sessionStorage에 저장된 데이터가 유지되지만, 브라우저를 닫거나 탭을 닫으면 sessionStorage에 저장된 데이터는 모두 삭제됩니다.
sessionStorage 특징 💡
sessionStoage에 저장된 데이터는 브라우저 탭이나 창이 닫히기 전까지 유지됩니다.sessionStoage에 저장된 데이터는 동일한 도메인에서만 접근할 수 있습니다.sessionStoage는localStorage와 마찬가지로, 브라우저에 의해 관리되기 때문에, 일반적으로 안전한 스토리지 공간으로 간주됩니다.
sessionStoage는 localStorage와 마찬가지로, 웹 어플리케이션에서 사용자의 상태를 유지하거나, 사용자가 이전에 입력한 데이터를 저장하는 데에 자주 사용됩니다. localStorage와 달리, 사용자의 세션이 끝나면 sessionStoage에 저장된 데이터가 자동으로 삭제되기 때문에, 보안적인 이슈를 고려하지 않아도 됩니다.
IndexedDB
IndexedDB 란❓
📌
IndexedDB는 웹 브라우저 내부에 데이터베이스를 생성하고, 데이터를 저장하고 검색하는 데 사용되는 API(Application Programming Interface)입니다.IndexedDB는 클라이언트 측 웹 애플리케이션에서 대용량 데이터를 저장하고 검색하는 데에 유용합니다.
IndexedDB는 localStorage와 sessionStorage와 달리, 비동기적으로 데이터를 저장하고 검색합니다. 또한, IndexedDB는 키-값 쌍이 아닌, 객체 형태로 데이터를 저장하며, 저장된 데이터는 색인(index)을 사용하여 검색합니다. 이를 통해 대용량의 데이터를 빠르게 검색할 수 있습니다.
IndexedDB 특징 💡
IndexedDB를 사용하여 생성된 데이터베이스는 브라우저의 로컬 파일 시스템에 저장됩니다. 따라서, 브라우저를 종료해도 데이터베이스는 유지됩니다.IndexedDB를 사용하여 생성된 데이터베이스는 동일한 도메인에서만 접근할 수 있습니다.IndexedDB는 브라우저에 의해 관리되지 않기 때문에, 개발자가 직접 데이터를 저장하고 검색하는데에 대한 제어를 가지게 됩니다.
IndexedDB는 대용량 데이터를 저장하고 검색하는 데에 효과적인 기술입니다. 하지만, IndexedDB는 localStorage와 sessionStorage와 달리 비교적 복잡한 API를 가지고 있기 때문에, 초기 학습 비용이 높을 수 있습니다. 또한, IndexedDB를 사용하려면 적절한 브라우저 지원이 필요합니다.
각각의 차이점 ❓
🔹 데이터 보관 기간
localStorage: 데이터는 브라우저를 닫아도 유지됩니다.sessionStorage: 데이터는 브라우저 세션이 유지되는 동안에만 유지됩니다. 브라우저 창을 닫으면 데이터가 삭제됩니다.IndexedDB: 데이터는 영구적으로 저장됩니다. 즉, 브라우저를 닫거나 재시작해도 데이터는 보존됩니다.
🔹 데이터 저장 위치
localStorage와sessionStorage: 둘 다 브라우저 내부에 저장됩니다.IndexedDB: 브라우저 외부의 별도의 데이터베이스에 저장됩니다.
🔹 데이터 저장 방식
localStorage와sessionStorage: 데이터는 키-값 쌍으로 저장됩니다.IndexedDB: NoSQL 데이터베이스로서, 객체를 저장하고 복잡한 쿼리를 수행할 수 있습니다.
🔹 용량 제한
localStorage와sessionStorage: 저장 가능한 용량은 브라우저마다 다르며, 일반적으로 몇 메가바이트 이하입니다.IndexedDB: 저장 가능한 용량은 더 크며, 일반적으로 몇 십, 몇 백 메가바이트 이상입니다.
따라서,
localStorage와sessionStorage는 작은 양의 데이터를 저장하고, 브라우저에서 상태를 유지하는데 사용할 수 있습니다. 반면에,IndexedDB는 대량의 복잡한 데이터를 저장하고, 데이터를 검색 및 처리하는데 사용할 수 있습니다.
각각이 사용되는 예시
localStorage: 웹 애플리케이션에서 로그인 정보나 사용자 선호도 같은 사용자 데이터를 유지하는데 사용됩니다. 브라우저 종료 후에도 데이터가 유지되며, 동일한 도메인에서 다른 페이지에 접근해도 데이터를 공유할 수 있습니다.sessionStorage: 웹 애플리케이션에서 한 번의 세션(session) 동안에만 데이터를 유지하는 데 사용됩니다. 예를 들어, 사용자가 로그인한 후 해당 세션에서 사용되는 데이터를 유지하고, 로그아웃하거나 브라우저를 종료할 때 데이터를 삭제합니다.IndexedDB: 대용량 데이터를 저장하고 검색하는데 사용됩니다. 예를 들어, 온라인 상점에서 상품 정보, 주문 내역, 고객 정보 등을 저장하고 검색하는 데 사용할 수 있습니다.IndexedDB는 비동기 방식으로 데이터를 처리하므로, 대규모 데이터의 처리에 적합합니다.
