JavaScript - Storage API: Ein Anfängerleitfaden

Hallo da draußen, zukünftige Codingsuperstars! ? Heute tauchen wir in die Welt von JavaScripts Storage API ein. Machen Sie sich keine Sorgen, wenn Sie noch nie eine Zeile Code geschrieben haben - ich werde Ihr freundlicher Guide auf dieser aufregenden Reise sein. Los geht's!

Was ist die Web Storage API?

Stellen Sie sich vor, Sie haben ein magisches Notizbuch, das Dinge für Sie记住 kann, zelfs als Sie es schließen. Das ist im Grunde, was die Web Storage API für Websites macht! Es ist eine Möglichkeit für Webanwendungen, Daten direkt in Ihrem Browser zu speichern.

Denken Sie daran wie folgt: Sie spielen ein Spiel auf einer Website und möchten Ihren Fortschritt speichern. Die Web Storage API ermöglicht es dem Spiel, Ihre Punktzahl zu erinnern, zelfs wenn Sie den Browser schließen und später zurückkehren. Cool, oder?

Es gibt zwei Haupttypen der Webspeicherung:

1. localStorage
2. sessionStorage

Lassen Sie uns diese genauer untersuchen.

Das Window localStorage Objekt

Was ist localStorage?

localStorage ist wie ein dauerhafter Speicherplatz für Ihre Webanwendung. Es behält Daten bei, zelfs nach dem Schließen des Browsers, was es perfekt für die langfristige Speicherung macht.

Wie man localStorage verwendet

Hier ist ein einfaches Beispiel, wie man localStorage verwendet:

// Daten speichern
localStorage.setItem("username", "CoolCoder123");

// Daten abrufen
let savedUsername = localStorage.getItem("username");
console.log(savedUsername); // Ausgabe: CoolCoder123

// Daten entfernen
localStorage.removeItem("username");

// Alle Daten löschen
localStorage.clear();

In diesem Beispiel speichern wir einen Benutzernamen, rufen ihn ab, entfernen ihn und löschen dann alle Daten. Es ist wie das Schreiben in Ihrem magischen Notizbuch, das Lesen dessen, was Sie geschrieben haben, das Löschen einer bestimmten Notiz und das Säubern des gesamten Notizbuchs!

Das Window sessionStorage Objekt

Was ist sessionStorage?

sessionStorage ist wie der vergessliche Cousin von localStorage. Es speichert Daten nur für eine Sitzung. Wenn Sie die Browserregisterkarte schließen, puf! Die Daten verschwinden.

Wie man sessionStorage verwendet

Der Einsatz von sessionStorage ist sehr ähnlich zu localStorage:

// Daten speichern
sessionStorage.setItem("tempScore", "1000");

// Daten abrufen
let currentScore = sessionStorage.getItem("tempScore");
console.log(currentScore); // Ausgabe: 1000

// Daten entfernen
sessionStorage.removeItem("tempScore");

// Alle Daten löschen
sessionStorage.clear();

Dies ist großartig für die Speicherung temporärer Informationen, wie einer Spielpunktzahl, die Sie nur benötigen, während der Spieler aktiv spielt.

Cookies vs localStorage vs sessionStorage

Nun vergleichen wir diese Speicherverfahren mit einer spaßigen Analogie:

1. Cookies sind wieklebrige Notizzettel. Sie sind klein, können vom Server gelesen werden und haben ein Ablaufdatum.
2. localStorage ist wie einpersönliches Tagebuch. Es speichert viele Informationen und behält sie lange bei.
3. sessionStorage ist wie eineWhiteboard. Es hält Informationen temporär und löscht sie, wenn Sie fertig sind.

Hier ist eine praktische Vergleichstabelle:

Eigenschaft	Cookies	localStorage	sessionStorage
Kapazität	~4KB	~5MB	~5MB
Ablauf	Manuell eingestellt	Nie	Bei Tab-Schließung
Serverzugriff	Ja	Nein	Nein
Mit Anfragen gesendet	Ja	Nein	Nein

Eigenschaften und Methoden des Speicherobjekts

Both localStorage and sessionStorage share the same methods and properties. Let's explore them:

Eigenschaften

1. length: Gibt die Anzahl der gespeicherten Elemente zurück.

console.log(localStorage.length);

Methoden

1. setItem(key, value): Fügt ein Schlüssel/Wert-Paar zur Speicherung hinzu.
2. getItem(key): Ruft den Wert ab, der mit dem angegebenen Schlüssel verknüpft ist.
3. removeItem(key): Entfernt das Element, das mit dem angegebenen Schlüssel verknüpft ist.
4. clear(): Entfernt alle Elemente aus dem Speicher.
5. key(index): Gibt den Namen des Schlüssels an der angegebenen Indexposition zurück.

Hier ist ein Beispiel, das alle diese Methoden verwendet:

// setItem verwenden
localStorage.setItem("fruit", "apple");
localStorage.setItem("vegetable", "carrot");

// getItem verwenden
console.log(localStorage.getItem("fruit")); // Ausgabe: apple

// key verwenden
console.log(localStorage.key(0)); // Ausgabe: fruit (oder vegetable, Reihenfolge nicht gewährleistet)

// length verwenden
console.log(localStorage.length); // Ausgabe: 2

// removeItem verwenden
localStorage.removeItem("vegetable");

// clear verwenden
localStorage.clear();

Und da haben Sie es! Sie haben gerade Ihre ersten Schritte in die Welt der Webspeicherung unternommen. Denken Sie daran, Übung macht den Meister. Versuchen Sie, eine einfache Webseite zu erstellen und experimentieren Sie mit diesen Speicherverfahren. Vielleicht erstellen Sie ein kleines Spiel, das die Highscore des Spielers mit localStorage speichert?

Bevor ich gehe, hier ist ein kleiner Coding-Witz für Sie:

Warum bevorzugen Programmierer dunklen Modus? Weil Licht Käfer anzieht! ??

Frohes Coden und denken Sie daran - jeder Experte war einmal ein Anfänger. Bleiben Sie neugierig, bleiben Sie codend und vor allem, haben Sie Spaß!

Credits: Image by storyset