Localstorage verstehen: Die Geheimnisse dieser mysteriösen Datei aufdecken

LocalStorage entschlüsseln: Was ist diese mysteriöse Datei?

Mit der Entwicklung des Internets wird die Webentwicklung immer häufiger und auch die persönlichen Informationen und Daten der Menschen werden in großem Umfang in Browsern gespeichert. Und eine der mysteriösen Dateien ist LocalStorage. Was genau ist LocalStorage? In diesem Artikel werden wir die Prinzipien und die Verwendung von LocalStorage entschlüsseln und spezifische Codebeispiele bereitstellen.

LocalStorage ist ein vom Browser bereitgestellter Webspeichermechanismus, der Schlüssel-Wert-Paardaten im Browser speichern und abrufen kann. Im Vergleich zu herkömmlichen Cookies verfügt LocalStorage über eine größere Speicherkapazität (normalerweise 5 MB) und eine längere Speicherdauer (permanente Speicherung). Ohne Ablaufzeit bleiben LocalStorage-Daten immer im Browser des Benutzers vorhanden und werden auch dann nicht gelöscht, wenn der Browser geschlossen wird.

LocalStorage ist sehr einfach zu verwenden. Wir können JavaScript verwenden, um LocalStorage zu betreiben, Schlüssel-Wert-Paardaten über die Methode setItem() festzulegen, Daten über die Methode getItem() abzurufen und Daten über die Methode removeItem() zu löschen. Hier sind einige grundlegende Beispielcodes:

// LocalStorage-Daten festlegen
localStorage.setItem('name', 'David');
localStorage.setItem('age', '28');

// LocalStorage-Daten abrufen
console.log(localStorage.getItem('name')); // Ausgabe: David
console.log(localStorage.getItem('age')); // Ausgabe: 28

// LocalStorage-Daten löschen
localStorage.removeItem ('name');
console.log(localStorage.getItem('name')); // Ausgabe: null

LocalStorage kann nicht nur Daten vom Typ String, sondern auch andere grundlegende Datentypen wie Zahlen und Boolesche Werte speichern warten. LocalStorage kann auch Objekttypdaten speichern. Konvertieren Sie das Objekt einfach in das JSON-Format. Der Beispielcode lautet wie folgt:

//Set LocalStorage-Objektdaten
var user = {
Name: 'David',
Alter: 28,
E-Mail: 'david@example.com'
};
localStorage.setItem( 'user' , JSON.stringify(user));

// LocalStorage-Objektdaten abrufen
var protectedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); Ausgabe: David
console.log(storedUser.age); // Ausgabe: 28
console.log(storedUser.email); // Ausgabe: david@example.com

LocalStorage-Daten werden in Domänennameneinheiten gespeichert, verschiedene LocalStorage Daten unter einem Domainnamen sind unabhängig. Dies bedeutet, dass Webseiten unter verschiedenen Domänennamen im selben Browser keine LocalStorage-Daten gemeinsam nutzen können. Dies dient dem Schutz der Privatsphäre und Sicherheit der Benutzer.

Neben dem einfachen Festlegen und Abrufen von Daten kann LocalStorage auch Datenänderungen überwachen. Über die Methode addEventListener() können wir LocalStorage einen Änderungsereignis-Listener hinzufügen. Wenn sich die Daten in LocalStorage ändern, wird das Ereignis ausgelöst. Der Beispielcode lautet wie folgt:

// LocalStorage-Datenänderungen überwachen
window.addEventListener('storage', function(e) {
console.log('LocalStorage-Datenänderungen:', e.key, e.newValue);
}) ;

//Lokalspeicherdaten ändern
localStorage.setItem('name', 'Emily');
//Konsolenausgabe: LocalStorage-Datenänderung: Name Emily

Zusammenfassung: LocalStorage ist ein mysteriöser und leistungsstarker Webspeichermechanismus , das Daten im Browser speichern und abrufen kann. Die Verwendung von LocalStorage ist sehr einfach und Daten können einfach über die Methoden setItem(), getItem() und removeItem() manipuliert werden. LocalStorage-Daten werden in Domänennameneinheiten gespeichert, und LocalStorage-Daten unter verschiedenen Domänennamen sind unabhängig. Änderungen in LocalStorage-Daten können über die Methode addEventListener() überwacht werden. Die Verwendung von LocalStorage kann Entwicklern helfen, Daten bequemer zu speichern und zu verwalten und eine bessere Benutzererfahrung zu bieten. Ich hoffe, dieser Artikel hilft Ihnen beim Entschlüsseln von LocalStorage!

Das obige ist der detaillierte Inhalt vonLocalstorage verstehen: Die Geheimnisse dieser mysteriösen Datei aufdecken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!