Aller au contenu

Théorie semaine 12

Cookies et stockage local

Les sites web utilisent souvent du stockage local pour conserver des informations utiles soit pendant la session sur le site, ou encore utile à long terme.

Par exemple, lorsqu'on coche la possibilité qu'un site web puisse se souvenir de nos informations de connexion, alors un fichier est créé sur notre ordinateur pour conserver ces informations afin qu'elles puissent être utilisées lors de nos prochaines visites. Ces fichiers s'appellent des Cookies. 🍪

Longtemps, les développeurs se tournaient vers les cookies dès qu'ils avaient à conserver, temporairement ou à long terme, des informations de l'utilisateur :

  • items du panier d'achat
  • options de préférences
  • connexion d'un compte utilisateur
  • etc...

Avec HTML5, deux nouveau types de stockage local ont vu le jour : localStorage et sessionStorage. Ce sont des objets du DOM, plus précisément de l'objet Window, alors que les cookies sont des objets enfants de l'objet Document.

Aujourd'hui, nous avons accès à ces trois méthodes, chacune avec leurs particularités, afin de pouvoir stocker de l'information du côté client.

Stockage vs variables

Rappelons-nous ces principes fondamentaux des variables :

var

On fait face à une problématique :

❓ Comment conserver des valeurs lorsque l'utilisateur navigue d'une page à l'autre sur le site ?

❗️ Réponse : le stockage local!

RAPPEL :

  • localStorage : conserve les données tant qu'elles ne sont pas explicitement supprimées par javascript.

    • information non cryptée
    • unique à un domaine
    • aucune expiration

  • sessionStorage : conserve les données tant que le navigateur ou l'onglet du navigateur reste ouvert.

    • information non cryptée
    • unique à un domaine
    • effacé à la fermeture

Pour des questions de sécurité des données et d'optimisation du stockage, nous utiliserons le sessionStorage.

Comparatif

Comme les trois méthodes utilisent du stockage local sur le disque de l'utilisateur et sont bonnes pour une origine unique (Qu'est-ce qu'une origine en web ?), on peut penser que leur utilité est la même.

Par contre, elles ont des différences importantes qui nous permettent de déterminer quelle méthode est préférable, selon le besoin de notre site :

Méthode Particularités
localStorage * Fichier sqlite
* Information sans date d'expiration (doit être supprimée par JS ou manuellement en supprimant la cache du navigateur)
* Information jamais envoyée au serveur, par défaut
* Information non cryptée
* Créé par JS, localement, normalement pour utilisation locale
sessionStorage * Fichier sqlite
* Information qui expire dès que la fenêtre ou l'onglet est fermé
* Information jamais envoyée au serveur, par défaut
* Information non cryptée
* Créé par JS, localement, normalement pour utilisation locale
cookies * Fichier texte
* Information avec date d'expiration
* Information utilisée par le serveur pour valider l'identité, donc envoyée à toutes les requêtes
* Contient idéalement un token de validation d'identité plutôt que l'information même
* Idéalement généré par le serveur et utilisé en HTTP-only (mais peut être créé par le client en JS)

En général, on utilise le web storage (localStorage et sessionStorage) quand on a pas besoin d'envoyer de l'information à un serveur.

C'est donc ce qui nous intéresse pour le cours d'Interfaces web! 🤓

Utiliser localStorage et sessionStorage

Nous venons de voir que localStorage et sessionStorage sont pratiquement identiques. La seule différence notable, c'est le niveau de persistence :

  • localStorage : l'information est conservée dans le navigateur tant qu'elle n'est pas effacée par programmation ou manuellement
  • sessionStorage : l'information est conservée tant que le navigateur ou l'onglet dans lequel on se trouve n'est pas fermé

Donc quand on utilise l'un ou l'autre, il faut se poser la question si on a besoin que l'information soit accessible à long terme ou si on en a seulement besoin pour le temps de la visite de l'utilisateur.

⚠️ Attention aux trous de sécurité : puisque l'information conservée dans le sessionStorage et le localStorage n'est pas cryptée, il faut être très vigilant sur le type d'information qu'on y met, surtout considérant que le localStorage ne s'efface pas automatiquement!

Quoi qu'il en soit, l'utilisation de l'un ou l'autre est la même:

  1. On accès à la zone de stockage grâce au mot-clé sessionStorage.
  2. Ensuite, on insère des paires d'information clé:valeur
  3. Puis, on lit les informations d'une clé avec un getItem

Nous avons accès à quelques fonctions pour sauvegarder l'information dans le navigateur, la récupérer et la supprimer.

Fonction Description
setItem(string:nom, string:valeur) Permet en une seule instruction de créer une clé et d'y insérer une valeur. Si l'espace existe, l'information est écrasée.
getItem(string:nom) Permet de récupérer la valeur stockée dans une clé existante.
removeItem(string:nom) Permet de supprimer une paire clé:valeur existante.
clear() Permet de supprimer toutes les paires clés:valeur: d'un objet *web storage.
key(int:index) Permet de récupérer le nom de la clé à l'index donné.

Source : MDN : Utiliser l'API Web Storage

Exemple :

// Insérer des paires d'information
sessionStorage.setItem("couleurFondPage","pink");
sessionStorage.setItem("couleurTexteNom","black");
sessionStorage.setItem("nomComplet","Lili Roberge");


let nom = document.getElementById("nom");

// Appliquer sur la page la préférence de couleur de fond 
document.body.style.backgroundcolor = sessionStorage.getItem("couleurFondPage");
nom.style.color = sessionStorage.getItem("couleurTexteNom");
nom.textContent = sessionStorage.getItem("nomComplet");

// Effacer tout le contenu de l'espace de stockage
sessionStorage.clear();

// Il est de bonne pratique d'effacer le contenu lorsqu'on en a plus besoin.

Mettre une page à jour avec JavaScript

Parfois, après avoir appliqué des modifications grâce au Javascript, la page doit être mise à jour.

Par exemple, si on désire mettre à jour une facture après avoir retiré quelques éléments.

Nous savons qu'utiliser F5 au clavier rafraîchi la page, mais c'est une action manuelle que l'utilisateur doit connaître.

Pour déclencher une mise à jour grâce au Javascript, une seule ligne de code est nécessaire :

location.reload();

L'élément location contient les informations à propos de l'URL courant, donc de la page affichée dans le navigateur.

La fonction reload() permet de charger la page au même titre que le bouton du navigateur.

Reload