Lokalen Speicher in JavaScript verstehen

Local Storage ist eine wichtige browserbasierte API, die es Entwicklern ermöglicht, Daten direkt im Browser zu speichern, abzurufen und zu verwalten. Im Gegensatz zum Sitzungsspeicher bleibt der lokale Speicher auch nach dem Schließen des Browsers bestehen und eignet sich daher ideal zum Speichern von Benutzereinstellungen, App-Einstellungen oder anderen Arten von Daten, die zwischen Sitzungen gespeichert werden müssen. Es ist jedoch wichtig zu beachten, dass die Daten auf den Browser beschränkt sind, in dem sie gespeichert sind. Beispielsweise sind in Chrome gespeicherte Daten in Firefox nicht verfügbar.

So funktioniert lokaler Speicher

Bevor Sie mit Local Storage arbeiten, ist es wichtig zu verstehen, dass Daten im JSON-Format gespeichert werden. Das heißt, wenn Sie ein JavaScript-Objekt speichern, müssen Sie es zuerst in JSON konvertieren und beim Abrufen der Daten wieder in ein JavaScript-Objekt konvertieren.

Hier ist ein Beispiel:

const user = {
  name: "AliceDoe"
};
const userToJSON = JSON.stringify(user); // Convert object to JSON

Lokalen Speicher in Ihrem Browser anzeigen

Sie können die im lokalen Speicher gespeicherten Daten mithilfe der Entwicklertools Ihres Browsers anzeigen und damit interagieren. Hier ist eine Kurzanleitung:

1. Klicken Sie mit der rechten Maustaste auf eine beliebige Webseite und wählen Sie „Inspizieren“ oder drücken Sie F12.
2. Öffnen Sie die Registerkarte Anwendung.
3. Suchen Sie im linken Bereich im Speicherbereich nach Lokaler Speicher. Dort werden Ihre gespeicherten Daten als Schlüssel-Wert-Paare angezeigt.

Erstellen eines neuen Datensatzes im lokalen Speicher

Um Daten im lokalen Speicher zu speichern, befolgen Sie diese Schritte:

const user = {
  name: "AliceDoe"
};

const userToJSON = JSON.stringify(user); // Convert to JSON
localStorage.setItem("user", userToJSON); // Save the item

In diesem Beispiel:

• Der Schlüssel ist „Benutzer“.
• Der Wert ist das stringifizierte Objekt im JSON-Format.

Daten aus dem lokalen Speicher lesen

Wenn Sie Daten aus dem lokalen Speicher abrufen, müssen Sie die JSON-Zeichenfolge zurück in ein JavaScript-Objekt konvertieren:

const userJSON = localStorage.getItem("user"); // Retrieve data
const userObject = JSON.parse(userJSON); // Convert back to JS object
console.log(userObject); // { name: "AliceDoe" }

Vorhandene Daten im lokalen Speicher aktualisieren

Das Aktualisieren von Daten im lokalen Speicher ähnelt dem Erstellen eines neuen Datensatzes – im Wesentlichen überschreiben Sie die alten Daten:

const updatedUser = {
  name: "AliceDoe",
  age: 25
};

const updatedUserJSON = JSON.stringify(updatedUser);
localStorage.setItem("user", updatedUserJSON); // Overwrite the record

Daten aus dem lokalen Speicher löschen

Um einen Datensatz schließlich aus dem lokalen Speicher zu entfernen, können Sie die Methode „removeItem“ verwenden:

localStorage.removeItem("user"); // Remove the "user" record

Dadurch wird der mit dem „Benutzer“-Schlüssel verknüpfte Datensatz gelöscht.

Abschluss

Local Storage ist ein leistungsstarkes, benutzerfreundliches Tool für die clientseitige Datenpersistenz in JavaScript. Wenn Sie wissen, wie Datensätze erstellt, gelesen, aktualisiert und gelöscht werden, können Sie wichtige Daten speichern, die über Browsersitzungen hinweg bestehen bleiben, und so das Benutzererlebnis verbessern. Beachten Sie jedoch auch, dass der lokale Speicher auf einen bestimmten Browser und eine bestimmte Domäne beschränkt ist und nicht für sensible Daten verwendet werden sollte, da er nicht verschlüsselt ist.

Durch die Integration von lokalem Speicher in Ihre Anwendungen können Sie deren Funktionalität verbessern, ohne für bestimmte Aufgaben eine vollständige Backend-Lösung zu benötigen.

---

Zitate:

• MDN-Webdokumente, „LocalStorage“, https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Das obige ist der detaillierte Inhalt vonLokalen Speicher in JavaScript verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!