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.
- Retrouver l'information dans une autre page. (Cliquer sur le bouton Stocker d'abord).