m) Les sessions côté client

web2course Partie 2 m) Les sessions
Où sauvegarder de l'info dans un browser ? Persistance de données de session via le web storage Projet 2.20 : sauvegarde de sessions
YoutubeImage

Où sauvegarder de l'info dans un browser ?

Nous avons vu qu'une des exigences associées à la création d'une application selon l'architecture REST, c'est qu'elle soit stateless : l'API ne peut pas garder l'état du client, sa session, côté serveur.

C'est donc au client de sauvegarder ses données de session.

Mais où pouvons nous sauvegarder des données de manière persistante côté client ?

Il existe deux façons principales de sauvegarder de l'info dans un browser :

  • le web storage ;
  • les cookies.

Dans le cadre de ce cours, nous allons principalement voir comment sauvegarder de l'info à l'aide du web storage. Dans la partie du cours sur la gestion de l'authentification et l'autorisation d'utilisateurs, vous pourrez optionnellement voir comment les cookies peuvent être utilisés pour sauvegarder des données de session côté client.

NB : le browser met à disposition d'autres API un peu moins connues pour sauvegarder des infos. Nous ne les verrons pas dans le cadre de ce cours, mais il reste néanmoins intéressant de lire très rapidement de quoi il s'agit :

  • IndexedDB API : permet de sauvegarder côté client de grandes quantités d'infos structurées, incluant des fichiers ; c'est une base de données orientée objets en JS qui permet les transactions.
  • Cache API : permet d'enregistrer et retrouver des requêtes et leur réponses. Bien qu'à la base créé pour pouvoir fournir des réponses plus rapides à certaines requêtes, cette API peut aussi être utilisée comme mécanisme général de stockage.

Persistance de données de session via le web storage

Introduction

Le Web Storage API fournit un mécanisme permettant aux browser d'enregistrer des paires clé / valeur d'une manière plus intuitive que l'utilisation de cookies.

Il existe deux mécanismes au sein du web storage :

  • sessionStorage :
    • offre un espace de stockage séparé pour chaque origine pour la durée de la session d'une page, tant que le browser est ouvert.
    • les clés / valeurs y sont enregistrées sous forme de string uniquement ;
    • met à disposition un espace de stockage plus grand qu'un cookie, ~5MB maximum par origine ;
  • localStorage :
    • offre aussi un espace de stockage séparé pour chaque origine, mais les données persistent quand le browser est fermé et réouvert ;
    • est un espace de stockage plus grand qu'un cookie, limité à ~10MB en cas de crash/restart du browser.

Les principales méthodes offertes par sessionStorage et localStorage sont les mêmes. Voici quelques exemples de codes par méthode.

setItem()

Cette méthode permet d'enregistrer, pour une clé donnée, la valeur associée :

js
1
const STORE_NAME = 'user';
2


3
const setUserSessionData = (user) => {
4
  const storageValue = JSON.stringify(user);
5
  localStorage.setItem(STORE_NAME, storageValue);
6
};

Pour enregistrer un objet JS sous forme de string, il suffit de le sérialiser à l'aide de la méthode JSON.stringify().

getItem()

Cette méthode permet d'obtenir la valeur associée à la clé donnée en argument :

js
1
const STORE_NAME = 'user';
2


3
const getUserSessionData = () => {
4
  const retrievedUser = localStorage.getItem(STORE_NAME);
5
  if (!retrievedUser) return;
6
  return JSON.parse(retrievedUser);
7
};

Pour cet exemple, comme la valeur a été sérialisée, nous pouvons récupérer l'objet grâce à la méthode JSON.parse().

removeITem()

Cette méthode permet d'effacer une clé / valeur :

js
1
const STORE_NAME = 'user';
2


3
const removeSessionData = () => {
4
  localStorage.removeItem(STORE_NAME);
5
};

clear()

Cette méthode permet d'effacer tout l'espace de stockage pour une origine donnée.

Cette méthode est très utile lorsque l'on souhaite effacer toute la session d'un utilisateur, notamment lors du logout d'un utilisateur.

Projet 2.20 : sauvegarde de sessions

Objectif

Veuillez enrichir le frontend développé dans le cadre de votre projet en lui ajoutant une gestion de thèmes et la gestion de l'affichage d'un message traitant du respect de la vie privée point de vue de la sauvegarde des préférences (RGPD).

Mise en place du projet

Gestion d'un thème

Vous devez ajouter un moyen de switcher d'un thème "light" ou "dark" au sein de votre application.

Par exemple, vous pouvez le faire via un bouton dans le header ou le footer permettant de basculer d'un thème à l'autre.

Vous devez sauvegarder le thème sélectionné par l'utilisateur comme donnée de session persistante. Ainsi, vous allez sauvegarder l'information du thème dans le localStorage.

Au redémarrage du browser, ou lors du refresh du frontend, l'application doit toujours afficher ses écrans selon le dernier thème sélectionné : veuillez donc changer les couleurs de certains backgrounds et certains textes en fonction du thème.

Quand un prototype de gestion de thème est finalisé, veuillez faire un commit de votre code avec comme message : 2.20.1 : user session & theme.

Gestion de l'affichage d'une "privacy policy" conforme au RGPD

La toute première fois que les utilisateurs chargent votre application, vous devez leur afficher un message conforme au RGPD, indiquant comment vous allez traiter de leurs données, sauvegarder leurs préférences...

Vous devez afficher ce message dans une modal, et l'utilisateur doit pouvoir le fermer en cliquant sur un bouton "OK". Vous devez sauvegarder le consentement de l'utilisateur comme donnée de session persistante. Ainsi, vous allez sauvegarder l'information du consentement dans le localStorage.
A la prochaine ouverture de l'application, si l'utilisateur a donné son consentement, vous n'affichez plus le message.

Quand un prototype est finalisé, veuillez faire un commit de votre code avec comme message : 2.20.2 : user session & user preferences.

v3.0.11