Attributs des cookies dans JavaScript | Expliqué

De nos jours, il est essentiel de maintenir les informations de session sur plusieurs pages pour la plupart des sites Web. Habituellement, lorsqu'un serveur Web répond en envoyant une page Web à votre navigateur, la connexion est terminée et toutes les données stockées sur le serveur sont perdues. Cette situation rend difficile de stocker les informations liées à la session utilisateur, et vous ne pouvez pas vous référer au serveur pour y accéder.

Dans un tel scénario, Biscuits sont utilisés pour stocker des informations utiles qui peuvent être récupérées plus tard pour apprendre à connaître l'utilisateur. Les cookies comprennent de minuscules bits de données conservés dans un navigateur Web et utilisés pour suivre l'activité des utilisateurs. Ils permettent également au site Web de fournir des fonctionnalités spécifiques en fonction d'un utilisateur particulier. En conséquence, les cookies sont considérés comme un élément central de la fonctionnalité d'un site Web.

Cet article expliquera le Les attributs de Biscuits dans Javascrip avec l'aide d'exemples appropriés. Alors, commençons!

Attributs des cookies en javascript

JavaScript prend en charge les quatre attributs de cookies suivants:

• expire
• maximum
• chemin
• domaine

Les sections fournies ci-dessous démontreront les méthodes pour utiliser ces attributs pour améliorer la fonctionnalité des cookies dans JavaScript.

Note: Les cookies expirent après un certain temps; Cependant, les paramètres d'expiration du cookie peuvent être gérés par le biais de ses offres «expire”Attribut en javascript.

Expire l'attribut des cookies en javascript

Les cookies sont automatiquement supprimés lorsque le navigateur est fermé. Il interdit aux visiteurs de réutiliser les valeurs du cookie lorsqu'ils visitent plus tard le site Web. Cependant, ce comportement peut être contrôlé en définissant le «date d'expiration"Pour le cookie.

Les cookies en javascript offrent un «expire«Attribut qui vous permet d'ajouter un«date d'expiration«Dans le temps universel coordonné (UTC) au«nom = valeur”Paire de cookies.

Syntaxe de l'attribut expiré des cookies en javascript

document.cookie = "name = value; expires = expirationDate UTC"

Ici le "expire«L'attribut est utilisé pour maintenir l'état du cookie selon le«date d'expiration" et "UTC" temps.

Exemple: expire l'attribut des cookies en javascript

Tout d'abord, dans notre «indice.html»Fichier, nous ajouterons deux boutons:«setcookie" et "getcookie". Le "setcookie"Le bouton invoque le"setcookie ()»Fonction pour définir le cookie spécifié, alors que le«getcookie«Le bouton appelle le«getcookie ()”Fonction pour récupérer les cookies déjà définis:

Dans notre "projet.js«Fichier, nous définirons le«setcookie ()" et "getcookie ()«Fonctions associées au«sur clic«Événements du«setcookie" et "getcookie" boutons. Le "setcookie () » La fonction créera un cookie ayant «nom d'utilisateur"Comme cookie"nom" et "Sharqa«Comme c'est«valeur", et le "expire«Valeur de l'attribut comme«Soleil, 10 août 2030 12:00:00 UTC»:

fonction setcookie ()
document.cookie = "username = sharqa; expire = Sun, 10 août 2030 12:00:00 UTC";

Ensuite, après avoir vérifié la longueur du cookie créé dans le «si»Déclaration, le«getcookie ()"La fonction va chercher le cookie"nom" et "valeur»Et affichez-le dans une boîte à alerte. Dans l'autre cas, si le cookie est expiré ou supprimé, la boîte d'alerte indiquera que «Cookie non disponible»:

functionGetcookie ()
si (documenter.biscuit.longueur != 0)
varArray = document.biscuit.Split ("=");
alert ("name =" + array [0] + "" + "value =" + array [1]);

autre
alerte ("cookie non disponible");

Maintenant, nous allons enregistrer les deux fichiers, puis utiliser le code vs "Serveur en direct”Extension Pour exécuter l'application dans le navigateur:

La page Web ouverte comprend deux boutons: «setcookie" et "getcookie", Où cliquer sur le"setcookie"Créera un nouveau cookie avec spécifié"nom","valeur", et "expire”Valeur d'attribut:

Pour voir le «valeur de nom«Paire de cookies dans une boîte à alerte, cliquez sur le«getcookie" bouton:

La boîte d'alerte suivante montre le nom du cookie comme «nom d'utilisateur"Et sa valeur comme"Sharqa»:

Vous pouvez également utiliser le «Console de développeur"Pour vérifier les détails liés au cookie ajouté. Faire cela, clic-droit Sur le navigateur, et à partir de son menu contextuel, sélectionnez le «Inspecter" option:

Ensuite, cliquez sur le "Application"Option de la barre supérieure de la console du développeur et recherchez"Biscuits" dans le "Stockage»Menu, présent sur le côté gauche de la fenêtre:

On peut voir dans l'image ci-dessus que nous avons réussi à créer un cookie et à fixer sa date d'expiration avec l'aide du «expire" attribut.

Attribut max-âge des cookies en javascript

La durée de vie d'un cookie est définie en fonction de la durée de session en cours du navigateur, ce qui signifie que le cookie expirera dès que l'utilisateur ferme le navigateur. Vous pouvez utiliser le "maximum»Attribut pour définir son durée de vie, qui sera indépendant de la durée de la session du navigateur.

Syntaxe de l'attribut max-âge des cookies en javascript

document.cookie = "name = valeur; max-age =" time

Ici le "maximum«L'attribut est utilisé pour spécifier le«temps«Dans lequel le cookie créé restera dans le système avant sa suppression. Cet attribut accepte une valeur de temps dans «secondes".

Exemple: Attribut Max-Age des cookies dans JavaScript

Maintenant, nous allons créer un cookie ayant «nom d'utilisateur«Comme c'est«nom","Alex" comme "valeur". Également "maximum«L'attribut du cookie mettra sa durée de vie à«30" jours:

document.cookie = "username = alex; max-age =" + 30 * 24 * 60 * 60 + ";"

Après avoir enregistré le code ajouté, ouvrez le "indice.html”Fichier dans le navigateur et cliquez sur"setcookie”Bouton pour créer un nouveau cookie et régler sa vie:

Le boîtier d'alerte suivant sera désormais affiché sur le navigateur:

Pour vérifier la durée de vie du cookie créé, explorez le «Expire / max-âge”Colonne dans la fenêtre suivante:

Dans l'image donnée ci-dessus, le «Expire / max-âge"La colonne contient la spécifiée"maximum«Valeur d'attribut selon le«Époque horodatrice Unix ".

Attribut de chemin des cookies en javascript

En JavaScript, un cookie est accessible pour toutes les pages Web présentes dans le même répertoire ou sous-répertoire. Cependant, vous pouvez utiliser le «chemin«Attribut pour contrôler la portée des cookies sur les pages Web.

Syntaxe de l'attribut de chemin des cookies en javascript

document.cookie = "name = value; expires = expirationDate; path = / path";

Ici le "chemin«L'attribut est utilisé pour spécifier le«CHEMIN«Pour lequel le cookie créé est«accessible".

Exemple: Attribut de chemin des cookies en JavaScript

Nous créerons un cookie du nom "nom d'utilisateur,"Qui comprend une valeur"Alex», Et a fixé sa date et sa date d'expiration comme«Mer, 10 janvier 2030 23:00:00 UTC". Ensuite, nous allons définir son «chemin" attribuer à "/ /,«Ce qui signifie que les cookies créés seront disponibles sur un site Web:

document.cookie = "username = alex; expire = mer, 10 janvier 2030 23:00:00 UTC; path = /";

Enregistrez le code fourni dans votre «indice.html”Fichier et l'ouvrez dans le navigateur:

Maintenant, cliquez sur le "setcookie"Bouton, puis passez à la fenêtre de la console du développeur pour la reconfirmation du chemin ajouté:

Comme vous pouvez le voir dans le «Chemin”Colonne, l'attribut de chemin du«nom d'utilisateur"Cookie est prêt à"/ /»:

Le "chemin" et le "domaine«L'attribut des cookies est principalement utilisé ensemble tout en créant un cookie en JavaScript. Maintenant, nous allons discuter du «domaine»Attribut dans la section suivante.

Attribut de domaine des cookies en javascript

Le "domaine«L'attribut des cookies JavaScript est utilisé pour ajouter le domaine pour lequel le cookie est considéré comme«valide". Par exemple, le «domaine"La valeur de l'attribut est"linuxhint.com», Alors le cookie défini sera valable pour le domaine spécifié et ses sous-domaines.

Syntaxe de l'attribut de domaine des cookies en javascript

document.cookie = "name = value; path = / path; domain = domainName";

Dans la syntaxe donnée ci-dessus, le «nom de domaine”La valeur spécifie le domaine auquel appartiennent les cookies.

Exemple: attribut de domaine des cookies en javascript

Par exemple, nous créerons un cookie sur "Blog.linuxhint.com»Et définissez la valeur du«chemin" attribuer à "/ /»Et la valeur de l'attribut de domaine à«linuxhint.com», Ensuite, le cookie sera accessible aux pages Web du«linuxhint.com" site Internet:

document.cookie = "name = value; path = / path; domain = domainName";

Au lieu de "linuxhint.com", Si nous fournissons le sous-domaine"Blog.linuxhint.com", puis le "nom d'utilisateur"Le cookie ne sera valable que pour le sous-domaine ajouté. Par conséquent, l'approche idéale consiste à spécifier le correspondant domaine à la place du sous-domaine valeur.

À des fins de démonstration, nous allons définir «127.0.0.1«Comme domaine pour un cookie:

document.cookie = "name = sharqa; path = /; domaine = 127.0.0.1";

La sortie divisée ci-dessous signifie que nous avons défini avec succès "127.0.0.1"Comme domaine valide pour le" créé "valeur clé”Paire de cookies:

Nous avons compilé les informations essentielles liées à les attributs de Biscuits en javascript.

Conclusion

"expire","maximum","chemin", et le "domaine«Sont les attributs des cookies en javascript. Les attributs expirés et max-âge sont utilisés pour fixer la date d'expiration et la durée de vie des cookies. En revanche, la combinaison des attributs de domaine et de chemin aide à spécifier le domaine et la portée valides où les cookies sont disponibles. Cet article a expliqué les attributs des cookies en JavaScript à l'aide d'exemples appropriés.