HTML5 -Webspeicher

if (modernizr.localstorage) { // Verwenden Sie das Lokalstorage -Objekt, um Daten zu speichern } else { alert ('können Benutzereinstellungen nicht speichern, da Ihr Browser den lokalen Speicher nicht unterstützt “); } Mit dem SetItem ("Schlüssel", "Wert") können wir die Daten in den lokalen Speicher schreiben. Die Ausnahme von quota_exceeded_err wird ausgeworfen, wenn das Speicherlimit 5 MB überschreitet. Daher ist es immer besser, dem Speichercode Try/Fangblöcke hinzuzufügen, während Sie Daten speichern.

<span>function setSettings() {
</span><span>if ('localStorage' in window && window['localStorage'] !== null) {
</span>	<span>try {
</span>		<span>var favcolor = document.getElementById('favcolor').value;
</span>		<span>var fontwt = document.getElementById('fontwt').value;
</span>		<span>localStorage.setItem('bgcolor', favcolor);
</span>		<span>localStorage.fontweight = fontwt;
</span>	<span>} catch (e) {
</span>		<span>if (e == QUOTA_EXCEEDED_ERR) {
</span>			<span>alert('Quota exceeded!');
</span>		<span>}
</span>	<span>}
</span>	<span>} else {
</span>		<span>alert('Cannot store user preferences as your browser do not support local storage');
</span>	<span>}
</span><span>}</span>

Wir können überprüfen, ob die Daten im lokalen Speicher mithilfe der mit den Browsern gelieferten Entwickler -Tools gespeichert werden. Klicken Sie beispielsweise in Chrom in Chrome mit der rechten Maustaste auf den Browser und wählen Sie das Element inspizieren. Wählen Sie die Registerkarte Ressourcen und klicken Sie dann auf das lokale Speicherelement. Wir können den von Benutzer ausgewählten Daten in Form von Schlüssel-/Wertpaaren sehen. Die Webseite kann mit den vom Benutzer festgelegten Hintergrund- und Schriftgrößenwerten neu geladen werden. Das GetItem („Schlüssel“) hilft beim Abrufen der in der Datenbank gespeicherten Daten.

<span>function applySetting() {
</span>	<span>if (localStorage.length != 0) {
</span>	<span>document.body.style.backgroundColor = localStorage.getItem('bgcolor');
</span>	<span>document.body.style.fontSize = localStorage.fontweight + 'px';
</span>	<span>document.getElementById('favcolor').value = localStorage.bgcolor;
</span>	<span>document.getElementById('fontwt').value = localStorage.fontweight;
</span>	<span>} else {
</span>	<span>document.body.style.backgroundColor = '#FFFFFF';
</span>	<span>document.body.style.fontSize = '13px'
</span>	<span>document.getElementById('favcolor').value = '#FFFFFF';
</span>	<span>document.getElementById('fontwt').value = '13';
</span>	<span>}
</span><span>}</span>

Die Längenfunktion ruft die Gesamtzahl der Werte im Speicherbereich ab. Die obige Funktion kann während des Onload -Ereignisses des Body -Tags wie folgt aufgerufen werden Der lokale Speicherbereich kann mithilfe der Funktion clear () oder removeItem („Schlüssel“) gelöscht werden. Funktion. In unserem Beispiel wird die folgende Funktion auf dem Klickereignis der Schaltfläche "Löschen" aufgerufen.

<span>function clearSettings() {
</span>		<span>localStorage.removeItem("bgcolor");
</span>		<span>localStorage.removeItem("fontweight");
</span>		<span>document.body.style.backgroundColor = '#FFFFFF';
</span>		<span>document.body.style.fontSize = '13px'
</span>		<span>document.getElementById('favcolor').value = '#FFFFFF';
</span>		<span>document.getElementById('fontwt').value = '13';
</span>
<span>}</span>

Speichereignisse

Wenn wir Daten aus dem Webspeicher festlegen oder entfernen, wird ein Speicherereignis auf das Fensterobjekt abgefeuert. Wir können die Hörer zum Ereignis hinzufügen und bei Bedarf die Speicheränderungen umgehen.

<span>window.addEventListener('storage', storageEventHandler, false);
</span>	<span>function storageEventHandler(event) {
</span>			<span>applySetting();
</span>	<span>}</span>

Das Ereignisobjekt hat die folgenden Attribute

• Schlüssel - die Eigenschaft, die sich geändert hat
• newValue - der neu festgelegte Wert
• OldValue - zuvor gespeicherter Wert
• URL - Der vollständige URL -Pfad, von dem das Ereignis aus
stammt
• Storagearea - Lokalstor- oder SessionStorage -Objekt

Denken Sie daran, dass das Ereignis nur auf andere Fenster abgefeuert wird (nicht auf dem Fenster, in dem das Ereignis ausgelöst wird) und das Ereignis nicht abgefeuert wird, wenn sich die Daten nicht ändern. Die gleichen API -Methoden gelten auch für die Sitzungspeicherung, außer dass die Methoden im SessionStorage -Objekt ausgeführt werden sollten.

Schlussfolgerung

Jetzt können Sie den Webspeicher verwenden, um Benutzereinstellungen, Benutzerinformationen, Sitzungsinformationen usw. zu speichern. Sie können auch versuchen, Apps zu erstellen, die vollständig offline verwendet werden können. Wenn der Benutzer wieder online ist.

häufig gestellte Fragen (FAQs) zu HTML5 Web Storage

Was ist der Unterschied zwischen SessionStorage und LocalStorage im HTML5 -Webspeicher? Der Hauptunterschied zwischen ihnen liegt in ihrer Lebensdauer und ihrem Umfang. SessionStorage ist für die Dauer einer einzelnen Browser -Sitzung ein temporärer Speicher. Es wird gelöscht, sobald die Sitzung endet, d. H. Wenn der Benutzer die Registerkarte oder das Fenster Browser schließt. Andererseits bestehen LocalStorage, auch wenn der Browser geschlossen und wiedereröffnet wird. Es hat keine Ablaufzeit und bleibt, bis es vom Benutzer oder der Webanwendung manuell gelöscht wird. Webspeicher ist unkompliziert. Sie können die Methode setItem () verwenden, um Daten zu speichern, GetItem () -Methoden zu abrufen und Daten zu entfernen, um Daten zu löschen. Um beispielsweise ein Datenelement in LocalStorage zu speichern, können Sie LocalStorage.setItem („Schlüssel“, „Wert“) verwenden. Verwenden Sie zum Abrufen dieser Daten localStorage.getItem („Schlüssel“). Um die Daten zu löschen, verwenden Sie localStorage.removeItem („Schlüssel“).

Ist HTML5 -Webspeicher sicher? Es ermöglicht keine Speicherung sensibler Benutzerinformationen wie Passwörter oder Kreditkartennummern. Es ist jedoch anfällig für Skriptangriffe (Cross-Site). Daher wird empfohlen, sensible Informationen nicht zu speichern und Ihre Daten immer zu validieren und zu sanieren, bevor Sie sie speichern. zwischen verschiedenen Browsern. Die meisten modernen Browser bieten jedoch rund 5 MB Speicher pro Domäne für LocalStorage an. SessionStorage bietet auch den gleichen Speicherbetrag, aber es ist wichtig, sich daran zu erinnern, dass dieser Speicher vorübergehend ist. einschließlich Chrome, Firefox, Safari, Opera und Internet Explorer 8 und höher. Es ist jedoch immer eine gute Praxis, die Kompatibilität der Browser zu überprüfen, bevor Sie sie verwenden.

Wie kann ich überprüfen, ob ein Browser den HTML5 -Webspeicher unterstützt? If (typeof (speicher)! == "undefined") {// Code für LocalStorage/SessionStorage. } else {// sorry! Kein Webspeicherunterstützung ..}

Kann ich Objekte oder Arrays im HTML5 -Webspeicher speichern? Da Webspeicher jedoch nur Stringwerte unterstützt, müssen Sie Ihre Objekte oder Arrays mit jSON.Stringify () in Zeichenfolgen konvertieren, bevor Sie sie speichern. Um sie abzurufen, können Sie sie mit jSON.Parse () in Objekte oder Arrays umwandeln.

Wie kann ich alle Daten im HTML5 -Webspeicher löschen? Webspeicher mit der Methode clear (). Um beispielsweise alle Daten in LocalStorage zu löschen, können Sie LocalStorage.Clear () verwenden.

Kann ich den HTML5 -Webspeicher für Offline -Anwendungen verwenden? Offline -Anwendungen. Sie können Daten im Browser des Benutzers speichern, auf die dann zugegriffen und auch dann verwendet werden kann, wenn der Benutzer offline ist. zum HTML5 -Webspeicher, einschließlich Cookies, IndexedDB und Web SQL. Jedes von diesen hat jedoch seine eigenen Vor- und Nachteile, und die Wahl hängt von den spezifischen Anforderungen Ihrer Webanwendung ab.

Das obige ist der detaillierte Inhalt vonHTML5 -Webspeicher. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!