Une API de stockage de données côté client : Web Storage
Définition : Web Storage
Web Storage est une technique HTML5 dotée d'une API permettant de stocker des données directement dans le navigateur. C'est une alternative aux cookies :
moins limitée en taille (au moins 5MB par domaine) ;
sans communication avec le serveur distant.
Les données sont stockées sous forme de clés/valeurs.
Remarque : Stockage par navigateur et par domaine
Le stockage Web Storage est directement lié au navigateur, les données ne seront donc pas partagées d'un navigateur à un autre.
En outre, les données sont rattachées par domaine (protocole et nom) et donc invisibles en visitant un autre domaine.
Avantages et inconvénients
Avantages :
Compatible sur les navigateurs récents (iOS et Android inclus) depuis des années.
API simple d'utilisation.
Appels successifs facilités (API synchrone).
Permet la synchronisation entre plusieurs onglets/fenêtres ouverts.
Inconvénients :
Faibles performances lors du traitement de données volumineuses (API synchrone).
Faibles performances de recherche (par itération manuelle, pas d'indexation).
Faibles performances lors du traitement de données complexes (nécessité de (dé)linéariser les données, le seul type accepté étant la string).
Pas de contrôle de sécurité/d'intégrité, données non structurées.
localStorage vs sessionStorage
L'API Web Storage propose deux interfaces aux méthodes identiques, localStorage et sessionStorage.
Ci-dessous un tableau comparatif entre les deux :
localStorage | sessionStorage | |
|---|---|---|
Mémorisation des données | sans limite de durée de vie | durée d'une session de navigation |
Portée | tout onglet ou fenêtre | fenêtre ou onglet actif |
Remarque :
Les fenêtres popup ouvertes depuis la fenêtre active peuvent accéder au sessionStorage, et ce de même pour les iframes de la fenêtre active.
Syntaxe : Méthodes de l'API
Accesseurs en lecture/écriture (getter/setter)
setItem(clé,valeur) : stocke une paire clé/valeur
getItem(clé) : renvoie la valeur associée à une clé
Autres méthodes :
removeItem(clé) : supprime la paire clé/valeur
key(index) : renvoie la clé stockée à l'index spécifié
clear() : efface toutes les paires
length() : renvoie le nombre de paires existantes
Exemple : Stockage et récupération
Remarque : Multiples syntaxes getter/setter
Les syntaxes suivantes sont équivalentes :
// StockagelocalStorage.couleur = "vert";
localStorage["couleur"] = "vert";
localStorage.setItem("couleur", "vert");
// Accèsvar couleur = localStorage.couleur;
var couleur = localStorage["couleur"];
var couleur = localStorage.getItem("couleur");
// Stockage
localStorage.couleur = "vert";
localStorage["couleur"] = "vert";
localStorage.setItem("couleur", "vert");
// Accès
var couleur = localStorage.couleur;
var couleur = localStorage["couleur"];
var couleur = localStorage.getItem("couleur");Les deux dernières syntaxes sont nécessaires si la clé utilisée contient par exemple des espaces.
