• Astuce • HTML 5 & Javascript : Web Storage •

Le web storage est une solution de stockage en local disponible depuis HTML 5. Il permet de stocker rapidement et simplement des données sans faire intervenir le serveur.
Bien plus puissant mais d'usage différent des cookies qui proposent un stockage en cache de 4Ko maximum, cette nouvelle solution permet un stockage de données allant jusqu'à 5Mo par domaine.

Le web storage propose deux interfaces :

- le sessionStorage :
La durée de vie des données est limitée a une session de navigation et un seul onglet/fenêtre (lorsque l'onglet où la fenêtre en question est fermée, les données sont effacées)

- le localStorage :
Les données n'ont aucune limite de durée de vie et peuvent être accessibles sur differents onglets/fenêtres d'un navigateur (pas de perte de données lors de la fermeture de la fenêtre, de l'onglet ou du navigateur).

Bien que d'usage complêtement différent, ces deux interfaces possèdent les mêmes méthodes et propriétés Javascript assurant leur gestion :

setItem(clé, valeur)

Stocke une clé et sa valeur, ou modifie la valeur associée à la clé si elle existe déjà :

localStorage.setItem("favoritePage", "dictionnaire");
//favoritePage = "dictionnaire"

localStorage.setItem("favoritePage", "astuces");
//favoritePage = "astuces"
getItem(clé)

Retourne la valeur associée à une clé du storage :

localStorage.getItem("favoritePage");
//retourne "astuces"
key(index)

Retourne la clé stockée à l'index spécifié :

localStorage.key(0);
//retourne "favoritePage"
length

Nombre de clés stockées :

localStorage.length
//retourne 1
removeItem(clé)

Supprime la clé spécifiée et sa valeur :

localStorage.removeItem("favoritePage");
clear()

Supprime toutes les clés et leurs valeurs :

localStorage.clear();