Was ist der Unterschied zwischen localStorage, sessionStorage, Session und Cookies?

Question

Was sind die technischen Vor- und Nachteile von localStorage, sessionStorage, Session und cookies, und wann würde ich eines gegenüber dem anderen verwenden?

Answer 1

Genauere Anwendungsfall -

• Wenn Sie möchten, dass Ihre Seite immer einige Daten hält, die nicht vertraulich sind, können Sie localStorage verwenden.
• Wenn der Server einige Informationen wie Authentifizierungsschlüssel wissen muss, sollten Sie Cookies verwenden, um sie zu speichern.
• sessionStorage kann verwendet werden, um den Zustand der Benutzeroberfläche zu speichern, d.h. immer wenn Sie eine Seite besuchen, sie anpassen, eine andere Seite besuchen und zur gleichen Seite zurückkehren, möchten Sie die Seite so anzeigen, wie der Benutzer sie angepasst hat. Das ist ein guter Anwendungsfall für sessionStorage.

Answer 2

Local Storage: Es speichert die Benutzerinformationsdaten ohne Ablaufdatum. Diese Daten werden nicht gelöscht, wenn der Benutzer den Browser schließt, sondern bleiben für Tage, Wochen, Monate und Jahre verfügbar.

Im Local Storage können 5-10 MB Offline-Daten gespeichert werden.

// Wert in einem lokalen Speicherobjekt setzen
localStorage.setItem('name', myName);

// Wert aus dem Speicherobjekt abrufen
localStorage.getItem('name');

// Wert aus dem lokalen Speicherobjekt löschen
localStorage.removeItem(name);// Bestimmtes Objekt aus dem lokalen Speicher löschen
localStorage.clear();// Alles aus dem lokalen Speicher löschen

Session Storage: Es ist ähnlich wie der lokale Speicher, außer dass alle Daten gelöscht werden, wenn der Browser vom Benutzer geschlossen wird.

Im Session Storage können bis zu 5 MB Daten gespeichert werden.

// Wert zu einem Objekt im Session-Speicher setzen
sessionStorage.myNameInSession = "Krishna";

Sitzung: Eine Sitzung ist eine globale Variable, die auf dem Server gespeichert ist. Jede Sitzung erhält eine eindeutige ID, mit der gespeicherte Werte abgerufen werden können.

Cookies: Cookies sind Daten, die als Name-Wert-Paare in kleinen Textdateien auf Ihrem Computer gespeichert werden. Sobald ein Cookie gesetzt wurde, gibt jeder Seitenaufruf den Cookie-Namen und -Wert zurück.

Answer 3

LocalStorage:

• Web-Speicher kann vereinfacht als eine Verbesserung von Cookies betrachtet werden, die eine viel größere Speicherkapazität bieten. Die verfügbare Größe beträgt 5 MB, was wesentlich mehr Platz zum Arbeiten bietet als ein typisches 4 KB-Cookie.

• Die Daten werden nicht für jede HTTP-Anfrage (HTML, Bilder, JavaScript, CSS usw.) an den Server zurückgesendet, was den Datenverkehr zwischen Client und Server reduziert.

• Die in localStorage gespeicherten Daten bleiben bestehen, bis sie explizit gelöscht werden. Änderungen werden gespeichert und sind für alle aktuellen und zukünftigen Besuche auf der Website verfügbar.

• Es funktioniert nach demselben Ursprungsrichtlinie. Die gespeicherten Daten sind daher nur auf demselben Ursprung verfügbar.

Cookies:

• Wir können die Ablaufzeit für jedes Cookie festlegen.

• Das 4-KB-Limit gilt für das gesamte Cookie, einschließlich Name, Wert, Ablaufdatum usw. Um die Unterstützung der meisten Browser sicherzustellen, sollte der Name weniger als 4000 Byte betragen und die Gesamtgröße des Cookies weniger als 4093 Byte betragen.

• Die Daten werden für jede HTTP-Anfrage (HTML, Bilder, JavaScript, CSS usw.) an den Server zurückgesendet, was den Datenverkehr zwischen Client und Server erhöht.

sessionStorage:

• Es ist ähnlich wie localStorage.

• Änderungen sind nur pro Fenster (oder Tab in Browsern wie Chrome und Firefox) verfügbar. Die vorgenommenen Änderungen werden gespeichert und sind für die aktuelle Seite sowie für zukünftige Besuche auf derselben Website im gleichen Fenster verfügbar. Sobald das Fenster geschlossen wird, wird der Speicher gelöscht Die Daten sind nur innerhalb des Fensters/Tabs verfügbar, in dem sie festgelegt wurden.

• Die Daten sind nicht persistent, d.h., sie gehen verloren, sobald das Fenster/Tab geschlossen wird. Wie localStorage funktioniert es nach demselben Ursprungsprinzip. Daher sind die gespeicherten Daten nur auf demselben Ursprung verfügbar.

Answer 4

localStorage

1. Daten, die mit localStorage gespeichert werden, haben kein Ablaufdatum und werden nur durch JavaScript oder durch Löschen des Browser-Caches / Lokal gespeicherter Daten gelöscht.
2. Die Speichergrenze ist maximal.
3. Die in localStorage gespeicherten Daten bleiben erhalten, bis sie explizit gelöscht werden. Gemachte Änderungen werden gespeichert und sind für alle aktuellen und zukünftigen Besuche auf der Website verfügbar.
4. Es funktioniert nach dem Same-Origin-Policy-Prinzip. Daher sind die gespeicherten Daten nur auf demselben Ursprung verfügbar.

sessionStorage

1. Es speichert Daten nur für eine Sitzung, was bedeutet, dass die Daten gespeichert werden, bis der Browser (oder Tab) geschlossen wird.
2. Daten werden niemals an den Server übertragen.
3. Änderungen sind pro Fenster (oder Tab in Browsern wie Chrome und Firefox) verfügbar. Gemachte Änderungen werden gespeichert und sind für die aktuelle Seite sowie für zukünftige Besuche auf der Website im gleichen Fenster verfügbar. Sobald das Fenster geschlossen wird, wird der Speicher gelöscht.

Answer 5

Ich hätte erwartet, dass sessionStorage schneller ist, da es nicht auf die Festplatte schreiben muss (keine Persistenz). Aber meine einfachen Konsolentests zeigen, dass sie in der Leistung gleich sind

let item = 500000;
const start = Date.now();

while(item) {
  sessionStorage.setItem('testKey', item);
  item = parseInt(sessionStorage.getItem('testKey'));
  item--;
}

console.log('SessionStorage PERF: (niedriger ist besser)', Date.now() - start);

derselbe Code für den LocalStorage

let item = 500000;
const start = Date.now();

while(item) {
  localStorage.setItem('testKey', item);
  item = parseInt(localStorage.getItem('testKey'));
  item--;
}

console.log('LocalStorage PERF: (niedriger ist besser)', Date.now() - start);

Ergebnisse:

SessionStorage PERF: (niedriger ist besser) 2889
SessionStorage PERF: (niedriger ist besser) 2852
LocalStorage PERF: (niedriger ist besser) 2807
LocalStorage PERF: (niedriger ist besser) 2889