Local Storage et Session Storage (HTML5)

Écrit par Benske. Posted in HTML5 et CSS3

Local Storage et Session Storage sont de nouvelles technologies HTML5 qui permettent de sauvegarder des données dans le client (le navigateur web), contrairement aux sessions "normales" qui sauvegardent les données dans le serveur. Voici un petit tutoriel pour utiliser ces nouvelles technologies.

Le grand avantage donc de ces nouvelles technologies est qu'on peut accéder à ces données sans passer par le serveur, ce qui rehausse la performance (et donc la vitesse).
Employer ces nouvelles technologies est extrêmement simple! Voici un petit tutoriel qui explique comment utiliser LocalStorage et SessionStorage.

Tout d'abord la différence entre Local Storage et Session Storage est que le premier sauvegarde les données sans tenir compte d'une limite de temps. Session Storage, par contre, sauvegarde les données durant une seule session. Donc si vous sauvegardez vos données avec SessionStorage celles-ci seront disparues à l'ouverture par exemple d'un nouvel onglet. 

Ces technologies ne sont pas cross browser compatible, il vous faut donc tester si le navigateur de l'utilisateur supporte cette technologie. Pour ce faire, je vous conseille d’utiliser la libraire javascript Modernizr qui offre la possibilité de tester si une technologie HTML5 est supportée par le navigateur.

Pour ce faire:
if (Modernizr.localstorage) {
}else{// la technologie n'est pas supportée dans votre navigateur.}

C'est similaire pour Session Storage
if (Modernizr.sessionstorage)) {
}else{// la technologie n'est pas supportée dans votre navigateur.} 

On peut facilement ajouter des données dans ces databases en utilisant des key-value pairs (clé). Voici un exemple:
var utilisateur = localStorage["utilisateur"]; // rend la valeur de la clé utilisateur ou sessionstorage["utilisateur"] pour sessionStorage

Pour ajouter une valeur c'est aussi simple:
localStorage["utilisateur"] = votreValeur; 

Vous pouvez également utiliser la méthode setItem de LocalStoragelocalStorage.setItem['cle', 'valeur']; // idem pour sessionStorage

Pour supprimer une valeur vous pouvez utiliser la fonction removeItemlocalStorage.removeItem(key);

Pour supprimer toutes les combinaisons clé - valeurs (key-value) vous pouvez utiliser la méthode clear: localStorage.clear();

Google+

Suivez Mess-Land sur Google+ et restez informé sur la musique, l'actualité, les sports et le multimédia.

Et Facebook