4. Stockage sur navigateur

Présentation

Les navigateurs web mettent à disposition différents moyens pour un site web de stocker des informations à plus ou moins long terme directement en cache sur la machine de l’utilisateur.

Ce stockage est particulièrement utile pour conserver d’une visite du site à une autre des informations non-capitales où que l’on ne souhaite pas conserver dans une base de donnée. Les éléments d’authentification de l’utilisateur par exemple, sont intéressants à conserver sur le navigateur pour éviter de demander trop souvent à l’utilisateur ses identifiants.

Dans ce chapitre nous verrons les différents moyens de stocker des informations sur un navigateur, les différences de chaque méthode et l’encadrement juridique autour de cette pratique. Nous nous en servirons ensuite pour stocker la recherche et le mode de tri choisis par notre utilisateur pour notre galerie de chiens.

Données locales et données de session

Les deux premiers systèmes de sauvegarde ont un fonctionnement très similaire : ils permettent simplement d’associer à une clé une valeur qui sera stockée sur le navigateur de l’utilisateur.

Toutes les données stockées ainsi sont rattachées au nom de domaine de votre site. Vous n’avez donc toujours accès qu’aux données de votre nom de domaine et non celles des autres sites visités par votre utilisateur.

Données locales

Pour stocker des données locales, il vous suffit d’exécuter la commande Javascript :

localStorage.setItem("key", "value")

Vous pouvez ensuite récupérer votre donnée avec :

const data = localStorage.getItem("key")

Il est possible de supprimer les données stockées, soit toutes celles associées à votre nom de domaine, soit une en particulier :

localStorage.removeItem('key') // delete the key.
localStorage.clear() // delete all the keys stored.

Les données locales persistent indéfiniment sur le navigateur. Mais elles peuvent facilement être supprimées par l’utilisateur ou le navigateur lui-même. Il ne faut donc jamais prendre pour acquis leur existence.

Elles sont particulièrement utilisées pour stocker des informations sur des préférences utilisateur relativement peu importantes.

Données de session

Les données de session ont un fonctionnement complètement similaire aux données locales :

sessionStorage.setItem("key", "value") // Store the value in the key
const data = sessionStorage.getItem("key") // Get value from the key
sessionStorage.removeItem('key') // delete the key.
sessionStorage.clear() // delete all the keys stored.

La seule différence avec les données locales est que les données de session sont automatiquement supprimées à la fermeture du navigateur. Elles seront donc conservées si l’utilisateur change de page sur le site ou réactualise la page.

Les données de session sont surtout utilisées pour préserver des données temporaires entre les pages. Il peut s’agir d’informations d’un formulaire fait sur plusieurs pages, ou encore du score d’un jeu où les niveaux sont des pages différentes.

WARNING

⚠️ Données locales et données de session ne sont capables de stocker que des informations sous la forme de chaînes de caractères. Il est possible de stocker des volumes de données d’environ 10 MB en données locales par site, contre autant qu’il est possible de stocker pour la machine pour les données de session.

Les cookies

Aujourd’hui célèbres sur internet, les cookies sont un autre moyen de stocker des informations sur la machine du client.

A la différence des données locales et de session, les cookies vont également nécessité de renseigner une date d’expiration pour chacune des données stockées.

Pour ajouter un cookie en Javascript :

document.cookie = "key=value; expires=Thu, 03 Feb 2022 00:00:00 UTC"

On retrouve le système de clé/valeur. L’option expires permet de fournir la date d’expiration selon un format standard en Javascript : UTCString . (sinon, il est automatiquement supprimé à la fermeture du navigateur).

Généralement, on se réfère à la date actuelle à laquelle on ajoute une certaine durée en milli-secondes pour définir la date d’expiration. Pour avoir une expiration du cookie dans 1 semaine :

let date = new Date(Date.now() + 604800000); //604800000ms = 1 week
date = date.toUTCString();
document.cookie = "key=value; expires=" + date

Pour récupérer la valeur d’un cookie, ce n’est pas aussi simple qu’avec les autres données. document.cookie retourne l’ensemble des cookies stockés sous la forme d’une chaine de caractères, similaire à celle-ci : cookie1 = value; cookie2 = value;

Il faut donc parser la chaîne de caractère pour retrouver la valeur qui nous intéresse. Voici un exemple de fonction permettant de récupérer la valeur d’un cookie à partir de sa clé :

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

Pour modifier un cookie, il suffit d’effectuer la même commande en utilisant la même clé, et en indiquant seulement les informations à écraser : document.cookie = "key=value2;", par exemple.

Pour supprimer un cookie avant sa date d’expiration, la technique consiste simplement à modifier le cookie en lui indiquant une date d’expiration dans le passé. Conventionnellement, on indique :

document.cookie = "key=value; expires=Thu, 01 Jan 1970 00:00:00 UTC"

Les cookies sont particulièrement intéressants car ils sont également transmis par le navigateur à la machine coté serveur lors des requêtes. Les cookies sont envoyés aussi bien lors de la requête initiale que lors des requêtes effectuées en Javascript sur la page (Ajax, etc.).

Les cookies sont principalement utilisés pour stocker des données d’authentification de l’utilisateur, mais aussi des informations sur le comportement de l’utilisateur sur le site afin d’aider au ciblage publicitaire notamment.

INFO

👉 L’enregistrement des cookies présente d’autres options que expires. L’option path permet notamment de spécifier dans quelle partie du domaine le cookie est accessible : si path=/user/ est indiqué, seules les pages avec une url commençant par https://my-domain.com/user/ y auront accès. Par défaut, l’option prend le chemin de la page courante. Si vous voulez que le cookie soit accessible dans tout le domaine, faites : path=/ . Pour des infos sur les autres options des cookies, consultez la documentation Javascript sur les cookies.

La syntaxe de récupération des cookies côté serveur dépend de votre langage back-end. Pour plus d’informations, renseignez-vous dans votre langage sur la meilleure façon d’exploiter les headers Set-Cookies de vos requêtes HTTP.

Encadrement juridique

Aujourd’hui la CNIL encadre l’usage des cookies et plus généralement des données stockées par les navigateurs web. En particulier, si les données stockées permettent d’identifier ou de tracer l’identité d’un utilisateur ou son comportement, alors il est nécessaire d’obtenir son consentement tacite avant tout stockage de données sur le navigateur.

C’est pourquoi vous retrouvez aujourd’hui de nombreuses pop-up ou autres fenêtres vous demandant à votre première venue sur un site d’”autoriser les cookies” afin d’obtenir votre consentement. Le non-respect de cette loi expose les propriétaires des sites à d’importantes amandes.

Vous trouverez d’avantage d’informations sur le site de la CNIL.

Conclusion

Pour le stockage de la recherche et des options de tri de nos chiens, le stockage le plus approprié semble ici être les données locales.

Je peux ainsi facilement stocker la valeur de mon attribut search et dogsSortType:

localStorage.setItem("search", this.search)
localStorage.setItem("dogsSortType", this.dogsSortType)

Mais à quel endroit réaliser cette commande ? Nous pourrions ajouter un évènement sur nos éléments de formulaire qui, à chaque changement de valeur, pourrait modifier la valeur de la donnée stockée. Mais que ce passerait-il si nos attributs search et dogsSortType se retrouvaient modifiés autrement que par l’interface ? Notre évènement ne serait alors pas activé.

Pour gérer au mieux cette situation, nous allons avoir besoin d’utiliser des observateurs, que nous allons voir dans le prochain chapitre.

Aller plus loin

• Sur les cookies :
  • cookies.set() documentation
  • Set-Cookie documentation
• Sur les données locales et de session :
  • localStorage documentation
  • sessionStorage documentation
• Sur le cadre juridique :
  • La page didiée sur le site de la CNIL