Einleitung
Bei der Entwicklung leichtgewichtiger Anwendungen möchten wir möglicherweise einige Daten speichern. Wenn eine Datenbank zu viel des Guten ist – gibt es eine großartige Alternative: localStorage!
Es ersetzt zwar keine Datenbank für Datenbankzwecke, dient aber als einfaches dateibasiertes Speichersystem, das Sie zum Speichern leicht zugänglicher Datenpunkte nutzen können.
In diesem Artikel lernen wir die Verwendung
localStorageum Daten einfach in unserem Browser zu speichern. Diese Daten werden gespeichert als Schlüssel-Wert-Paare die der Benutzer leicht abrufen kann.
Daten speichern unter localStorage in React ist super einfach:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Wenn Sie es nicht eilig haben und mehr darüber erfahren möchten, wie das funktioniert, lesen Sie weiter!
Was ist lokaler Speicher?
localStorage ist ein Webspeicherobjekt, das Entwicklern das Speichern ermöglicht Schlüssel-Wert-Paare in einem Webbrowser und stellt sicher, dass diese Daten alle Seitenaktualisierungen überdauern, selbst wenn ein Benutzer einen Browser schließt oder neu startet – und sie haben kein Ablaufdatum. Gespeicherte Schlüssel-Wert-Paare können jede Art von Daten enthalten – Arrays, Objekte, Zeichenfolgen, Zahlen und viele andere.
Dies kann jedoch nicht die Rolle von Datenbanken in Ihren Websites und Webanwendungen ersetzen, da Daten verloren gehen, wenn ein Benutzer den Cache des Browsers und den lokalen Speicher löscht – letztendlich ist es so lokaler Speicher und sollte auch so verwendet werden. Dennoch gibt es Situationen, in denen ein Benutzer verwenden kann localStorage, wie die Implementierung der dunkler Modus Funktion, das Beibehalten des Formulareingabewerts eines Benutzers und viele andere.
localStorage hat eingebaute Methoden, die es uns ermöglichen, auf das Speicherobjekt des Browsers zuzugreifen. Ein Beispiel ist die setItem() -Methode, mit der wir einen Schlüssel und einen Wert hinzufügen können localStorage, wodurch wir Daten speichern können. Andere Methoden werden verwendet, um Daten abzurufen – getItem(), Daten löschen - removeItem(), alles löschen localStorage Instanzen – clear(), Und so weiter.
Speichern von Daten auf lokaler Speicher Mit der setItem() Versandart
Das setItem() -Methode ermöglicht es uns, Werte eines beliebigen Datentyps zu speichern localStorage durch Zuweisen von Werten zu Schlüsseln, was zu a führt Schlüssel-Wert-Paar. Dieser Schlüssel würde verwendet, um den entsprechenden Wert abzurufen, wann immer wir ihn abrufen möchten localStorage.
Hinweis: Zum Speichern von Daten in localStorage, müssen wir es zuerst konvertieren JSON-Zeichenfolge Verwendung der JSON.stringify() Funktion. Und wenn wir es abrufen möchten, analysieren wir die Daten mit JSON.parse(), Konvertieren der JSON-Zeichenfolge zurück in a JSON-Objekt.
Bei der Arbeit mit Daten in React verwenden wir häufig Haken um uns zu helfen, es zu speichern/aufbewahren. Hooks können uns auch dabei helfen, herauszufinden, wo wir diese Daten hochladen können. das gilt auch für localStorage weil wir die verwenden werden useState() machen useEffect() Haken. Diese Haken sind kritisch, weil die useState() Hook wird verwendet, um Daten zu speichern und zu setzen, während the useEffect() Hook wird standardmäßig nach dem ersten Rendern ausgelöst und immer dann, wenn sich der als zweiter Parameter übergebene Status ändert.
Nachdem wir die Grundlage erklärt haben, ist hier der Code, den wir zum Speichern von Daten verwenden würden localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Wir haben zuerst einen Zustand erstellt, um die Daten zu speichern, die wir in unserem speichern möchten localStorage, und dann haben wir eine erstellt useEffect() Hook und übergibt den Status als zweiten Parameter. Auf diese Weise werden bei jeder Statusänderung die Daten in der localStorage wird auf den aktuellen Wert aktualisiert.
Wir haben die Kernfunktionalität, die uns bei der Datenspeicherung unterstützt, innerhalb der behandelt useEffect() Haken:
localStorage.setItem('dataKey', JSON.stringify(data));
Zusammenfassung
In diesem Artikel haben wir gelernt, wie man React-Hooks verwendet, um Daten in React zu speichern localStorage. Wie bereits erwähnt, wird dies niemals die Rolle einer Datenbank ersetzen, sondern uns dabei unterstützen, einige benutzerbezogene Daten zu speichern, die die Benutzeroberfläche verbessern können, aber nicht unabhängig vom Browser gespeichert werden sollen.
