LocalStorage VS SessionStorage VS Cookie

	Cookies	LocalStorage	SessionStorage
Capacity	4kb	5-10 MBs (Browser Dependent)	5 MBs
Accessibility	All windows	All windows	Private to tab
Expiration	Manually Set	Never expires	On tab close
Passed in request	Yes	No	No
Storage	Browser and Server	Browser Only	Browser Only

Anwendung

Wie Sie den Hauptunterschied in der obigen Tabelle sehen können. Hier ist die Anwendung jedes Speichertyps:

1. LocalStorage – Normalerweise laufen Daten nie ab und müssen nicht vertrauliche Daten wie Benutzereinstellungen, Anwendungsstatus usw. speichern.
2. SessionStorage – Daten sind für den Tab privat und verfallen, sobald Sie das Fenster oder den Tab schließen. Geeignet zum Speichern temporärer Daten, die nur bestehen bleiben müssen, während ein Benutzer durch eine einzelne Registerkarte navigiert (z. B. Formulardaten vor dem Absenden).
3. Cookie – Die Speicherkapazität ist sehr gering und die Daten erfordern möglicherweise vom Server wie Authentifizierungstoken oder Benutzereinstellungen.

Syntax

Plätzchen?

// below snippet will set username as key ?
// Johndoe as value ?
// will set expiry date for the cookie which is 31 Dec 2024
// path (cookie available to entire website)
// if no path specified then cookie will be available to that particular site which created that cookie
// you can delete the cookie by setting? the date that already expired (any previous date)
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

Keks lesen

console.log(document.cookie) // Outputs all cookies? as a string

Sitzungsspeicher?

sessionStorage.setItem('sessionData', 'temporaryValue');
let sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData); // Outputs: temporaryValue

entfernen und räumen

sessionStorage.removeItem('sessionData'); // it will only remove particular key
sessionStorage.clear(); // clean the whole storage

Lokaler Speicher?

Die meisten gemeinsamen Speichertypen und alle Funktionen ähneln dem Sitzungstyp.

//set item
localStorage.setItem('username', 'JohnDoe');
// get itme
let username = localStorage.getItem('username');
console.log(username); // Outputs: JohnDoe
// remove item with key-value
localStorage.removeItem('username');
// reset store
localStorage.clear();

LinkedIn ? ❤

Das obige ist der detaillierte Inhalt vonLocalStorage VS SessionStorage VS Cookie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!