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 windows.

L'objet, qui représente un espace de stockage, est créé pour un nouveau visiteur et supprimé quand l'utilisateur se déconnecte, ou à la demande d'un script.

Compatibilité: Implémenté sur Firefox 3, Internet Explorer 8.

But de sessionStorage

C'est une alternative aux cookies, 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 Storage

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

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 une clé.
void clear()   vide l'espace de stockage.

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 stocke des clé et des valeurs en les associant à l'objet 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;

Démonstration

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

Voir l'autre page.

Conclusion

L'objet peut être utilisé dans une application Web en demandant à l'utilisateur de la faire tourner sous un navigateur compatible.