Mit der Entwicklung des Internets verwenden wir zunehmend Browser zum Surfen im Internet, zum Einkaufen, zum Anmelden und für andere Vorgänge. In diesen Prozessen hören wir oft ein Wort – Cookie. Was genau sind Cookies? Welche Funktion hat es? Heute werden wir das Geheimnis der Cookie-Speicherung lüften, die Interaktion zwischen Browser und Server im Detail analysieren und konkrete Codebeispiele geben.
1. Was sind Cookies?
Einfach ausgedrückt ist ein Cookie ein kleines Datenelement, das vom Server an den Browser gesendet und lokal gespeichert wird. Jedes Mal, wenn der Browser eine Anfrage an denselben Server stellt, werden die zuvor gespeicherten Cookie-Daten übermittelt. In diesem Fall kann der Server die Cookie-Daten im Browser lesen und basierend auf den darin enthaltenen Informationen entsprechende Vorgänge ausführen.
2. Die Rolle von Cookies
Durch Cookies kann der Server den Benutzer identifizieren und den Sitzungsstatus des Benutzers beibehalten, wenn der Benutzer die Website erneut besucht. Wenn wir uns beispielsweise anmelden, sendet der Server ein Cookie mit unseren Anmeldeinformationen an den Browser, sodass der Server uns bei einem erneuten Besuch der Website wie beim letzten Mal wiedererkennen und uns automatisch anmelden kann.
Durch Cookies kann der Server einige der persönlichen Gewohnheiten und Vorlieben des Benutzers sowie andere Informationen abrufen und so den Benutzern personalisiertere Dienste und Vorschläge bieten. Wenn wir beispielsweise eine Einkaufswebsite durchsuchen, empfiehlt der Server verwandte Produkte basierend auf unseren vorherigen Kaufaufzeichnungen und unserem Browserverlauf.
Durch Cookies kann der Server die Surfgewohnheiten des Benutzers verfolgen, um relevante Analysen und Statistiken durchzuführen. Ein Werbeunternehmen kann beispielsweise Cookies verwenden, um Informationen wie die Zeit und Häufigkeit der Besuche von Benutzern auf verschiedenen Websites zu verfolgen, um die Interessen und Kaufwünsche der Benutzer zu verstehen und Werbetreibenden bessere Werbedienstleistungen anzubieten.
3. Interaktion zwischen Browser und Server
Die Speicherung und Erfassung von Cookies erfolgt zwischen Browser und Server. Der gesamte Interaktionsprozess kann in die folgenden vier Schritte unterteilt werden:
Um diesen Prozess besser zu verstehen, schauen wir uns ein konkretes Beispiel an.
(1) Servercode-Beispiel
Das Folgende ist ein Servercode, der mit dem Node.js-Framework geschrieben wurde, um eine Antwort mit Cookie-Informationen an den Browser zu senden.
const http = require('http');
http.createServer((req, res) => {
//设置cookie
res.writeHead(200, {
'Set-Cookie': 'name=cookie_test; max-age=60'
});
//发送响应
res.end('Hello World!
');
}).listen(8080);
console.log('Server running at http://localhost:8080/');Code-Analyse:
(2) Beispiel für einen Browsercode
Das Folgende ist ein in JavaScript geschriebener Browsercode, der eine Anfrage an den oben genannten Server sendet und Cookie-Informationen ausgibt, wenn die Antwort empfangen wird.
// 发送请求
fetch('http://localhost:8080')
.then(response => {
// 读取cookie
console.log(response.headers.get('Set-Cookie'));
return response.text();
})
.then(data => {
console.log(data);
})
.catch(error => console.error(error));Code-Analyse:
4. Gemeinsame Attribute von Cookies
Zusätzlich zu dem im obigen Beispiel verwendeten Attribut für das maximale Alter haben Cookies viele weitere Attribute. Allgemeine Attribute sind wie folgt:
Dieses Attribut gibt den Pfad des Cookies an. Wenn der Browser eine Anfrage initiiert, wird das Cookie nur dann übermittelt, wenn der Anfragepfad genau mit dem Cookie-Pfad übereinstimmt.
res.writeHead(200, {
'Set-Cookie': 'name=value; Path=/test'
});Dieses Attribut gibt den Domänennamen des Cookies an. Wenn der Browser eine Anfrage initiiert, wird das Cookie nur dann eingefügt, wenn der angeforderte Domänenname genau mit dem Domänennamen des Cookies übereinstimmt.
res.writeHead(200, {
'Set-Cookie': 'name=value; Domain=.example.com'
});Dieses Attribut gibt die Gültigkeitsdauer des Cookies an. Nachdem dieses Attribut gesetzt ist, läuft das Cookie zum angegebenen Zeitpunkt automatisch ab und wird vom Browser gelöscht.
res.writeHead(200, {
'Set-Cookie': 'name=value; Expires=Wed, 18 Nov 2020 08:51:29 GMT'
});Dieses Attribut gibt an, ob das Cookie nur über das https-Protokoll gesendet werden kann. Nach dem Setzen dieses Attributs wird das Cookie nur dann abgerufen, wenn eine https-Anfrage gestellt wird.
res.writeHead(200, {
'Set-Cookie': 'name=value; Secure'
});Dieses Attribut gibt an, ob das Cookie nur über das http-Protokoll gesendet werden kann. Nach dem Setzen dieses Attributs kann der Browser die Cookie-Informationen nicht über JavaScript abrufen, wodurch die Cookie-Sicherheit verbessert wird.
res.writeHead(200, {
'Set-Cookie': 'name=value; HttpOnly'
});5. Zusammenfassung
Durch die Einleitung dieses Artikels haben wir etwas über die Definition, Funktion, Speichermethode und gemeinsame Eigenschaften von Cookies erfahren. Gleichzeitig lernten wir auch das Cookie-Interaktionsmodell zwischen Browser und Server kennen und vertieften unser Verständnis von Cookies anhand spezifischer Codebeispiele. Als Front-End-Ingenieur sollten wir über ein tiefgreifendes Verständnis und eine Beherrschung des Cookie-bezogenen Wissens verfügen, um es flexibler und effizienter in der tatsächlichen Entwicklung anwenden zu können.
Das obige ist der detaillierte Inhalt vonDas Geheimnis der Cookie-Speicherung wurde gelüftet: eine detaillierte Erklärung der Interaktion zwischen Browser und Server. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
