Cours de JavaScript - Stocker des informations sur le poste client : cookies et API Webstorage

version 1.0.0, dernière mise à jour le 7 février 2019.

   

Table des matières (TdM)

  1. I. Gestion des cookies
    1. Principe
    2. Mise en œuvre
      1. Création d'un cookie
  1. II. Webstorage
    1. Généralités
      1. Principe
      2. Détection du support
    2. Lire, mettre à jour et écrire des données
      1. Exercice : Utilisation de localStorage

Retour au menu

Contenu du cours

I. Gestion des cookies

1. Principe

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.

>Retour à la TdM

2. Mise en œuvre

a. Création d'un cookie

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=/ 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. domain=mondomaine.com 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 =.

>Retour à la TdM

II. Webstorage

1. Généralités

a. Principe

L'API WebStorage fournit un mécanisme de stockage de l'information côté client plus évolué que les simples cookies :

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 :

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.

b. Détection du support

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.

>Retour à la TdM

2. Lire, mettre à jour et écrire des données

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));.

Exercice 1. Utilisation de localStorage

Énoncé
Correction

>Retour à la TdM

Historique de ce document

Conditions d'utilisation et licence

Creative Commons License
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu