Setze und lösche ein Cookie in jQuery

Habdul Hazeez 21 Juni 2023
  1. Cookie erstellen und löschen mit jquery-cookie in jQuery
  2. Erstellen und löschen Sie ein Cookie mit einer benutzerdefinierten Funktion in jQuery
Setze und lösche ein Cookie in jQuery

Dieser Artikel lehrt zwei Beispiele, wie man ein Cookie mit jQuery setzt und löscht. Im ersten Beispiel verwenden Sie ein Plugin namens jquery-cookie, das Sie von GitHub erhalten können.

Das zweite Beispiel verwendet eine benutzerdefinierte Funktion zum Erstellen und Löschen des Cookies.

Das Plugin jquery-cookie ermöglicht es Ihnen, Cookies in Ihrem Webbrowser zu erstellen und zu löschen. Das Plugin hat zwei Funktionen, die dies ermöglichen; sie sind $.cookie() und $.removeCookie().

Mit der Funktion $.cookie() können Sie den Cookie-Namen und seine Parameter festlegen. Während die Funktion $.removeCookie() das Cookie löscht.

Sie können jquery-cookie von ihrem GitHub-Repo erhalten; Danach speichern Sie es in Ihrem Arbeitsverzeichnis. Stellen Sie von dort aus sicher, dass Sie auch jQuery verknüpft haben.

Der folgende Code enthält Details zur Verwendung von jquery-cookie zum Setzen und Löschen eines Cookies.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>01-jQuery-set-cookie</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
	<script type="text/javascript" src="js/jquery-cookie.js"></script>
    <script>
    	// Define a cookie called DelftStack_Cookie
    	// and set its value to 4500.
        $.cookie("DelfStack_Cookie", 4500);
        let cookie_value = $.cookie("DelfStack_Cookie");
        /* Remove the cookie
        $.removeCookie("DelfStack_Cookie");*/
    </script>
</body>
</html>

Ausgabe (beachten Sie die Browserkonsole):

Cookie setzen mit jQuery-cookie.js

Eine benutzerdefinierte Funktion, die die Zeit berechnet und die Methode document.cookie() verwendet, kann ein Cookie setzen und löschen. Anschließend verwenden Sie die Zeitberechnung, um das Ablaufdatum des Cookies zu ermitteln.

Dazu benötigen Sie die Objektmethoden Date; diese sind setTime(), getTime() und toGMTString(). Außerdem maskieren Sie Zeichen im Cookie-Namen mit encodeURIComponent.

Im folgenden Code finden Sie die benutzerdefinierte Funktion, mit der Sie ein Cookie setzen können. Aber wir haben den Code, der ein Cookie löschen kann, als Kommentar hinterlassen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>02-jQuery-set-cookie</title>
</head>
<body>
    <script>
        function create_cookie(cookie_name, cookie_value, cookie_life_time) {
		    let cookie_expires;

		    if (cookie_life_time) {
		        let current_date = new Date();
		        let current_time = current_date.getTime();
		        current_date.setTime(current_time + (cookie_life_time * 24 * 60 * 60 * 1000));
		        cookie_expires = "; expires=" + current_date.toGMTString();
		    } else {
		        cookie_expires = "";
		    }
		    document.cookie = encodeURIComponent(cookie_name) + "=" + encodeURIComponent(cookie_value) + cookie_expires + "; path=/";
		}

		create_cookie('Habdul Hazeez', '14092022', 1);

		/* Erase the stored cookie
		function erase_cookie(cookie_name) {
		    create_cookie(cookie_name, "", -1);
		}*/
    </script>
</body>
</html>

Ausgabe (beachten Sie die Browserkonsole):

Setzen eines Cookies mit einer benutzerdefinierten Funktion

Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

Verwandter Artikel - jQuery Cookie