localStorage는 indexedDB와 어떻게 다릅니 까?

localStorage 및 indexedDB는 HTML5의 데이터를 오프라인으로 저장하는 데 사용됩니다. 주요 차이점은 무엇이며 어떤 상황에서 선호되는 것이 무엇입니까?

표면상에서 두 기술은 직접 비교할 수있을 것 같지만 시간을 보내면 곧 그렇지 않다는 것을 알게 될 것입니다. 이들은 유사한 목표 인 클라이언트 측 스토리지를 달성하도록 설계되었지만 상당히 다른 관점에서 현재 작업에 접근하고 다른 양의 데이터로 가장 잘 작동합니다.

localStorage 또는보다 정확하게 Web Storage 는 적은 양의 데이터를 위해 설계되었습니다. 본질적으로 단순한 동기식 API를 갖춘 문자열 전용 키-값 스토리지 입니다. 마지막 부분이 핵심입니다. 스펙에 비동기 DOM 스토리지를 금지하는 것은 없지만 현재 모든 구현은 동기식입니다 (즉, 요청 차단). 더 많은 양의 데이터에 순진한 키-값 저장 장치를 사용하는 것이 마음에 들지 않더라도 클라이언트는 응용 프로그램이로드 될 때까지 기다릴 것입니다.

반면 indexedDB 는 훨씬 더 많은 양의 데이터를 처리하도록 설계되었습니다. 첫째, 이론 상으로는 동기식 API와 비동기식 API를 모두 제공합니다. 그러나 실제로 모든 현재 구현은 비동기 적이며 요청은 사용자 인터페이스의로드를 차단하지 않습니다. 또한 indexedDB는 이름에서 알 수 있듯이 indexes를 제공 합니다 . 데이터베이스에서 기초 쿼리를 실행하고 특정 키 범위 에서 해당 키를 조회하여 레코드를 가져올 수 있습니다 . indexedDB는 또한 transaction 을 지원 하고 간단한 유형 (예 : Date)을 제공합니다.

이 시점에서 indexedDB는 모든 상황에서 탁월한 솔루션으로 보일 수 있습니다. 그러나 모든 기능에 대해 패널티가 있습니다. DOM 스토리지에 비해 API는 매우 복잡합니다. indexedDB는 데이터베이스 개념에 대해 잘 알고 있지만 Web Storage를 사용하면 바로 시작할 수 있습니다. 쿠키를 사용한 적이 있다면 Web Storage를 사용하는 데 아무런 문제가 없습니다. 또한 일반적으로 웹 저장소에서와 동일한 결과를 얻으려면 indexedDB에 더 많은 코드를 작성해야합니다 (더 많은 코드 = 더 많은 버그). 또한 웹 스토리지를 지원하지 않는 브라우저에서 웹 스토리지를 에뮬레이트하는 것은 비교적 간단합니다. indexedDB를 사용하면 시간이 가치가 없습니다. 마지막으로 indexedDB에 들어가기 전에 먼저 Quota API를 살펴보십시오 .

하루가 끝나면 응용 프로그램에서 Web Storage 또는 indexedDB 또는 둘 다를 사용하는 경우 전적으로 귀하에게 달려 있습니다. Web Storage의 좋은 사용 사례는 간단한 세션 데이터 (예 : 사용자 이름)를 저장하고 일부 요청을 실제 데이터베이스에 저장하는 것입니다. 반면 indexedDB의 추가 기능을 사용하면 응용 프로그램이 오프라인에서 작동하는 데 필요한 모든 데이터를 저장할 수 있습니다.

@ yannis 답변이 우수합니다. 몇 가지만 추가하고 싶습니다.

1. 서비스 워커와 같은 일부 상황에서는 차단 코드를 사용할 수 없으므로 localStorage를 사용할 수 없으며 indexedDB와 같은 것을 사용해야합니다.

2. indexedDB의 API는 복잡하고 지루합니다 (YMMV라는 "끔찍한"말입니다). API를 단순화하기 위해 몇 가지 "래퍼"도서관이있다, 나는 강하게 당신이 그 보는 것이 좋습니다.

나를 위해, 나는 localStorage에 문자열 만 저장할 수있는 동안 Blob 을 IndexedDB에 저장할 수 있음을 발견했습니다 . IndexdDB는 이미지, 오디오, 비디오와 같은 이진 데이터에 더 좋습니다. 예. base64의 이미지를 localStorage에 저장할 수 있지만 디코딩 할 필요가 없기 때문에 얼룩이 더 작고 빨라집니다.

MDN 에서 인용 :

The keys and the values are always strings.

IndexedDB 정보 :

Any objects supported by the structured clone algorithm can be stored:  
All primitive types However not symbols
Boolean object   
String object    
Date     
RegExp  The lastIndex field is not preserved.
Blob     
File     
FileList     
ArrayBuffer  
ArrayBufferView This basically means all typed arrays like Int32Array etc.
ImageData    
Array    
Object  This just includes plain objects (e.g. from object literals)
Map  
Set