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

Funktion Lokaler Speicher Sitzungsspeicher

Feature	Local Storage	Session Storage
Data Lifespan	Persistent	Cleared after session
Storage Size	~5MB	~5MB
Scope	Same-origin policy	Same-origin and session
Use Case	Long-term storage	Temporary/session storage

Datenlebensdauer Persistent Nach der Sitzung gelöscht Speichergröße ~5 MB ~5 MB Geltungsbereich Same-Origin-Richtlinie Gleicher Ursprung und gleiche Sitzung Anwendungsfall Langzeitlagerung Temporärer/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

Funktion Lokaler Speicher Sitzungsspeicher

Feature	Local Storage	Session Storage
Persistent Storage	Yes	No
Accessible via JS	Yes	Yes
Data Scope	Origin	Origin Session

Persistenter Speicher Ja Nein

Zugriff über JS

Ja Ja

Datenumfang

Herkunft Origin-Sitzung
Lokaler Speicher und Sitzungsspeicher sind wesentliche Werkzeuge für die clientseitige Datenverwaltung. Wenn Sie wissen, wann die einzelnen Elemente zu verwenden sind, und die Best Practices befolgen, ist eine sichere und effiziente Implementierung in Webanwendungen gewährleistet.

Hallo, ich bin Abhay Singh Kathayat! Ich bin ein Full-Stack-Entwickler mit Fachwissen sowohl in Front-End- als auch in Back-End-Technologien. Ich arbeite mit einer Vielzahl von Programmiersprachen und Frameworks, um effiziente, skalierbare und benutzerfreundliche Anwendungen zu erstellen. Sie können mich gerne unter meiner geschäftlichen E-Mail-Adresse erreichen: kaashshorts28@gmail.com.

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!