Inwiefern unterscheidet sich localStorage von indexedDB?

localStorage und indexedDB werden für die Offline-Speicherung von Daten in HTML5 verwendet. Was sind ihre Hauptunterschiede und welcher ist in welchen Situationen vorzuziehen?

An der Oberfläche mögen die beiden Technologien direkt vergleichbar erscheinen, aber wenn Sie einige Zeit mit ihnen verbringen, werden Sie schnell feststellen, dass dies nicht der Fall ist. Sie wurden entwickelt, um ein ähnliches Ziel zu erreichen, nämlich clientseitige Speicherung, aber sie nähern sich der vorliegenden Aufgabe aus erheblich unterschiedlichen Perspektiven und arbeiten am besten mit unterschiedlichen Datenmengen.

localStorage, genauer gesagt Web Storage , wurde für kleinere Datenmengen entwickelt. Es handelt sich im Wesentlichen nur um einen Schlüsselwertspeicher für Zeichenfolgen mit einer simplen synchronen API. Dieser letzte Teil ist der Schlüssel. Obwohl die Spezifikation nichts enthält, was einen asynchronen DOM-Speicher verbietet, sind derzeit alle Implementierungen synchron (dh blockieren Anforderungen). Selbst wenn es Ihnen nichts ausmacht, einen naiven Schlüsselwertspeicher für größere Datenmengen zu verwenden, werden Ihre Kunden es stören, ewig auf das Laden Ihrer Anwendung zu warten.

indexedDB hingegen wurde entwickelt, um mit erheblich größeren Datenmengen zu arbeiten. Erstens bietet es theoretisch sowohl eine synchrone als auch eine asynchrone API. In der Praxis sind jedoch alle aktuellen Implementierungen asynchron und Anforderungen blockieren das Laden der Benutzeroberfläche nicht. Darüber hinaus stellt indexedDB, wie der Name verrät, Indizes bereit . Sie können rudimentäre Abfragen in Ihrer Datenbank ausführen und Datensätze abrufen, indem Sie deren Schlüssel in bestimmten Schlüsselbereichen nachschlagen . indexedDB unterstützt auch Transaktionen und bietet einfache Typen (z. B. Datum).

An diesem Punkt scheint indexedDB die überlegene Lösung für jede Situation zu sein. Für all seine Funktionen gibt es jedoch einen Nachteil: Im Vergleich zu DOM-Speicher ist die API recht kompliziert. indexedDB setzt eine allgemeine Vertrautheit mit Datenbankkonzepten voraus, wohingegen Sie mit Web Storage direkt einsteigen können. Wenn Sie jemals mit Cookies gearbeitet haben, gibt es kein Problem mit Web Storage. Außerdem müssen Sie im Allgemeinen mehr Code in indexedDB schreiben, um genau dasselbe Ergebnis wie in Web Storage zu erzielen (und mehr Code = mehr Fehler). Darüber hinaus ist die Emulation von Web Storage für Browser, die dies nicht unterstützen, relativ einfach. Mit indexedDB wäre die Aufgabe keine Zeit wert. Bevor Sie sich mit indexedDB befassen, sollten Sie sich zunächst die Quota-API ansehen .

Letztendlich liegt es ganz bei Ihnen, ob Sie in Ihrer Anwendung Web Storage oder indexedDB oder beides verwenden. Ein guter Anwendungsfall für Web Storage ist das Speichern einfacher Sitzungsdaten, z. B. des Namens eines Benutzers, und das Speichern einiger Anforderungen in Ihrer eigentlichen Datenbank. Mit den zusätzlichen Funktionen von indexedDB können Sie alle Daten speichern, die für die Offline-Arbeit Ihrer Anwendung erforderlich sind.

@ yannis Antwort ist ausgezeichnet. Ich möchte nur ein paar Dinge hinzufügen.

1. In einigen Situationen, wie z. B. bei Service Workern, können Sie keinen blockierenden Code verwenden. Daher können Sie localStorage nicht verwenden und müssen so etwas wie indexedDB verwenden.

2. Die API für indexedDB ist komplex und langwierig (ich würde sogar sagen "horrific", YMMV). Es gibt mehrere "Wrapper" -Bibliotheken, um die API zu vereinfachen. Ich empfehle dringend , dass Sie sich diese ansehen.

Ich habe festgestellt, dass ich Blobs in IndexedDB speichern kann, während ich in localStorage nur Strings speichern kann. IndexdDB eignet sich besser für Binärdaten wie Bilder, Audio und Video. Ja, wir können Bilder in base64 im localStorage speichern, aber Blobs werden kleiner und schneller, da wir sie nicht dekodieren müssen.

Zitat aus MDN :

The keys and the values are always strings.

Über 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