Présentation de l’API Web Storage et des propriétés localstorage et sessionstorage
L’API Web Storage permet de stocker des données sous forme de paires clefs/valeurs qui doivent obligatoirement être des chaines de caractères dans le navigateur de vos visiteurs.
Pour stocker des données avec Web Storage, on va pouvoir utiliser les propriétés (qui sont avant tout des objets) localstorage
et sessionstorage
. On va utiliser ces propriétés avec l’objet implicite Window
.
Pour être tout à fait précis, un objet Storage
est créé lorsqu’on utilise une de ces propriétés. On va pouvoir manipuler les données à travers cet objet. Notez que l’objet de stockage créé est différent pour localstorage
et sessionstorage
.
La principale différence entre localstorage
et sessionstorage
est la suivante : dans le cas où on utilise sessionstorage
, les données enregistrées ne vont subsister qu’après un rechargement de la page courante tandis que si on utilise localstorage
les données vont subsister même après qu’un visiteur ait quitté son navigateur.
Pour cette raison, la propriété localstorage
est beaucoup plus utilisée que sessionstorage
. Nous allons donc particulièrement nous concentrer sur cette première ici. Dans tous les cas, ces deux objets disposent des mêmes méthodes et propriétés, vous n’aurez donc aucun mal à utiliser le second si vous comprenez comment utiliser le premier.
Pourquoi utiliser des objets de stockage plutôt que des cookies ?
Chaque système de stockage va posséder des forces et des champs d’application différents.
Les cookies vont être très utiles pour stocker un petit nombre de données et notamment pour stocker des données d’identification (données de connexion).
Cela est dû au fait que les cookies vont être envoyés au serveur en même temps que chaque requête, ce qui fait que le serveur va pouvoir utiliser les données fournies par ceux-ci identifier immédiatement un visiteur.
D’un autre côté, les autres systèmes de stockage dans le navigateur comme l’API Web Storage stockent des données qui vont rester dans le navigateur : les objets ne vont pas être envoyés au serveur.
Cela fait qu’on va pouvoir stocker un nombre beaucoup plus important de données sans ralentir l’exécution du script comme le ferait un cookie à cause du transfert des données au serveur.
En plus de cela, l’API Web Storage va nous permettre de stocker des données plus simplement que les cookies et applique la politique de même origine, ce qui limite les problèmes de sécurité.
Une origine est la combinaison d’un protocole, un hôte et d’un numéro de port. La politique de même origine indique qu’il n’est pas possible d’accéder à un contenu d’une certaine origine depuis une autre origine.
Les propriétés et méthodes de localstorage et de sessionstorage
Les objets localstorage
et sessionstorage
vont nous fournir les propriétés et méthodes suivantes :
setItem()
: permet de stocker une paire clef/valeur. Prend une clef et une valeur en arguments ;getItem()
: permet d’obtenir une valeur liée à une clef. Prend une clef en argument ;removeItem()
: permet de supprimer une paire clef/valeur. Prend une clef en argument ;clear()
: permet de supprimer tous les objets de stockage. Ne prend pas d’argument ;key()
: permet d’obtenir une clef située à une certaine position. Prend un index en argument ;length
: permet d’obtenir le nombre de données stockées.
Utiliser l’API Web Storage – Exemple pratique
Pour cet exemple, on va imaginer qu’on possède un site et on va vouloir proposer un thème sombre à nos utilisateurs. Ici, on va se contenter de changer la couleur de fond de la page.
On va enregistrer le choix fait par l’utilisateur en utilisant localstorage
afin que celui-ci soit conservé pour ses prochaines visites.
Côté HTML, on va utiliser un élément de formulaire pour laisser la possibilité à l’utilisateur de choisir sa couleur de fond.
En JavaScript, on va déjà cibler l’élément html
auquel on va ajouter la couleur de fond ainsi que l’élément de formulaire pour récupérer la valeur inscrite par l’utilisateur.
Ensuite, dans notre script, on va commencer par vérifier si l’objet de stockage qu’on souhaite créer est déjà présent (cas d’un utilisateur revenant sur notre site) ou pas (cas d’un nouvel utilisateur).
On utilise ici getItem()
pour rechercher la valeur liée à la clef « bgtheme ». Si une valeur est trouvée, c’est que l’objet de stockage existe déjà et nous n’avons donc pas à le créer. On va alors simplement se contenter de mettre à jour les préférences de l’utilisateur grâce à une fonction updateBg()
.
La fonction updateBg()
va récupérer la dernière valeur de l’objet de stockage bgtheme
et va l’utiliser pour mettre à jour la couleur de fond de la page.
On récupère la dernière valeur de l’objet de stockage avec localStorage.getItem('bgtheme')
. On utilise ensuite cette valeur pour mettre à jour la couleur de fond de notre élément html
. On en profite également pour modifier la valeur visible du champ du formulaire.
Si aucune valeur n’est trouvée par getItem()
, cela signifie que l’objet de stockage n’existe pas et il faut le créer. Pour cela, on va créer une fonction setBg()
qui va utiliser setItem()
comme ceci :
Notre fonction setBg()
crée un objet de stockage dont la clef est bgtheme
et la valeur est égale à celle de l’attribut value
de notre champ de formulaire. Elle exécute également la fonction updateBg()
qui va servir à mettre à jour la couleur de fond en soi.
Finalement, on va vouloir que ces changements s’effectuent en temps réel. Pour cela, on va utiliser un gestionnaire d’évènements pour l’évènement change
.
Dès qu’un utilisateur quitte le champ de formulaire, la couleur de fond de la page est mise à jour. Si l’utilisateur quitte le site et revient plus tard, les changements sont enregistrés et la dernière couleur choisie est conservée.
See the Pen
Cours JavaScript 14.2.1 by Pierre (@pierregiraud)
on CodePen.
Notez par ailleurs qu’un évènement StorageEvent
est lancé dès qu’un changement est apporté à un objet de stockage localstorage
. L’idée principale à retenir ici est que l’évènement est déclenché dans toutes les pages ayant accès à l’objet excepté pour la page courante.
Cela permet aux autres pages d’un domaine qui utilisent le même objet d’appliquer automatiquement les mêmes changements que ceux effectués sur la page courante.