it-swarm.com.de

Wie unterscheidet sich localStorage von indexedDB?

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

119
user52009

Oberflächlich betrachtet scheinen die beiden Technologien direkt vergleichbar zu sein. Wenn Sie jedoch 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 die clientseitige Speicherung, aber sie nähern sich der jeweiligen Aufgabe aus signifikant 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 um einen Nur-Wert-Wert-Speicher für Zeichenfolgen mit einem simplen synchronen API. Dieser letzte Teil ist der Schlüssel. Obwohl die Spezifikation nichts enthält, was einen asynchronen Webspeicher verbietet, sind derzeit alle Implementierungen synchron (d. H. Blockieren von Anforderungen). Selbst wenn es Ihnen nichts ausmacht, einen naiven Schlüsselwertspeicher für größere Datenmengen zu verwenden, wird es Ihren Kunden etwas ausmachen, ewig auf das Laden Ihrer Anwendung zu warten.

indexedDB wurde hingegen für die Arbeit mit erheblich größeren Datenmengen entwickelt. 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 liefert indexedDB, wie der Name schon sagt, indexes . 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. Es gibt jedoch eine Strafe für alle Funktionen: Im Vergleich zu Web Storage ist die API recht kompliziert. indexedDB setzt eine allgemeine Vertrautheit mit Datenbankkonzepten voraus, während Sie mit Web Storage direkt einsteigen können. Wenn Sie jemals mit Cookies gearbeitet haben, haben Sie kein Problem mit Web Storage. Außerdem müssen Sie im Allgemeinen mehr Code in indexedDB schreiben, um genau das gleiche Ergebnis wie in Web Storage zu erzielen (und mehr Code = mehr Fehler). Darüber hinaus ist das Emulieren von Web Storage für Browser, die ihn nicht unterstützen, relativ einfach. Mit indexedDB wäre die Aufgabe ihre Zeit nicht wert. Bevor Sie in indexedDB eintauchen, sollten Sie sich zunächst die Quota API ansehen.

Letztendlich liegt es ganz bei Ihnen, ob Sie Web Storage oder indexedDB oder beides in Ihrer Anwendung verwenden. Ein guter Anwendungsfall für Web Storage wäre das Speichern einfacher Sitzungsdaten, beispielsweise des Benutzernamens, und das Speichern einiger Anforderungen in Ihrer tatsächlichen Datenbank. Die zusätzlichen Funktionen von indexedDB können Ihnen andererseits dabei helfen, alle Daten zu speichern, die Sie benötigen, damit Ihre Anwendung offline funktioniert.

129
yannis

@ 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 Blockierungscode 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 "schrecklich" sagen, YMMV). Es gibt mehrere "Wrapper" -Bibliotheken, um die API zu vereinfachen. Ich stark schlage vor, dass Sie sich diese ansehen.

10
user949300

Ich habe festgestellt, dass ich Blobs in IndexedDB speichern kann, während ich in localStorage nur Zeichenfolgen speichern kann. Es bedeutet, dass IndexdDB besser für Binärdaten wie Bilder, Audio, Video geeignet ist. 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
3