suchen

Heim >Web-Frontend >js-Tutorial >Tutorial zum Lesen und Schreiben von Cookies in JavaScript

Tutorial zum Lesen und Schreiben von Cookies in JavaScript

小云云
小云云Original
2018-01-31 09:24:301475Durchsuche

Dieser Artikel stellt hauptsächlich die relevanten Wissenspunkte zum Lesen und Schreiben von Cookies anhand von Beispielen vor. Freunde, die dies benötigen, können darauf verweisen.

Lassen Sie uns zunächst kurz die Cookies verstehen.

Beim Erstellen von Webseiten müssen wir häufig Informationen von einer Seite auf eine andere übertragen Bedarf Der Cookie-Mechanismus in JavaScript wird verwendet. Einfach ausgedrückt stellen Cookies eine bequeme Möglichkeit dar, kleine Datenmengen auf dem Computer des Benutzers zu speichern und aus der Ferne abzurufen, sodass Websites Details wie die Gewohnheitseinstellungen des Benutzers oder den Zeitpunkt des letzten Besuchs auf der Website speichern können. Das Cookie selbst ist eine kurze Information, die von der Seite auf dem Computer des Benutzers gespeichert und dann von anderen Seiten gelesen werden kann. Grundsätzlich sind Cookies so eingestellt, dass sie nach einer bestimmten Zeit ablaufen.

Natürlich haben Cookies auch Einschränkungen: Browser haben eine Begrenzung der Anzahl der Cookies, die gespeichert werden können, normalerweise einige Hundert oder mehr. Unter normalen Umständen sind pro Domänenname 20 Cookies zulässig, und jede Domäne kann bis zu 4 KB an Cookies speichern. Zusätzlich zu den Problemen, die durch Größenbeschränkungen verursacht werden können, gibt es auch viele Gründe, die dazu führen können, dass Cookies auf der Festplatte gespeichert werden verschwinden, z. B. wenn das Ablaufdatum erreicht ist oder der Benutzer die Cookie-Informationen gelöscht oder zu einem anderen Browser gewechselt hat. Daher sind Cookies nicht zum Speichern wichtiger Daten geeignet. Beim Schreiben von Code müssen Sie auch berücksichtigen, wie mit Ausnahmen bei der Cookie-Erfassung umgegangen wird.

Verwenden Sie in JavaScript das Cookie-Attribut des Dokumentobjekts, um Cookies zu speichern und abzurufen. Normalerweise sind die Informationen in document.cookie eine Zeichenfolge, die aus Namens- und Wertepaaren besteht, und jedes Datenpaar befindet sich im Formular:


name=value;

Nachfolgend zeigen wir anhand eines einfachen Beispiels, wie man Cookies in JavaScript liest und schreibt.

Das erste ist createCookie html , auf dieser Seite wird ein Cookie erstellt. Der vollständige Code lautet wie folgt: 


<html>
<head>
  <title>createCookie</title>
  <script>
    function createCookie(){
      //get name and password
      var name = document.getElementById("name").value;
      var pwd = document.getElementById("pwd").value;
      //create cookie
      document.cookie = name+&#39;|&#39;+pwd;
      //go to showCookie.html page
      window.location.href = "showCookie.html";
    }
  </script>
</head>
<body>
  Userame:  <input id="name" type="text" /><br><br>
  Password:  <input id="pwd" type="password" /><br><br>
  <button onclick="createCookie()">Submit</submit>
</body>
</html>

Der Screenshot der Seite lautet wie folgt:

Klicken Sie auf die Schaltfläche „Senden“, ein Cookie wird erstellt, die Informationen zu Benutzername und Passwort werden im Cookie gespeichert und es wird zur Seite showCookie.html gesprungen. Darunter lautet der vollständige Code der Seite showCookie.html wie folgt: 


<html>
<head>
  <title>showCookie</title>
  <script>
    function showCookie(){
      //document.cookie is a string, using split() function to get cookie date in array form 
      var arr = document.cookie.split(&#39;|&#39;);
      //processing data in cookie
      var cookie_info = &#39;Data in cookie:<br>username is:  &#39;+arr[0]+"<br>password is:  "+arr[1]+&#39;<br>&#39;;
      //set content of element of id "res"
      document.getElementById("res").innerHTML = cookie_info;
    }
  </script>
</head>
<body>
  <button onclick="showCookie()">Show Cookie</button>
  <p id="res"></p>
</body>
</html>

Der Screenshot der Seite lautet wie folgt:

Klicken Sie auf „Anzeigen“. Die Schaltfläche „Cookie“ zeigt die Informationen im Cookie an.

Als nächstes führen wir dieses Programm lokal und auf dem Server aus und führen dieses Programm jeweils im IE-Browser und im Chrome-Browser aus, um die Funktionsweise von Cookies zu sehen.

Zuerst führen wir dieses Programm lokal aus und legen die beiden oben genannten Dateien auf dem Laufwerk E ab. Führen Sie es zuerst im IE-Browser aus, geben Sie die Informationen auf der Seite „createCookie.html“ ein und klicken Sie auf die Schaltfläche „Senden“. Der Screenshot sieht wie folgt aus:

Nach dem Sprung zum showCookie .html-Seite, klicken Sie auf die Schaltfläche „Cookie anzeigen“. Der Seiten-Screenshot sieht wie folgt aus:

Cookies werden normalerweise im IE-Browser in der lokalen Umgebung ausgeführt.

Als nächstes sehen wir uns an, wie es im Chrome-Browser funktioniert. Öffnen Sie zunächst die Seite „createCookie.html“ im Chrome-Browser, geben Sie die Informationen ein und klicken Sie auf die Schaltfläche „Senden“.

Nachdem Sie zur Seite showCookie.html gesprungen sind, klicken Sie auf die Schaltfläche „Cookie anzeigen“. Der Screenshot der Seite sieht wie folgt aus:

Dasselbe Verfahren, dieses Mal befindet sich das Cookie in Chrome. Die Ausführung im Browser ist fehlgeschlagen.

Dann müssen wir dieses Programm auf dem Server ausführen, den Apache-Server öffnen und die beiden oben genannten HTML-Dateien im htdocs-Ordner unter dem xampp-Installationsordner ablegen (die spezifische Betriebsmethode kann sein). Weitere Informationen finden Sie in diesem Blog: AJAX mit JavaScript verwenden (für Anfänger). Wir führen nun das Programm im IE-Browser aus und geben die URL im IE-Browser ein: http://localhost/createCookie...:

Klicken Sie auf die Schaltfläche „Senden“, um zu springen Gehen Sie zur Seite showCookie.html und klicken Sie auf die Schaltfläche „Cookie anzeigen“. Der Screenshot sieht wie folgt aus:

Dann geben wir die URL in den Chrome-Browser ein: http://localhost /createCookie... :

Klicken Sie auf die Schaltfläche „Senden“, springen Sie zur Seite „showCookie.html“ und klicken Sie auf die Schaltfläche „Cookie anzeigen“. Der Screenshot sieht wie folgt aus:

Dieses Mal in der Serverumgebung , IE-Browser- und Chrome-Browser-Cookies funktionieren einwandfrei!

Verwandte Empfehlungen:

JavaScript-Implementierungsmethode zum Lesen und Schreiben von Cookies

jQuery implementiert das Ersetzen durch Schreiben von Cookies im Webseitenhintergrund method_jquery

Cookie-JavaScript-Codebibliothek schreiben cookieLibrary.js_javascript-Fähigkeiten


Das obige ist der detaillierte Inhalt vonTutorial zum Lesen und Schreiben von Cookies in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung der Kapselung gängiger JavaScript-ToolklassenNächster Artikel：Ausführliche Erläuterung der Kapselung gängiger JavaScript-Toolklassen

In Verbindung stehende Artikel

Mehr sehen