Grundlegendes zum lokalen Speicher und Sitzungsspeicher in JavaScript

Lokaler Speicher und Sitzungsspeicher in JavaScript

Web Storage APIs, einschließlich Local Storage und Session Storage, bieten eine einfache Möglichkeit, Schlüssel-Wert-Paare im Browser eines Benutzers zu speichern. Diese sind Teil der HTML5-Webspeicherspezifikation und werden zum Beibehalten von Daten in clientseitigen Webanwendungen verwendet.

1. Lokaler Speicher

• Speichert Daten ohne Ablaufdatum.
• Daten bleiben bestehen, auch wenn der Browser geschlossen und erneut geöffnet wird.

Hauptmerkmale:

• Maximaler Speicher: ~5 MB pro Domain (variiert je nach Browser).
• Synchronisierte API (blockiert möglicherweise den Hauptthread für große Datenmengen).
• Nur ​​vom gleichen Ursprung aus zugänglich.

Häufige Anwendungsfälle:

• Speichern von Benutzereinstellungen (z. B. Thema, Sprache).
• Persistente Warenkorbdaten.

Beispiel:

Speichern von Daten:

localStorage.setItem("username", "JohnDoe");

Daten abrufen:

const username = localStorage.getItem("username");
console.log(username); // Output: JohnDoe

Daten entfernen:

localStorage.removeItem("username");

Alle Daten löschen:

localStorage.clear();

2. Sitzungsspeicher

• Speichert Daten nur für die aktuelle Sitzung.
• Daten werden gelöscht, wenn die Browser-Registerkarte oder das Fenster geschlossen wird.

Hauptmerkmale:

• Maximaler Speicher: ~5 MB pro Domain (variiert je nach Browser).
• Synchronisierte API.
• Zugriff nur über denselben Ursprung und dieselbe Browsersitzung.

Häufige Anwendungsfälle:

• Speicherung temporärer Daten (z. B. Formulareingaben während der Navigation).
• Sitzungsspezifische Präferenzen verfolgen.

Beispiel:

Speichern von Daten:

sessionStorage.setItem("isLoggedIn", "true");

Daten abrufen:

const isLoggedIn = sessionStorage.getItem("isLoggedIn");
console.log(isLoggedIn); // Output: true

Daten entfernen:

sessionStorage.removeItem("isLoggedIn");

Alle Daten löschen:

sessionStorage.clear();

3. Unterschiede zwischen lokalem Speicher und Sitzungsspeicher

4. Komplexe Daten speichern

Sowohl der lokale Speicher als auch der Sitzungsspeicher speichern Daten als Zeichenfolgen. Um komplexe Daten wie Objekte zu speichern, müssen Sie JSON.stringify() und JSON.parse() verwenden.

Beispiel:

localStorage.setItem("username", "JohnDoe");

5. Best Practices

1. Vermeiden Sie die Speicherung sensibler Daten:

   • Daten werden im Klartext gespeichert und können über JavaScript in derselben Domain abgerufen werden.
   • Verwenden Sie sichere Methoden (z. B. reine HTTP-Cookies) für sensible Daten.

2. Überprüfen Sie die Browserunterstützung:

   • Stellen Sie sicher, dass der Browser des Benutzers lokalen Speicher und Sitzungsspeicher unterstützt:

const username = localStorage.getItem("username");
console.log(username); // Output: JohnDoe

1. Datengröße begrenzen:

   • Speichern Sie nur wichtige Daten, um Leistungsprobleme zu vermeiden.

2. Schlüssel mit Bedacht verwenden:

   • Verwenden Sie eindeutige Schlüssel, um Konflikte mit Bibliotheken von Drittanbietern zu vermeiden.

3. Speichernutzung überwachen:

   • Überprüfen Sie den verfügbaren Speicherplatz, um eine Überschreitung des Speicherlimits zu vermeiden.

6. Speicher programmgesteuert löschen

Beispiel:

localStorage.removeItem("username");

7. Debuggen und Verwalten des Speichers

Die meisten modernen Browser bieten Entwicklertools zur Überprüfung des lokalen Speichers und des Sitzungsspeichers.

Schritte:

1. Entwicklertools öffnen (F12 oder Rechtsklick > Prüfen).
2. Navigieren Sie zur Registerkarte „Anwendung“.
3. Unter „Speicher“ sehen Sie sich „Lokaler Speicher“ und „Sitzungsspeicher“ an.

8. Zusammenfassung

Das obige ist der detaillierte Inhalt vonGrundlegendes zum lokalen Speicher und Sitzungsspeicher in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!