Quels sont les cookies et comment travailler avec eux en utilisant JavaScript
Lorsque vous travaillez avec des applications à l'échelle industrielle, les serveurs ne peuvent pas se souvenir des détails sur leur client. Une fois la session terminée avec le client, le serveur supprime toutes les informations sur le client, c'est pourquoi les cookies sont stockés sur le côté client. Ainsi, la prochaine fois, le client atteint le serveur avec une demande, un cookie est envoyé avec la demande afin que le serveur connaisse déjà les préférences du client.
Quels sont les types de cookies?
Il existe trois types de cookies différents qui sont:
- Cookies de session: Ces cookies sont automatiquement supprimés de vos navigateurs une fois que la session avec le site Web se termine
- Cookies de premier parti: Ce sont les cookies créés par un site Web spécifique et ne peuvent être lus que par ce site Web spécifique
- Cookies tiers: Ce sont les cookies créés par l'annonce exécutée sur un site Web que vous pourriez avoir visité
Quels sont les champs des cookies?
Généralement, les cookies ressemblent à des paires de valeurs de nom, mais elles se composent de 5 champs différents. Ces champs sont:
- Name = paires de valeurs: Ce sont la version cookie des paires de «valeurs clés»
- Expire: Cela définit lorsque le cookie expirera du navigateur, si aucune date d'expiration n'est spécifiée avec le cookie, alors le cookie sera supprimé lorsque le navigateur est fermé
- Chemin: Le chemin du site Web qui a mis le cookie dans le navigateur, si le chemin est vide, la suppression d'un spécifique peut devenir un obstacle
- Domaine: Le nom de domaine du site Web qui a défini le cookie
- Sécurisé: Si ce champ est défini, le cookie ne peut être lu que par un serveur sécurisé
Ce sont tous les champs variables d'un biscuit, à l'exception du nom = valeur paires tous les autres champs sont facultatifs
Comment utiliser JavaScript pour travailler avec des cookies?
Les cookies sont interagis par JavaScript en utilisant la syntaxe suivante:
document.cookie = "name = valeur; expire: 01 janvier 2024; path = /;"Pour démontrer en travaillant avec des cookies, nous allons configurer une page Web HTML avec les lignes suivantes à l'intérieur de la page Web:
Ce sont tous des cookies!!
Nous obtenons la sortie suivante sur notre navigateur:
Maintenant que nous avons notre configuration HTML, nous pouvons commencer à travailler sur notre code JavaScript. La première chose que nous allons implémenter est la fonctionnalité du bouton qui ajoutera un cookie à notre navigateur avec les lignes de code suivantes:
$ ("# add").cliquez sur (fonction ()document.cookie = "name = cookie délicieux!"
alerte ("cookie ajouté");
);
Maintenant, exécutez le programme et cliquez sur le bouton qui dit «Cliquez pour ajouter un cookie délicieux!», Vous obtiendrez la sortie suivante:
Vous pouvez confirmer ce cookie en vous dirigeant vers le Console du développeur> Application> Cookies Et trouver le cookie que nous venons de créer comme illustré dans l'image ci-dessous:
Comme vous pouvez le voir sur les outils du développeur, nous avons pu créer avec succès notre cookie. L'étape suivante consiste à lire ce cookie à l'aide de JavaScript et à alerter l'utilisateur sur le cookie sur le bouton Appuyez, nous le faisons en utilisant les lignes de code suivantes:
$ ("# show").cliquez sur (fonction ()alerte (document.biscuit);
);
Cliquez sur le bouton qui indique «Cliquez pour afficher les cookies» et vous obtiendrez le résultat suivant:
Comme vous pouvez le voir, nous pouvons lire le cookie et l'afficher à l'utilisateur. Maintenant, nous devons apprendre à supprimer un cookie du navigateur. Nous pouvons supprimer un cookie sur le bouton Appuyez sur le bouton en utilisant les lignes de code suivantes:
$ ("# delete").cliquez sur (fonction ()document.cookie = "name =; expire = thu, 01 janvier 1970 00:00:01 GMT";
alerte ("cookie supprimé");
);
Nous pouvons supprimer des cookies en fixant leur date d'expiration à une date passée et c'est exactement ce que nous avons fait dans l'extrait de code ci-dessus. Maintenant, si vous appuyez sur le bouton «Cliquez pour supprimer le cookie», vous obtiendrez le résultat suivant:
Pour vérifier cette suppression, cliquez sur le bouton pour afficher à nouveau des cookies et vous obtiendrez le résultat suivant:
Comme vous pouvez le voir, la boîte de dialogue d'alerte ne nous montre aucun cookies, c'est parce que nous avons pu supprimer avec succès le cookie en utilisant le bouton Supprimer.
Conclusion
Les cookies sont de petits fichiers texte qui sont stockés sur l'ordinateur du client ou sur le navigateur du client pour informer le serveur des préférences du client. Il existe trois types de cookies différents à savoir: cookies de session, cookies en première partie et cookies tiers. Un cookie contient 5 champs différents dont un seul est obligatoire et les 4 champs restants sont facultatifs. Les fonctions cookies sont effectuées en javascript en utilisant le document.biscuit attribut. Dans cet article, nous avons appris à travailler avec des cookies en utilisant JavaScript.