Objectif: Pour apprendre à créer et à lire le cookie à l'aide de JavaScript. Un cookie est un petit fichier de données enregistré sur le périphérique de l'utilisateur par le site Web. Il est utile de stocker des données pour identifier l’utilisateur ou pour le suivre. Lorsque l'utilisateur visite à nouveau le site Web, les données stockées peuvent être lues facilement.
Étape 1: Pour définir le cookie sur la machine utilisateur
Avec la fonction createCookie (), vous pouvez facilement créer le cookie en transmettant le nom, la valeur (les données que vous souhaitez stocker) et la date d'expiration.
function createCookie (nom, valeur, jours) {if (jours) {var date = new Date (); date.setTime (date.getTime () + (jours * 24 * 60 * 60 * 1000)); var expires = '; expires =' + date.toGMTString (); } else {var expires = ''; } // définition du cookie document.cookie = nom + '=' + valeur + expire + '; chemin = / '; }
Step2: Pour lire le cookie
Vous pouvez facilement lire le cookie à l'aide de la fonction ci-dessous en fournissant le nom du cookie.
fonction readCookie (name) {var nameEQ = nom + '='; // lecture du cookie var ca = document.cookie.split (';'); // traitement pour obtenir le contenu de (var i = 0; i <longueur.al; i ++) {var c = ca [i]; tandis que (c.charAt (0) == '') {c = cstrstring (1, c.length); } if (c.indexOf (nameEQ) == 0) {// retourne le contenu actuel renvoie csubstring (nameEQ.length, c.length); }} return null; }
Exemple: Exemple pour stocker le nom d'utilisateur dans le cookie.
if (cookies == 'oui') {jQuery ('document'). ready (function () {// cookie rouge var cook = readCookie ('Votre site Web'); if (cook! = 'true') {// appelant créer le cookie s'il n'est pas trouvé createCookie ('YourWebsite', 'user_name = akash', 30);}}); }
Vous pouvez voir le cookie stocké dans la console du navigateur:
Dépendance: Vous devrez inclure le fichier jquery min js pour exécuter l'exemple. Pour cela, vous pouvez utiliser la ligne de code ci-dessous.
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </ script>