Conditions d'utilisation et licence
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
version 1.0.1, dernière mise à jour le 14 décembre 2020.
Les cookies ont été la première initiative développée par Netscape dès 1994, pour pouvoir conserver des valeurs et des réglages propres à un site d'une session de navigation à une autre. En effet, toutes les variables JavaScript disparaissent de la mémoire quand la page où elles sont définies est close. Les cookies permettent de stocker sous la forme de courtes chaînes de caractères des informations propres à un site, sur le poste client.
Un cookie est une chaîne de caractères, propre à un domaine, contenant des paires clef/valeur et conservée pendant une durée déterminée. On peut ainsi écrire directement un cookie :
document.cookie = "username=Douglas Alavanillesilvousplet; expires=Fri, 08 Feb 2019 12:00:00 UTC; path=/;domain=mondomaine.com"
La date et l'heure d'expiration du cookie sont relatives au réglages du navigateur, et pas du serveur. Si aucune date n'est spécifiée, le cookie est effacé quand la dernière fenêtre ouverte du navigateur est close. path=/ permet de spécifier le répertoire et ses sous-répertoires sur le serveur, où le cookie s'applique. Les pages dans ces répertoires pourront recourir au cookie. Ici, le cookie est utilisable à partir de la racine du domaine, donc sur toutes les pages. domain= permet de spécifier le nom de domaine auquel le cookie s'applique. Il s'appliquera aussi aux sous-domaines (ici, par exemple, cest.mon.domaine.com).
document.cookie="parametre1="+valeurDuParametre1 ;
var fin = new Date ;
fin.setMonth((fin.getMonth()+3)) ;
document.cookie="parametre1="+valeurDuParametre1 ;
document.cookie="parametre2="+valeurDuParametre2;expires=fin.toGMTString ;
Pour lire un cookie, il suffit de manipuler la propriété document.cookie à l'aide de la méthode split, de séparer les paires (paramètre, valeur) à l'aide de ;, puis de lire les valeurs correspondant à chaque paire en séparant une nouvelle fois avec les caractères =.
L'API WebStorage fournit un mécanisme de stockage de l'information côté client plus évolué que les simples cookies :
la manipulation des données stockées est plus aisée ;
la taille maximale des informations stockables est plus grande.
Les objets stockés dans le WebStorage sont simplement des paires clef/valeur, comme les cookies mais les données peuvent être plus structurées, puisqu'il s'agit d'objets JavaScript. Attention cependant, les données stockées ne sont pas cryptées.
Deux possibilités permettent de choisir les conditions dans lesquelles les données doivent être stockées :
sessionStorage ne conserve les données que pendant la session de navigation ; autrement dit, les données sont conservées jusqu'au moment où la dernière fenêtre ou le dernier onglet ouvert du navigateur est fermé. sessionStorage est réinitialisé à chaque redémarrage du navigateur.
localStorage permet de conserver les données d'une session de navigation à une autre. Cela permet par exemple de conserver sur la machine du client les paramètres de personnalisation d'un site Web.
Les méthodes et propriétés sont identiques pour les deux objets. De plus, l'API fournit un événement, storage, qui permet de détecter quand une modification de localStorage ou de sessionStorage a été effectuée : window.addEventListeneer("storage", function (evt){…});. L'objet événement evt possède notamment une propriété, storageArea qui permet de savoir quelle zone de stockage a été modifiée (localStorage ou sessionStorage), key qui renvoie la clef dont la valeur a changé, oldValue et newValue aux noms explicites.
Si en théorie les navigateurs récents supportent la technologie WebStorage, il peut arriver qu'elle ne soit pas utilisable, car bloquée par la configuration du navigateur. Par exemple, Safari en navigation privée donne accès à sessionStorage, mais avec un quota nul, ce qui en pratique en interdit l'utilisation. Dans ces conditions, au lieu de tester la simple présence de la propriété, il faut aussi savoir si on peut la manipuler, en faisant un test de lecture puis suppression d'un item dans la collection.
La méthode setItem(clef, valeur) permet d'ajouter un item au stockage. Par exemple, localStorage.setItem("nom", "Dupont");
La méthode getItem(clef) permet de récupérer la valeur d'un item. Par exemple, sessionStorage.getItem("nom"); renvoie l'objet {"nom", "Dupont"}
La méthode removeItem(clef) permet de retirer un item du stockage. Par exemple, localStorage.removetem("nom");
La méthode clear() vide le stockage. Par exemple, sessionStorage.clear();
Enfin, la méthode key() permet de lire la clef associée à une valeur. Par exemple, localStorage.setItem("nom", "Dupont");localStorage.key(0); renvoie "nom". Une utilisation possible est la lecture de la valeur associée à la première clef si on ne connaît pas cette dernière : on écrira localStorage.getItem(localStorage.key(0));.
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.