Comment gérer les cookies en javascript

Pendant de nombreuses années, de nombreux développeurs Web doivent stocker des données côté client. Avant que HTML5 et ses nouveaux mécanismes n'étaient émergés, chaque développeur a utilisé cookie pour atteindre cet objectif. Malheureusement, l'utilisation de cookies en JavaScript peut causer beaucoup de problèmes. Cet article traite de ce que sont les cookies et de la façon de créer des fonctions pour créer, récupérer et supprimer les cookies.

Points clés

• Les cookies sont des fragments de données envoyés à partir du site Web et stockés localement par le navigateur de l'utilisateur. Étant donné que HTTP est apatride, ils sont utilisés pour suivre l'activité des utilisateurs. Cependant, les cookies ne peuvent stocker que jusqu'à 4KB de données et chaque demande HTTP est envoyée au serveur, qui peut consommer une bande passante réseau.
• À la suite de HTML5, une alternative aux cookies est apparue. Il s'agit notamment de l'API de stockage Web (paire de valeurs de nom de stockage) et de l'API de base de données SQL Web (données de stockage dans une base de données qui peut être interrogée à l'aide de variantes SQL). Une autre alternative est l'API de la base de données d'index, qui définit une base de données qui contient des enregistrements qui contiennent des valeurs simples et des objets hiérarchiques.
• JavaScript peut utiliser l'attribut document.cookie pour créer, récupérer et supprimer des cookies. Cependant, la gestion des cookies en JavaScript peut être difficile en raison du manque de méthodes natives. Les développeurs doivent généralement créer leurs propres fonctions pour gérer les cookies.
• Les cookies ont une structure simple, composée de paires de valeurs de clés séparées par semi-colon, avec des clés et des valeurs séparées par des signes égaux. Ils peuvent avoir éventuellement une date d'expiration et seront supprimés après l'expiration. Si une date d'expiration n'est pas fournie, le cookie durera jusqu'à la fermeture de la session ou du navigateur. Vous pouvez également spécifier le domaine et le chemin qui peuvent être lus et écrits aux cookies.

Que sont les cookies?

Les cookies sont des données qui sont envoyées à partir d'un site Web et stockées localement par le navigateur de l'utilisateur. Les cookies sont nécessaires car HTTP est Stateless . Cela signifie que HTTP lui-même ne peut pas suivre l'activité précédente de l'utilisateur. L'utilisation de cookies est un moyen de créer des états.

utilisez-vous des cookies?

Maintenant, presque tous les sites Web utilisent des cookies. Cependant, les cookies sont assez limités car ils ne peuvent stocker que jusqu'à 4 Ko de données. De plus, de nombreux développeurs affirment que parce que les cookies sont envoyés au serveur chaque fois qu'une demande HTTP, les grands cookies consomment beaucoup de bande passante réseau, ce qui affecte les performances. Remy Sharp a fait une autre critique importante des cookies dans son livre co-écrit présentant HTML5. Cela peut être désastreux pour les connexions mobiles. Une autre chose importante à retenir est que si vous avez des visiteurs européens, votre site Web doit se conformer à la directive électronique de la vie privée de l'UE du 26 mai 2012. Si vous n'en avez jamais entendu parler, consultez pourquoi votre site Web illégal en Europe maintenant. Ces dernières années, les gens ont essayé de trouver des alternatives aux cookies. En raison de l'émergence de HTML5, certaines nouvelles technologies ont émergé. Le premier est l'API de stockage Web, qui a une méthode pour stocker les paires de valeurs de nom. Pour un aperçu de l'API de stockage Web, nous vous recommandons de lire la vue d'ensemble de l'API de stockage Web. La deuxième alternative est l'API de la base de données SQL Web, qui stocke les données dans une base de données qui peut être interrogée à l'aide de variantes SQL. Bien que Web SQL prenne en charge bien, cette norme n'est plus activement maintenue. La dernière mais non le moindre est l'API de la base de données d'index, qui définit une base de données contenant des enregistrements qui contiennent des valeurs simples et des objets hiérarchiques. Vous pouvez en savoir plus sur IndededDB dans "Apprentissage approfondi de HTML5 IndededDB". Malheureusement, IndededDB n'est pas largement pris en charge, donc vous ne devriez probablement pas en compter. Quelle que soit la façon dont vous aimez, il y a des points importants à savoir. Bien que toutes ces API fournissent un stockage local similaire aux cookies, ils ne renvoient pas leurs données au serveur. Ainsi, dans la plupart des cas, vous utiliserez les cookies et l'une des API de stockage. Techniquement, le même effet peut être réalisé en utilisant AJAX, mais cela peut sur-complifier la tâche et nécessiter un code supplémentaire.

comment faire des cookies

La structure d'un cookie est très simple. Ce ne sont que quelques paires de valeurs clés. Les paires sont séparées par des demi-colons et le caractère de signe égal sépare la clé de sa valeur. Les cookies peuvent être sélectionnés pour avoir une date d'expiration et seront supprimés après l'expiration. Si aucune date d'expiration n'est fournie, le cookie durera jusqu'à la fermeture de la session ou du navigateur. Si vous définissez la date d'expiration sur le passé, le navigateur supprimera les cookies. Notez que le format de la date est important car il doit être UTC / GMT. De plus, vous pouvez spécifier le domaine et le chemin auquel les cookies peuvent être lus et écrits. Par défaut, la valeur du chemin est "/", ce qui signifie que le cookie est visible pour tous les chemins dans un domaine donné. Si vous ne spécifiez pas de domaine, il appartiendra à la page où les cookies sont définis. La façon dont ces données sont définies est également importante. La commande doit être: la date de l'expiration; L'exemple suivant montre un cookie accessible dans tous les chemins du domaine, et une seule paire de valeurs clés.

<code>visits=3; path=/;</code>

L'exemple suivant montre un cookie accessible dans tous les chemins du domaine (par défaut est) et expire à 11 h 00 le 31 octobre 2012.

<code>last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;</code>

Cookies de script

Jusqu'à présent, j'ai expliqué ce que sont les cookies, et certains de leurs avantages et inconvénients. Il est maintenant temps de voir quelles fonctions JavaScript expose pour les gérer. Malheureusement, la première chose que je veux dire, c'est que JavaScript n'a pas de façon native de Easy Gérer les cookies. JavaScript peut créer, récupérer et supprimer des cookies à l'aide de l'attribut document.cookie, mais ce n'est pas satisfaisant. Chaque fois que vous devez traiter avec split(), substring() et pour les boucles. Notez que même si vous pouvez considérer document.cookie comme une variable de chaîne, il est vraiment plus qu'une simple variable de chaîne. Par exemple, voir le script suivant:

<code>visits=3; path=/;</code>

Si vous imprimez ensuite document.cookie, vous obtiendrez des résultats inattendus comme indiqué ci-dessous:

<code>last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;</code>

Jusqu'à présent, vous avez vu la difficulté de gérer les cookies en JavaScript. Il est donc temps de créer nos propres fonctions pour les gérer facilement. Les fonctions suivantes vous aideront à créer des cookies. Notez que le paramètre expires peut être une instance de l'objet date ou un nombre représentant le nombre de jours. Ce dernier peut être un nombre négatif, ce qui définit la date d'expiration au passé.

document.cookie = "visits=3; path=/;";
document.cookie = "last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;";

Vous pouvez appeler cette fonction comme celle-ci.

console.log(document.cookie);
// 打印 visits=3; last-visit=Mon, 15 Oct 2012 19:36:00

Maintenant que vous avez réglé des cookies, vous devez être en mesure de les récupérer. Vous le ferez en utilisant la touche donnée et la fonction getCookie() suivante. S'il est trouvé, il renvoie la valeur de la clé, sinon il renvoie NULL.

function createCookie(name, value, expires, path, domain) {
  var cookie = name + "=" + escape(value) + ";";

  if (expires) {
    // 如果是日期
    if(expires instanceof Date) {
      // 如果不是有效的日期
      if (isNaN(expires.getTime()))
       expires = new Date();
    }
    else
      expires = new Date(new Date().getTime() + parseInt(expires) * 1000 * 60 * 60 * 24);

    cookie += "expires=" + expires.toGMTString() + ";";
  }

  if (path)
    cookie += "path=" + path + ";";
  if (domain)
    cookie += "domain=" + domain + ";";

  document.cookie = cookie;
}

L'utilisation getCookie() est très simple. Vous passez simplement la clé comme paramètre comme indiqué ci-dessous.

createCookie("website", "audero.it", new Date(new Date().getTime() + 10000));
createCookie("author", "aurelio", 30);

Maintenant, nous avons besoin de la dernière fonction pour supprimer le cookie. La fonction affichée est très simple car elle s'appuie sur getCookie() pour tester si le nom donné est défini et sur createCookie() pour définir la date d'expiration sur le passé.

function getCookie(name) {
  var regexp = new RegExp("(?:^" + name + "|;\s*"+ name + ")=(.*?)(?:;|$)", "g");
  var result = regexp.exec(document.cookie);
  return (result === null) ? null : result[1];
}

Compte tenu de cette fonction, pour supprimer un cookie, vous pouvez simplement écrire:

console.log(getCookie("author")); // 打印 aurelio
console.log(getCookie("nothing")); // 打印 null

Utilisez les fonctions affichées, vous pourrez facilement gérer les cookies. Il existe de nombreuses autres fonctions de traitement des cookies sur le réseau. Parmi les nombreuses fonctions que vous pouvez trouver, je veux vous montrer les fonctions écrites par le gourou du développement frontal Peter-Paul Koch (P.P.K.) sur Quirksmode.com. Je tiens à le remercier de m'avoir permis de les inclure dans cet article. P.P.K. La fonction pour créer un cookie est illustrée ci-dessous.

function deleteCookie(name, path, domain) {
  // 如果 Cookie 存在
  if (getCookie(name))
    createCookie(name, "", -1, path, domain);
}

De même, pour récupérer des cookies, utilisez la fonction suivante.

deleteCookie("author");
console.log(getCookie("author")); // 现在打印 null

Il s'agit d'une fonction pour supprimer les cookies.

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

Conclusion

Dans cet article, vous avez appris ce que sont les cookies, comment ils sont fabriqués et leurs avantages et inconvénients. Vous avez également appris à gérer les cookies à l'aide de fonctions personnalisées. Comme je l'ai souligné dans mon article précédent, JavaScript manque certaines fonctions d'utilité de base. Heureusement, vous pouvez facilement créer vos propres fonctions ou rechercher le réseau pour résoudre votre problème.

FAQ (FAQ) sur la gestion des cookies dans JavaScript

(La partie FAQ est omise ici parce que la longueur est trop longue et ne correspond pas à l'objectif pseudo-original. Le contenu de la partie FAQ est très coïncide Alors gardez simplement le texte d'origine.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!