01_Cookie&WebStorage

1 Keks

Die Verwendung von Cookies muss auf dem Webserver basieren, da der Betrieb von Cookies der HTTP-Anfrage folgt.
Cookie, manchmal auch in seiner Pluralform Cookies verwendet. Der Typ ist eine „kleine Textdatei“, bei der es sich um Daten (normalerweise verschlüsselt) handelt, die von einigen Websites auf dem lokalen Terminal des Benutzers gespeichert werden, um die Identität des Benutzers zu identifizieren und eine Sitzungsverfolgung durchzuführen. Die Informationen werden vorübergehend oder dauerhaft vom Client-Computer des Benutzers gespeichert.
Mit „Cookie“ ist nicht die ursprüngliche Bedeutung von „Cookie“ gemeint, sondern eine einfache Textdatei, die im Client gespeichert wird. Diese Datei ist einem bestimmten Webdokument zugeordnet und speichert Informationen, wenn der Client auf das Webdokument zugreift. Diese Informationen stehen dem Dokument zur Verfügung wenn der Client erneut auf das Webdokument zugreift. Da „Cookies“ die magische Eigenschaft haben, auf dem Client-Computer gespeichert zu werden, können sie uns dabei helfen, die Funktion der Aufzeichnung persönlicher Daten der Benutzer zu realisieren, ohne komplexe CGI- und andere Programme zu verwenden.
Beispielsweise kann eine Website für jeden Besucher eine eindeutige ID generieren und diese dann in Form einer Cookie-Datei auf dem Computer jedes Benutzers speichern. Wenn Sie über einen Browser auf das Internet zugreifen, sehen Sie alle auf Ihrer Festplatte gespeicherten Cookies. Jede Datei in diesem Ordner ist eine Textdatei, die aus „Name/Wert“-Paaren besteht, und es gibt auch eine Datei, die Informationen über alle entsprechenden Websites enthält. Jede Cookie-Datei hier ist eine einfache und gewöhnliche Textdatei. Anhand des Dateinamens können Sie erkennen, welche Website das Cookie auf dem Computer platziert hat (natürlich werden die Site-Informationen auch in der Datei gespeichert).
Bei Cookies handelt es sich um kleine Textdaten mit einer Größe von maximal 4 KB, die aus einem Namen (Name), einem Wert (Value) und mehreren anderen optionalen Attributen bestehen, die zur Steuerung der Gültigkeitsdauer, Sicherheit und des Nutzungsumfangs von Cookies verwendet werden.

1.1 Die Rolle von Cookies

Für das Frontend können Cookies einige temporäre Daten speichern, diese zwischen Seiten teilen und weiterhin abgerufen werden, nachdem die Seite geschlossen und erneut geöffnet wurde.

1.2 Cookie-Format

document.cookieWir können eine reguläre Zeichenfolge erhalten , indem wir sie in der Konsole der Yuque-Website ausdrucken .
Wenn Sie im Browser die Cookies unter dem aktuellen Domainnamen anzeigen möchten, können Sie auch die Anwendung in den Entwicklertools auswählen und anzeigen.
Was wir auf der Konsole drucken, document.cookieist im Wesentlichen das Cookie der entsprechenden Anwendung.

1.3 Verwendung von Cookies

Cookies anzeigen

Wir können document.cookiezum Anzeigen verwenden. Da mit dieser Operation alle Cookies, aber kein einzelnes Cookie abgerufen werden können, müssen wir eine Funktion kapseln.

Cookies hinzufügen

Die einfachste Möglichkeit, Cookies hinzuzufügen, können wir verwenden

document.cookie="key=value"

Nachdem wir den obigen Code ausgeführt haben, können wir document.cookiein der Originalzeichenfolge sehen, dass es noch eine weitere gibtkey=value

Hinweis: Cookies erfordern die Hilfe eines Webservers. Seiten, die in Form von Dateien geöffnet werden, können keine Cookies verwenden.
Nach der Nutzung des Webservers können Sie sehen, welche Cookies wir normalerweise setzen.
Nach dem Setzen der Cookies document.cookiekönnen Sie die entsprechenden Cookies einsehen

1.4 Unterscheiden Sie zwischen Erstbesuchen

Cookie-Ablaufzeit

• Standardmäßig haben Cookies eine Ablaufzeit. Wenn die Cookie-Ablaufzeit nicht festgelegt ist, erhalten wir ein Sitzungscookie (Session Cookie), was bedeutet, dass das Cookie abläuft, wenn der Browser geschlossen wird.
• Wir können beim Setzen des Cookies auch die Ablaufzeit festlegen.

document.cookie="key=value;expires=标准的时间格式"

Es wird das Standardzeitformat übergebennew Date().toUTCString()

// 设置10天后过期
new Date(Date.now() + 10 * 24 * 60 * 60 * 1000).toUTCString()

1.5 Verwendung von js-cookies

Wir können Cookie-bezogene Vorgänge selbst kapseln, dieser Vorgang ist jedoch nicht sehr praktisch. Wir können Plug-Ins von Drittanbietern verwenden, um diese Probleme zu lösen.

Cookies hinzufügen

Cookies.set(key, value)

Cookies.set(key, value, {
    
    
	expires: 7 // 7天后过期 也可以写过期时间的日期对象
})

Holen Sie sich Cookie

Cookies.get(key) // 获取到单个的cookie
Cookies.get() // 获取到所有的cookie

Cookies löschen

Cookies.remove(key)

Cookies ändern

Cookies.set(已存在的key, 新的值)

2 Webspeicher

Warum Web Storage lernen?
Vor HTML5 verwendeten wir normalerweise Cookies zur Datenspeicherung, beispielsweise zum Speichern historischer Aktivitätsinformationen auf dem lokalen Gerät. Der Nachteil dieser Methode besteht jedoch darin, dass die Speicherplatzgröße nur etwa 4 KB beträgt und die gespeicherten Daten komplizierter zu analysieren sind.
Zu diesem Zweck schlägt HTML5 eine verwandte Lösung für Netzwerkspeicher vor, nämlich Web Storage.

2.1 Die Rolle des Webspeichers

Daten können lokal gespeichert werden, z. B. das Speichern von Benutzereinstellungen, der aktivierte Status von Kontrollkästchen, in Textfelder gefüllte Standardwerte usw. Wenn der Benutzer die Webseite im Browser aktualisiert, kann die Webseite einige der vom Benutzer vorgenommenen Änderungen über Web Storage erkennen, ohne dass der vom Benutzer geänderte Inhalt auf der Serverseite gespeichert werden muss.

Der Unterschied zwischen Web Storage und Cookies

• Ähnlich wie Cookies, aber im Vergleich zu Cookies, kann es den Netzwerkverkehr reduzieren, da die von Web Storage gespeicherten Daten nicht an den Server gesendet werden, während die von Cookies gespeicherten Daten automatisch vom Browser über HTTP-Anfragen an den Server gesendet werden.
• Das Speichern von Daten im Web Storage reduziert unnötige Datenübertragungen zwischen dem Browser und dem Server.

Web Storage enthält zwei Schlüsselobjekte, die beide Instanzen von Web Storage sind und die von der Web Storage-Schnittstelle bereitgestellten Methoden und Eigenschaften verwenden können.

• localStorage-Objekt: Wird für die lokale Speicherung verwendet.
• sessionStorage-Objekt: Wird für die regionale Speicherung verwendet.

Web Storage weist die folgenden 5 Eigenschaften auf

• Es ist bequem, Daten einzustellen und zu lesen.
• Die Kapazität ist groß und kann etwa 5 MB Daten speichern.
• Es können nur Zeichenfolgen gespeichert werden. Wenn Sie JSON-Objekte speichern möchten, können Sie die Methoden JSON.stringify() und JSON.parse() zum Serialisieren bzw. Deserialisieren verwenden.
• Lokale Daten sind sofort verfügbar. Mit dem Cache des Browsers können die gesamte Seite und die Daten lokal gespeichert werden. Das lokale Lesen von Daten ist viel schneller als das Abrufen von Daten vom Server über das Netzwerk, und der zwischengespeicherte Inhalt auf der Webseite kann sofort angezeigt werden.
• Daten können vorübergehend gespeichert werden. Oft müssen die Daten nur verwendet werden, während der Benutzer eine einzelne Seite durchsucht, und die Daten können verworfen werden, nachdem die Seite geschlossen wurde. In diesem Fall ist sessionStorage sehr praktisch.

2.2 lokaler Speicher

Die Hauptrolle von localStorage

Der lokale Speicher, der Daten in Form von Schlüssel-Wert-Paaren im Browser speichern kann, bleibt dort, bis der Benutzer oder das Skript die Daten aktiv löscht. Mit anderen Worten: Daten, die den lokalen Speicher nutzen, bleiben erhalten.

Der Unterschied zwischen localStorage und sessionStorage

• Der Lebenszyklus gespeicherter Daten ist unterschiedlich. locaStorage ist ein permanenter Speicher, während der Lebenszyklus von sessionStorage mit der Sitzung konsistent bleibt und die Daten verschwinden, wenn die Sitzung endet.
• Aus Hardware-Sicht werden LocalStorage-Daten auf der Festplatte gespeichert. Wenn Sie den Browser schließen, befinden sich die Daten immer noch auf der Festplatte. Sie können die von LocalStorage gespeicherten Daten weiterhin abrufen, wenn Sie den Browser erneut öffnen. Die sessionStorage-Daten werden im Speicher gespeichert. Wenn der Browser geschlossen wird, wird der Speicher automatisch gelöscht.

Vorteile von localStorage

Das 4-KB-Limit von Cookies wurde erweitert und die Daten der ersten Anfrage können direkt lokal gespeichert werden, mit einer Kapazität, die einer 5-MB-Datenbank entspricht.

localStorage weist auch einige Einschränkungen auf

• Der IE-Browser unterstützt localStorage nur in Version 8 oder höher.
• Die von verschiedenen Browsern gespeicherte Datenmenge ist nicht einheitlich.
• Derzeit beschränken alle Browser den Werttyp von localStorage auf den String-Typ. Häufig verwendete JavaScript-Objekttypen müssen zur Speicherung in Strings konvertiert werden.
• localStorage ist im privaten Modus des Browsers nicht lesbar.
• localStorage kann nicht von Webcrawlern gecrawlt werden.

Vom localStorage-Objekt bereitgestellte Methoden und Eigenschaften

Methoden/Eigenschaften	beschreiben
Schlüssel(n)	Mit dieser Methode wird der Name des n-ten Schlüssels im localStorage-Objekt zurückgegeben.
setItem(Schlüssel,Wert)	Diese Methode empfängt den Schlüsselnamen und den Wert als Parameter und speichert das Schlüssel-Wert-Paar in localStorage. Wenn der Schlüsselname vorhanden ist, wird der entsprechende Wert aktualisiert.
getItem (Schlüssel)	Diese Methode empfängt einen Schlüsselnamen als Parameter und gibt den dem Schlüsselnamen entsprechenden Wert zurück.
RemoveItem(Schlüssel)	Diese Methode löscht den Speicherinhalt mit dem Schlüsselnamen key
klar()	Diese Methode löscht alle Speicherinhalte
Länge	Diese Eigenschaft gibt die Anzahl der im localStorage-Objekt enthaltenen Elemente zurück.

Verwenden Sie Methoden des localStorage-Objekts, um Daten festzulegen, abzurufen und zu löschen

<input type="text" id="username">
<button id="setData">设置数据</button>
<button id="getData">获取数据</button>
<button id="delData">删除数据</button>
<script>
	var username = document.querySelector('#username');
	// 单击“设置数据”按钮，设置数据
	document.querySelector('#setData').onclick = function () {
      
      
		var val = username.value;    // 获取username里面的值
		localStorage.setItem('username', val);
	};
	// 单击“获取数据”按钮，获得数据
	document.querySelector('#getData').onclick = function () {
      
      
		alert(localStorage.getItem('username'));
	};
	// 单击“删除数据”按钮，删除数据
	document.querySelector('#delData').onclick = function () {
      
      
		localStorage.removeItem('username');
	};
</script>

2.3 Sitzungsspeicher

Funktionen von sessionStorage

• Die gespeicherten Daten sind nur innerhalb des Browser-Tabs gültig, in dem sich die aktuelle Webseite befindet. Solange der Browser-Tab nicht geschlossen ist, bleiben die Daten bestehen, auch wenn die Seite aktualisiert oder eine andere Seite aus derselben Quelle aufgerufen wird.
• Wenn der Browser-Tab geschlossen wird, werden die in sessionStorage gespeicherten Daten automatisch gelöscht.
• Wenn verschiedene Registerkarten geöffnet werden, auch für dieselbe Seite, ist das sessionStorage-Objekt unterschiedlich. Wenn Sie also möchten, dass Webseiten unter verschiedenen Registerkarten nicht voneinander auf Daten zugreifen können, können Sie die Daten in sessionStorage speichern.

Das sessionStorage-Objekt stellt auch einige Methoden und Eigenschaften bereit

Ähnlich den Methoden und Eigenschaften des localStorage-Objekts.

Legen Sie Daten mithilfe der Methoden des sessionStorage-Objekts fest

<input type="text" id="username">
<button id="setData">设置数据</button>
<script>
	var username = document.querySelector('#username');
	// 单击“设置数据”按钮，设置数据
	document.querySelector('#setData').onclick = function () {
      
      
		var val = username.value;           // 获取username里面的值
		sessionStorage.setItem('username', val);
	};
</script>

2.4 Web Storage-Ereignisüberwachung

Bedingungen für die Auslösung von Speicherereignissen

Wenn sich die mit Web Storage gespeicherten Daten ändern, wird das Speicherereignis des Fensterobjekts ausgelöst. Wir können dieses Ereignis abhören und einen Ereignishandler angeben. Wenn sich die in localStorage oder sessionStorage auf anderen Seiten gespeicherten Daten ändern, wird der Ereignishandler ausgeführt.

// window.addEventListener(事件名, 事件处理函数);
window.addEventListener('storage', function (event) {
    
    
	console.log(event.key);
});

Die Ereignisverarbeitungsfunktion empfängt ein Ereignisobjekt als Parameter und das Schlüsselattribut des Ereignisobjekts speichert den Schlüsselnamen der geänderten Daten.

Eigenschaften des Ereignisobjekts

Attribute	beschreiben
event.key	Rufen Sie den geänderten Datenschlüsselwert in sessionStorage oder localStorage ab
event.oldValue	Rufen Sie den Wert vor der Änderung in sessionStorage oder localStorage ab
event.newValue	Rufen Sie den geänderten Wert in sessionStorage oder localStorage ab
event.url	Rufen Sie die Seiten-URL-Adresse des Werts in sessionStorage oder localStorage ab
event.storageArea	Rufen Sie das geänderte sessionStorage-Objekt oder localStorage-Objekt ab

Das Speicherereignis wird auf der aktuellen Seite nicht ausgelöst, was zu Datenänderungen führt.
Wenn der Browser mehrere Seiten unter einem Domänennamen gleichzeitig öffnet und eine der Seiten die SessionStorage- oder LocalStorage-Daten ändert, werden die Speicherereignisse aller anderen Seiten ausgelöst, und das Speicherereignis wird nicht von der Originalseite ausgelöst . Durch diesen Mechanismus kann die Kommunikation zwischen mehreren Seiten erreicht werden.
Da sessionStorage auf Webseiten verschiedener Registerkarten nicht voneinander auf Daten zugreifen kann, kann die Seite bei Verwendung des Speicherereignisses in <iframe>dem von der Registerkarte erstellten Frame platziert werden. Zu diesem Zeitpunkt können die Datenänderungen des sessionStorage der äußeren Seite erfolgen wird durch das Speicherereignis im Frame überwacht.

Verwenden Sie Speicherereignisse, um Daten auf der Seite zu überwachen

<!--index01.html-->
<label>用户名：</label> <input type="text" id="username">
<button id="save">保存</button>
<script>
	var username = document.querySelector('#username');
	// 单击“保存”按钮，设置数据
	document.querySelector('#save').onclick = function () {
      
      
		var val = username.value;    // 获取username里面的值
		localStorage.setItem('username', val);
	};
</script>

<!--index02.html-->
<span>新的用户名:</span>
<span id="newval"></span>
<br>
<span>旧的用户名:</span>
<span id="oldval"></span>
<script>
	var newdata = document.getElementById('newval');
	var olddata = document.getElementById('oldval');
	window.addEventListener('storage', function (e) {
      
      
		newdata.innerHTML = e.newValue;     // 设置元素的内容为修改后的值
		olddata.innerHTML = e.oldValue;        // 设置元素的内容为修改前的值
	});
</script>

3 Unterschiede zwischen Cookies und WebStorage

• Cookie-Daten werden immer (auch wenn sie nicht benötigt werden) in HTTP-Anfragen vom gleichen Ursprung (gleiches Protokoll, gleicher Host, gleicher Port) übertragen und zwischen dem Browser und dem Server hin- und hergereicht; die ersten beiden gehören zu HTML5 WebStorage und Sie werden erstellt, um die Speicherung von Client-Daten zu erleichtern.
• Speichergröße: Die Größe der Cookie-Daten darf 4 KB nicht überschreiten. Obwohl sessionStorage und localStorage ebenfalls Speichergrößenbeschränkungen haben, sind sie viel größer als Cookie und können 5 MB oder mehr erreichen.
• Gültigkeitsdauer: localStorage speichert persistente Daten. Die Daten gehen nach dem Schließen des Browsers nicht verloren, es sei denn, die Daten werden aktiv gelöscht. sessionStorage-Daten werden gelöscht, wenn die Seitensitzung endet. Die Seitensitzung wird beibehalten, während der Browser geöffnet ist. Durch das erneute Laden oder Wiederherstellen der Seite wird die ursprüngliche Seitensitzung beibehalten. Durch das Öffnen einer Seite in einem neuen Tab oder Fenster wird eine neue Sitzung im Browserkontext der obersten Ebene initialisiert. Ein von einem Cookie gesetzter Cookie bleibt bis zu seinem Ablaufdatum gültig, auch wenn das Fenster oder der Browser geschlossen wird.
• Geltungsbereich: sessionStorage gibt Daten nur im selben Fenster (oder Tab) derselben Quelle frei, also nur in der aktuellen Sitzung. localStorage wird von allen Ursprungsfenstern gemeinsam genutzt. Cookies werden von allen Ursprungsfenstern gemeinsam genutzt.