Dies ist Beitrag Nr. 6 der Frontend-Interviewfragen-Reihe. Wenn Sie Ihre Vorbereitung verbessern oder allgemein auf dem Laufenden bleiben möchten, sollten Sie sich für das Frontend Camp anmelden.
Cookies, lokaler Speicher und Sitzungsspeicher werden alle zum Speichern von Daten auf der Clientseite verwendet. Diese Mechanismen sind besonders nützlich zum Speichern von Authentifizierungstokens oder Nur-Client-Zuständen, wie z. B. Themen oder personalisierten Einstellungen. Alle drei Speichertypen haben die folgenden Eigenschaften gemeinsam:
Cookies können keine großen Datenmengen speichern; Ihr Speicher ist auf etwa 4 KB pro Domain begrenzt. Diese Einschränkung besteht, da Cookies bei jeder Anfrage des Browsers automatisch an den Server gesendet werden. Das Speichern übermäßiger clientseitiger Daten in Cookies würde die Nutzlastgröße erhöhen und sich negativ auf die Leistung auswirken.
Welche Art von Daten sollten wir in Cookies speichern?
Cookies eignen sich ideal zum Speichern von Daten, die an den Server übertragen werden müssen, wie z. B. Authentifizierungs-Tokens, Sitzungs-IDs, Analyse-IDs und ähnliche Informationen. Darüber hinaus ermöglichen Cookies die gemeinsame Nutzung von Daten über verschiedene Registerkarten oder Fenster derselben Domain oder Subdomain.
Sie können Cookies mithilfe verschiedener Flags konfigurieren, um ihr Verhalten zu optimieren oder die Sicherheit zu erhöhen:
Möchten Sie mehr über Cookie-Flags erfahren? Schauen Sie sich meinen LinkedIn-Beitrag an.
Im Gegensatz zur lokalen Speicherung und Sitzungsspeicherung können Cookies auch vom Server mithilfe des Set-Cookie-Headers gesetzt (sprich: „hinzugefügt“) werden.
// Set a cookie for the key `token` that `expires` on 1st March 2025. document.cookie = 'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/'; // Read all cookies. There's no way to read specific cookies using `document.cookie`. // You have to parse the string yourself. console.log(document.cookie); // token=a1-b2-c3 // Delete the cookie with the key `token` by setting an // expiry date in the past. The value doesn't matter. document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
Im Gegensatz zu Cookies bietet localStorage eine deutlich größere Speicherkapazität von ca. 5 MB pro Domain. Dies liegt daran, dass localStorage für die Speicherung langfristiger Daten konzipiert ist. Es behält Daten auch dann bei, wenn der Browser geschlossen ist, was es ideal für dauerhafte clientseitige Speicheranforderungen macht.
Welche Art von Daten sollten wir dann in localStorage speichern?
localStorage eignet sich am besten zum Speichern von Daten, die nur auf der Clientseite verwendet werden und nicht bei jeder Anfrage an den Server gesendet werden müssen. Einige Beispiele sind das Thema einer Website oder Produkte, die in den Warenkorb gelegt wurden, bevor sich ein Benutzer angemeldet hat.
In localStorage gespeicherte Daten bleiben auf unbestimmte Zeit bestehen, bis der Benutzer sie manuell löscht oder die Website sie mithilfe von JavaScript löscht.
Ähnlich wie bei Cookies sind Daten in localStorage über alle Registerkarten oder Fenster desselben Ursprungs zugänglich, was sie für die gemeinsame Nutzung des clientseitigen Status innerhalb einer Domäne nützlich macht.
// Set a cookie for the key `token` that `expires` on 1st March 2025. document.cookie = 'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/'; // Read all cookies. There's no way to read specific cookies using `document.cookie`. // You have to parse the string yourself. console.log(document.cookie); // token=a1-b2-c3 // Delete the cookie with the key `token` by setting an // expiry date in the past. The value doesn't matter. document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
sessionStorage wird zum Speichern kurzlebiger, clientseitiger Daten verwendet. Wie localStorage bietet es eine Speicherkapazität von etwa 5 MB pro Domain und nutzt dieselbe API.
Obwohl sessionStorage und localStorage ähnliche Funktionen haben, unterscheiden sie sich in zwei wesentlichen Aspekten: Datenpersistenz und Zugänglichkeit.
Im Gegensatz zu localStorage behält sessionStorage keine Daten bei, sobald die Registerkarte oder der Browser geschlossen wird. Darüber hinaus sind in sessionStorage gespeicherte Daten auf die spezifische Registerkarte oder das Fenster beschränkt, in dem sie erstellt wurden, was bedeutet, dass andere Registerkarten oder Fenster desselben Ursprungs nicht darauf zugreifen können.
Was ist dann der Anwendungsfall für sessionStorage?
sessionStorage eignet sich ideal zum Speichern von Daten, die nur für eine einzelne Sitzung benötigt werden. Stellen Sie sich beispielsweise einen Benutzer vor, der ein langes Formular ausfüllt und versehentlich die Seite aktualisiert. Wenn die Formulardaten in sessionStorage gespeichert sind, bleiben sie während der Aktualisierung bestehen, sodass der Benutzer fortfahren kann, ohne seinen Fortschritt zu verlieren.
Es ist jedoch wichtig zu beachten, dass auf diese Daten nicht in einem anderen Tab oder nach dem Schließen des Tabs zugegriffen werden kann.
// Set a value in localStorage.
localStorage.setItem('theme', 'dark');
// Get a value from localStorage.
console.log(localStorage.getItem('theme')); // 'dark'
// Remove a value from localStorage.
localStorage.removeItem('theme');
// Clear all data in localStorage.
localStorage.clear();
Während Cookies automatisch in jede vom Browser gesendete Anfrage einbezogen werden, können in localStorage oder sessionStorage gespeicherte Daten manuell an den Server übertragen werden, indem benutzerdefinierter Code geschrieben wird.
Gefällt Ihnen, was Sie gerade gelesen haben? Schauen Sie sich das Frontend Camp an ✌️
Das obige ist der detaillierte Inhalt vonCookies, lokaler Speicher und Sitzungsspeicher. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
