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!