Stockage local

Qu'est-ce que le stockage local ?

Lorsque vous créez une page web interactive, il peut être utile de mémoriser des informations entre deux actions, ou même entre deux visites de l’utilisateur. JavaScript offre plusieurs façons de sauvegarder des données directement dans le navigateur, sans serveur.

• Les variables : permettent de stocker des valeurs pendant que la page reste ouverte
• Le sessionStorage : permet de stocker des valeurs pour la durée de la session - tant que le navigateur reste ouvert
• Le localStorage : permet de stocker des valeurs sans limite de durée - tant qu'elles ne sont pas explicitement supprimées par programmation

⚠ Ces solutions ne sont pas sécuritaires pour des données sensibles comme un mot de passe ou des informations personnelles.

Cookies et stockage local

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.

Les cookies sont gérés par le serveur web et permettent de créer une clé de vérification cryptée pour des données sensibles.

Ils ont généralement une date de péremption pour assurer un niveau de sécurité plus élevé.

Stockage vs variables

Rappelons-nous ces principes fondamentaux des variables :

---

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!

• 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 de l'onglet du navigateur

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.

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 :

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

function lireInformations() {
    let nom = document.getElementById("nom");

    // Appliquer sur la page les préférences de couleurs
    document.body.style.backgroundcolor = sessionStorage.getItem("couleurFondPage");
    nom.style.color = sessionStorage.getItem("couleurTexteNom");
    nom.textContent = sessionStorage.getItem("nomComplet");
}

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

Mettre une page à jour avec JavaScript

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

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

location.reload();

L'élément location --> URL courant, donc de la page affichée dans le navigateur.

La fonction reload() --> Rafraîchir la page (comme le bouton du navigateur).