Der localStorage-Mechanismus stellt eine Art Webspeicherobjekt bereit, mit dem Sie Daten im Browser speichern und abrufen können. Sie können Daten ohne Ablaufdatum speichern und darauf zugreifen; Die Daten sind auch dann verfügbar, wenn ein Besucher Ihre Website schließt.

Normalerweise greifen Sie über JavaScript auf localStorage zu. Mit wenig Code können Sie ein Beispielprojekt wie einen Punktezähler erstellen. Dies zeigt, wie Sie persistente Daten nur mit clientseitigem Code speichern und darauf zugreifen können.

Was ist localStorage in JavaScript?

Das localStorage-Objekt ist Teil der Webspeicher-API, die von den meisten Webbrowsern unterstützt wird. Mit localStorage können Sie Daten als Schlüssel-Wert-Paare speichern. Die eindeutigen Schlüssel und Werte sollten im UTF-16-DOM-String-Format vorliegen.

Wenn Sie Objekte oder Arrays speichern möchten, müssen Sie diese mithilfe von in Strings umwandeln JSON.stringify() Methode. Sie können bis zu 5 MB Daten in localStorage speichern. Außerdem können alle Fenster mit demselben Ursprung die localStorage-Daten dieser Site gemeinsam nutzen.

instagram viewer

Ein Browser löscht diese Daten auch dann nicht, wenn ein Benutzer ihn schließt. Es wird während jeder zukünftigen Sitzung für die Website verfügbar sein, die es erstellt hat. Sie sollten localStorage jedoch nicht für sensible Daten verwenden, da andere Skripts, die auf derselben Seite ausgeführt werden, darauf zugreifen können.

lokaler Speicher vs. Sitzungsspeicher

Das localStorage und sessionStorage Objekte sind Teil der Webspeicher-API, die Schlüssel-Wert-Paare lokal speichert. Alle modernen Browser unterstützen sie beide. Mit localStorage verfallen die Daten auch dann nicht, wenn ein Benutzer seinen Browser schließt. Dies unterscheidet sich von sessionStorage, das Daten löscht, wenn die Seitensitzung endet. Eine Seitensitzung endet, wenn Sie eine Registerkarte oder ein Fenster schließen.

Der in diesem Projekt verwendete Code ist in a GitHub-Repository und steht Ihnen unter der MIT-Lizenz kostenlos zur Verfügung. Wenn Sie sich eine Live-Version des Score Counter-Projekts ansehen möchten, können Sie sich das Live ansehen Demo.

Wie funktioniert localStorage?

Sie können auf die localStorage-Funktionalität über zugreifen Window.localStorage Eigentum. Diese Eigenschaft bietet mehrere Methoden wie setItem(), getItem() und removeItem(). Sie können diese verwenden, um Schlüssel/Wert-Paare zu speichern, zu lesen und zu löschen.

So speichern Sie Daten in localStorage

Sie können Daten in localStorage mithilfe von speichern setItem() Methode. Diese Methode akzeptiert zwei Argumente, den Schlüssel und den entsprechenden Wert.

window.localStorage.setItem('Python', 'Guido van Rossum');

Hier, Python ist der Schlüssel und Guido van Rossum ist der Wert. Wenn Sie ein Array oder ein Objekt speichern möchten, müssen Sie es in einen String konvertieren. Sie können ein Array oder ein Objekt mithilfe von in einen String umwandeln JSON.stringify() Methode.

Fenster.localStorage.setItem('Python', 'Guido van Rossum');
konst Schüler = {
 Name: "Yuvraj",
 markiert: 85,
 Thema: "Maschinelles Lernen"
}
konst Punkte = [76, 77, 34, 67, 88];
Fenster.localStorage.setItem('Ergebnis', JSON.stringify (Schüler));
Fenster.localStorage.setItem('Markierungen', JSON.stringify (Ergebnisse));

So lesen Sie Daten aus localStorage

Sie können Daten aus localStorage mit der auslesen getItem() Methode. Diese Methode akzeptiert den Schlüssel als Parameter und gibt den Wert als Zeichenfolge zurück.

Lassen Daten1 = Fenster.localStorage.getItem('Python');
Lassen Daten2 = Fenster.localStorage.getItem('Ergebnis');
Konsole.log (Daten1);
Konsole.log (Daten2);

Dies erzeugt die folgende Ausgabe:

Guido van Rossum
{"Name":"Yuvraj","markiert":85,"Thema":"Maschinelles Lernen"}

Wenn Sie das Ergebnis von einem String in ein Objekt umwandeln möchten, sollten Sie die verwenden JSON.parse() Methode.

Lassen Daten2 = JSON.parse(Fenster.localStorage.getItem('Ergebnis'));
Konsole.log (Daten2);

So löschen Sie lokale Speichersitzungen

Sie können localStorage-Sitzungen mit löschen Gegenstand entfernen() Methode. Sie müssen den Schlüssel als Parameter an diese Methode übergeben, um das Schlüssel-Wert-Paar zu löschen. Wenn der Schlüssel existiert, löscht die Methode das Schlüssel-Wert-Paar und wenn der Schlüssel nicht existiert, wird die Methode nichts tun.

window.localStorage.removeItem('Python');
window.localStorage.removeItem('C++');

So löschen Sie alle Elemente in localStorage

Sie können alle Elemente im lokalen Speicher mit löschen klar() Methode. Sie müssen dieser Methode keinen Parameter übergeben.

Fenster.lokaler Speicher.klar();

So ermitteln Sie die Länge von localStorage

Sie können die Länge von localStorage mithilfe von ermitteln localStorage.length Eigentum.

Lassen len = localStorage.length;
Konsole.log (länge);

So erhalten Sie den Schlüssel an einer bestimmten Position

Sie können den Schlüssel an einer bestimmten Position mit erhalten Schlüssel() Methode. Diese Methode akzeptiert den Index als Parameter.

Lassen d = localStorage.key(1);
Konsole.log (d);

Die Methode key() wird hauptsächlich verwendet, um alle Elemente in localStorage zu durchlaufen.

So durchlaufen Sie alle Elemente in localStorage

Sie können alle Elemente in localStorage mit einer for-Schleife durchlaufen.

zum (Lassen ich = 0; i < localStorage.length; i++){
Lassen key = localStorage.key (i);
Lassen value = localStorage.getItem (Schlüssel);
Konsole.log (Schlüssel, Wert);
}

Die Methode key() akzeptiert den Index als Argument und gibt den entsprechenden Schlüssel zurück. Die Methode getItem() akzeptiert den Schlüssel als Argument und gibt den entsprechenden Wert zurück. Zuletzt die Konsole.log() -Methode gibt das Schlüssel-Wert-Paar aus.

Einfaches JavaScript-Projekt basierend auf localStorage

Mit einem Verständnis der grundlegenden Methoden können Sie sich weiterentwickeln ein einfaches JavaScript-Projekt basierend auf localStorage. In diesem Projekt erstellen Sie eine Punktezähler-App, die den Punktestand je nach Klick auf eine Schaltfläche erhöht oder verringert. Außerdem implementieren Sie Funktionen zum Löschen aller Elemente in localStorage.

Erstelle ein index.html und script.js Datei in einem neuen Ordner und öffnen Sie die Dateien in Ihrem bevorzugten Code-Editor. Verwenden Sie den folgenden HTML-Code, um eine Schnittstelle für die Punktezähler-App zu erstellen:

<!DOCTYPE html>
<html>
<Karosserie>
<h1>localStorage in JavaScript</h1>
<Schaltfläche onclick="ErhöhenZähler()" Typ="Taste">Erhöhen Sie die Punktzahl</button>
<Schaltfläche onclick="AbnahmeZähler()" Typ="Taste">Punktzahl verringern</button>
<Schaltfläche onclick="clearCounter()" Typ="Taste">Lokalen Speicher löschen</button>
<p>Punktzahl:</p>
<p id="Punktzahl"></p>
<p>Klick auf das "Erhöhen Sie die Punktzahl" Schaltfläche, um die Punktzahl zu erhöhen</p>
<p>Klick auf das "Punktzahl verringern" Taste, um die Punktzahl zu verringern</p>
<p>Klick auf das "Lokalen Speicher löschen" Schaltfläche zum Löschen des localStorage</p>
<p>
 Sie können den Browser-Tab schließen (bzw Fenster), und Versuchen wieder.
 Sie werden sehen, dass die Daten weiterhin bestehen bleiben undistnicht auch nach Schließung verloren
 der Browser.
</p>
<script src="script.js"></script>
</body>
</html>

Diese Seite enthält drei Schaltflächen: Erhöhen Sie die Punktzahl, Punktzahl verringern, und Lokalen Speicher löschen. Diese Schaltflächen rufen die auf ErhöhenZähler(), AbnahmeZähler(), und clearCounter() Funktionen bzw. Verwenden Sie den folgenden Code, um der Punktezähler-App mithilfe von JavaScript Funktionalität hinzuzufügen.

FunktionErhöhenZähler() {
Var zählen = Nummer(Fenster.localStorage.getItem("count"));
 zählen += 1;
 window.localStorage.setItem("zählen", zählen);
 document.getElementById("Punktzahl").innerHTML = zählen;
}

Das ErhöhenZähler() Die Funktion ruft die Anzahl mithilfe der Methode getItem() ab. Es wandelt das Ergebnis in eine Zahl um, da getItem() einen String zurückgibt, und speichert es in der count-Variablen.

Beim ersten Klick auf die Erhöhen Sie die Punktzahl button steht vor jedem Aufruf von setItem(). Ihr Browser findet die nicht zählen Geben Sie localStorage ein, sodass ein Nullwert zurückgegeben wird. Da die Number()-Funktion 0 für eine Null-Eingabe zurückgibt, benötigt sie keine Sonderfallbehandlung. Der Code kann den Zählwert sicher erhöhen, bevor er gespeichert und das Dokument aktualisiert wird, um den neuen Wert anzuzeigen.

FunktionAbnahmeZähler() {
Var zählen = Nummer(Fenster.localStorage.getItem("count"));
 zählen -= 1;
 window.localStorage.setItem("zählen", zählen);
 document.getElementById("Punktzahl").innerHTML = zählen;
}

Das AbnahmeZähler() Funktion ruft und überprüft die Daten genauso wie ErhöhenZähler() tut. Es dekrementiert die zählen Variable um 1, was standardmäßig 0 ist.

FunktionclearCounter() {
Fenster.lokaler Speicher.klar();
 document.getElementById("Punktzahl").innerHTML = "";
}

Zuletzt die clearCounter() Funktion löscht alle Daten aus localStorage mit der klar() Methode.

Machen Sie mehr mit localStorage

Das localStorage-Objekt hat mehrere Methoden, einschließlich setItem(), getItem(), removeItem() und clear(). Obwohl localStorage einfach zu verwenden ist, ist es nicht sicher, vertrauliche Informationen zu speichern. Aber es ist eine gute Wahl, um Projekte zu entwickeln, die nicht viel Speicherplatz benötigen und keine sensiblen Informationen beinhalten.

Möchten Sie ein weiteres localStorage-basiertes JavaScript-Projekt erstellen? Hier ist eine einfache Aufgabenlisten-App, die Sie mit HTML, CSS und JavaScript entwickeln können.