Javascript : Utiliser le Web Storage avec localStorage

Qu’est-ce que c’est ?

Le web storage est une fonctionnalité HTML5 qui permet de stocker des données au niveau du navigateur. Deux objets permettent d’utiliser le web storage : localStorage et sessionStorage (idem, mais les données ne sont stockées que pendant le temps de la session).

Pourquoi pas un cookie ?

  • Le web storage n’est pas limité dans le temps
  • L’espace disque alloué est de 5Mo par domaine, selon les recommandations du W3C (4Ko pour un cookie). En pratique, la taille par défaut varie entre 2,5Mo et 10Mo selon les navigateurs.
  • Un cookie est renvoyé au serveur à chaque chargement de page. Avec le web storage, tout se passe côté client (économie de bande passante).
  • Il n’y a pas de moyen simple pour le client de désactiver le web storage.
  • L’API est plus simple que celle des cookies

MAIS : Les cookies ont un meilleur support de la part des navigateurs.

Qui le supporte ?

IE 8+, FF 3.5+, Chrome 4+, Opera 10.5+, Safari 4+, Iphone et Android 2.0+.

Comment l’utiliser ?

Vérifier le support du navigateur :

if (localStorage) {
    //Traitement...
}

Enregistrer une paire clé/valeur :

//Méthode 1 :
localStorage.setItem("maClé", "maValeur");

//Méthode 2 :
localStorage["maClé"] = "maValeur";

Lire une valeur :

//Méthode 1 :
var valeur = localStorage.getItem("maClé");

//Méthode 2 :
var valeur = localStorage["maClé"];

//Obtenir une clé par son index :
var i = 123;
var key = localStorage.key(i);
var valeur = localStorage.getItem(key);

Effacer des données :

localStorage.removeItem("maClé");

Vider le localStorage :

localStorage.clear();

2 Responses

  1. john slith says:

    Est-ce qu’il existe des failles de sécurité connues ?

    • ebernigaud says:

      Non. Ou plutôt, pas directement.
      Le web storage dépend de la politique de même origine (same-origin policy), l’espace de stockage est propre à un seul domaine et n’est accessible que par lui. Cependant, si le site web est vulnérable au XSS (cross site scripting), alors le contenu du web storage est accessible de l’extérieur, tout comme les cookies notamment.

      Plus de précisions :
      Same origin policy – W3C
      Cross site scripting

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.