SessionStorage dans HTML 5

sessionStorage est un attribut de DOM défini dans HTML 5. On l'utilise en JavaScript comme objet global ou comme sous-objet de window, ou d'une instance de window quand plusieurs fenêtres sont ouvertes .

window.sessionStorage.saved="contenu"

sessionStorage est un objet de type storage qui représente un espace de stockage défini comme attribut de chaque fenêtre.
Il est créé pour un nouveau visiteur et supprimé quand l'utilisateur se déconnecte, ou à la demande d'un script.

Il est implémenté dans les navigateur depuis Firefox 3, Internet Explorer 8 et sur Chrome, Safari.

Il existe un autre objet d'interface Storage, localStorage qui est indépendant de la fenêtre et la session et correspond à un espace de stockage sur le site de l'utilisateur, en remplacement des cookies.

sessionStorage vs cookies

C'est une alternative aux cookies de session, mais plus performante. Les données enregistrées dans l'objet sont accessibles dans toutes les pages Web d'un même site pour le même utilisateur, durant la session.
Donc cela se rapproche du gestionnaire de session de PHP et cela permet par exemple d'enregistrer un mot de passe pour un utilisateur donnant accès à des services tant que l'on reste connecté.

Sous Internet Explorer 8, le stockage fournit à sessionStorage atteint 10 mégas octets alors qu'il est de 4 ko pour chaque cookie.

Méthodes de l'interface Storage

Les méthodes de l'interface Storage de HTML 5 sont utilisables avec sessionStorage.

Type Nom et arguments Rôle
DOMString key(int)
Retourne le nom d'une clé à l'index donné en argument.
DOMString getItem(DOMString)
Retourne la valeur de la clé donnée.
void setItem(DOMString, DOMString)
Assigne une valeur à une clé.
void removeItem(DOMString)
Supprime la clé dont le nom est donné en argument.
void clear()
Vide l'espace de stockage. Toutes les clés sont supprimées.

On peut créer une clé et lui assigner une valeur directement comme dans tout objet. De même on peut lire la valeur d'une clé directement aussi, comme montré plus loin.

Tester la compatibilité

On vérifie le support de l'objet avec ce code JavaScript:

if(sessionStorage == null) document.write("Storage non supporté par le navigateur");

Et dans le cas présent:

Utilisation de l'objet

On peut utiliser sessionStorage directement, l'objet windows étant implicite. Il doit être explicite si on désigne une autre fenêtre que la fenêtre courant.

Les valeurs sont assignées aux attributs de l'instance de sessionStorage:

sessionStorage.login = "utilisateur";

ou

sessionStorage["login"] = "utilisateur";

On accède aux données stockées de la même façon:

var login = sessionStorage.login;

Ces attributs ne sont pas prédéfinis, ce sont des clés comme dans un tableau que l'on crée dynamiquement.

Démonstration

On va entrer un texte dans cette page et tenter de l'afficher dans une autre page.

Taper quelques mots:

© 2008-2012 Xul.fr