Inwiefern unterscheidet sich localStorage von indexedDB?

108

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?

yannis
quelle
16
Enge Wähler: Während ich völlig verstehe, wie dies "primär meinungsbasiert" schien (das "vs" in der Originalversion hat nicht geholfen), unterscheiden sich die beiden Technologien deutlich und es gibt objektive Gründe, sich für eine andere zu entscheiden. user221287 Durch minimale vorherige Recherchen zum Thema der Frage und ein grundlegendes Verständnis der Konzepte, bevor Sie fragen, werden Sie höchstwahrscheinlich in Zukunft vor Abstimmungen und engen Abstimmungen bewahrt.
Yannis
Sie können die Leistung unter verschiedenen Speicheroptionen und in verschiedenen Browsern testen : nolanlawson.github.io/database-comparison ( Dank an Nolan Lawson)
Lucas Basquerotto

Antworten:

121

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
quelle
15
Außerdem wird IndexedDB nur von neueren Browsern unterstützt : IE 10+, Chrome 23+, Firefox 10+, Opera 15+ und Android 4.4+.
David Harkness
1
@yannis, gibt es einen Unterschied zwischen DOM-Speicher und Webspeicher?
SandroMarques
Sie scheinen gleich zu sein. en.wikipedia.org/wiki/Web_storage
Lawliet
Auch Servicemitarbeiter können indexedDB verwenden, jedoch nicht localStorage
Fabich
10

@ 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.

user949300
quelle
Sie können localStorage und den Blockierungscode nicht verwenden. Können Sie den Blockierungscode nicht mit einem Promise umschließen und ihn nicht blockieren?
15.
3

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
Vitaly Zdanevich
quelle
Ist es? Was sagt die Dokumentation dazu?
Mael
Verweise auf die Dokumentation wurden hinzugefügt.
Vitaly Zdanevich