Mis à jour le mardi 8 janvier 2013
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

DOM Storage et Persistence

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !
Image utilisateurImage utilisateur

Méthode

Image utilisateurImage utilisateur

Internet Explorer

Image utilisateurImage utilisateur

Firefox

Image utilisateurImage utilisateur

Opera

Image utilisateurImage utilisateur

Google Chrome

Image utilisateurImage utilisateur

Safari

DOM Storage

Oui
via Persistence avant IE8

Oui

Oui

Oui

Oui

Introduction

DOM Storage est le nom donné à un ensemble de fonctionnalités de stockage introduites dans la spécification HTML5.
DOM Storage est présenté comme une alternative aux cookies en fournissant une plus grande capacité de stockage, une sécurité renforcée, et un accès plus aisé.

Ce concept de « cookies de grande capacité » n'est pas nouveau. Internet Explorer, depuis sa version 5 prend en charge un système appelé Persistence qui permet de spécifier des objets qui vont persister pendant toute une session de navigation. Persistence est quelque chose d'assez vaste et regroupe en son sein plusieurs comportements (behaviours), et nous allons nous intéresser au comportement userData, qui permet de sauvegarder de grandes quantités de données en utilisant le format XML. C'est l'équivalent de l'objet sessionStorage de DOM Storage.

DOM Storage

Comme je l'ai déjà laissé entendre, DOM Storage est une façon simple de stocker une grande quantité d'information d'une manière sécurisée et persistante. C'est donc comme les cookies, mais en mieux.

Espace de stockage

Pour un domaine donné, on peut stocker environs 2KB de données avec des cookies. Avec DOM Storage, la capacité est étendue à environ 5120KB. Les possibilités de stockage sont donc beaucoup plus grandes. Cependant, cette taille peut varier suivant les navigateurs, car il n'y a pas de capacité définie dans la spécification HTML5 (qui spécifie le DOM Storage).

sessionStorage et localStorage

Avec DOM Storage, les méthodes pour stocker et récupérer des données sont beaucoup plus simples qu'avec les cookies, avec lesquels il faut créer des fonctions pour parcourir la chaîne de caractères et caetera. Non, DOM Storage met a disposition des méthodes très simples :

sessionStorage["user"] = "Thunderseb";

alert(sessionStorage["user"]);  // Affiche Thunderseb

Cet exemple illustre l'utilisation de l'objet sessionStorage. Cet objet est un sous-objet de window : window.sessionStorage. On peut donc utiliser une structure conditionnelle pour savoir si le navigateur gère cet objet :

if (window.sessionStorage) {
        // OK
}

sessionStorage permet de stocker des données pendant tout le temps que dure la session de navigation. Seul le domaine de création peut y accéder. Chaque sauvegarde de sessionStorage est accessible par un nom unique, que vous devez spécifier entre les crochets. Cela vous permet de créer et récupérer très facilement vos données, au contraire des cookies.

Dans le même ordre d'idée, il existe localStorage. Le fonctionnement est semblable à sessionStorage, hormis le fait que les données restent beaucoup plus longtemps en mémoire, ça ne se limite pas simplement à la session de navigation. C'est l'équivalent du cookie en fait.

localStorage["user"] = "Thunderseb";

alert(localStorage["user"]); // Affiche  Thunderseb

Persistence userData

L'utilisation de Persitence et plus particulièrement du comportement userData est un peu plus complexe que l'utilisation de DOM Storage.

Les données de Persistence sont entreposées sous la forme d'un arbre XML, et avant de vouloir enregistrer et récupérer des données, il faut spécifier la « branche XML » (le n'ud) sur laquelle on travaille.

Le principe de fonctionnement d'userData n'est pas identique à DOM Storage. Avec userData, il faut spécifier un élément HTML comme élément de « transit ». C'est via cet élément que les données à enregistrer et à récupérer transiteront. En fait, cet élément fera office d'objet, sur lequel nous appliquerons des méthodes et des propriétés.

Pour définir un élément de transit, on utilise la propriété CSS behavior (propriété non-W3C) :

<style type="text/css">
        .storeuserData { behavior: url(#default#userData); }
</style>

Ainsi, l'élément (ou les éléments) avec la classe storeuserData fait office d'élément de transit.

Voici comment on écrit et on récupère des données :

// Création de l'objet oPersist
var oPersist = document.getElementById("oPersistInput"); 
 
// Ecriture
oPersist.setAttribute("user", oPersist.value);
oPersist.save("oXMLBranch");
 
// Lecture 
oPersist.load("oXMLBranch");
alert(oPersist.getAttribute("user"));

Les méthodes load et save ont comme argument le nom de la branche XML à utiliser. Si la branche n'existe pas, elle est évidemment créée.

setAttribute et getAttribute sont exactement les mêmes méthodes que celles utilisées pour définir un attribut et y accéder via le DOM. Et en réalité, c'est logique, puisque les données sont enregistrées dans une branche XML !

Cela veut donc dire que vous pouvez ajouter plusieurs attributs à une même branche !
Les données enregistrées sont donc entreposées sous forme d'attributs XML et non sous forme de clé/valeur comme c'est le cas avec DOM Storage.

Exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Techniques AJAX - Persistence - userData</title>
<style type="text/css">
        .storeuserData { behavior: url(#default#userData); }
</style>
<script type="text/javascript">
        function fnSaveInput(){
                var oPersist = document.getElementById("oPersistInput");;
                oPersist.setAttribute("user", oPersist.value);
                oPersist.save("userBranch");
        }
        
        function fnLoadInput(){
                var oPersist = document.getElementById("oPersistInput");
                oPersist.load("userBranch");
                oPersist.value = oPersist.getAttribute("user") || "";
        }
</script>
</head>
<body>
<form id="oPersistForm">
        <input class="storeuserData" type="text" id="oPersistInput" />
        <input type="button" value="Load" onclick="fnLoadInput()" />
        <input type="button" value="Save" onclick="fnSaveInput()" />
</form>
</body>
</html>

Fonction interopérable

Afin de pouvoir utiliser les capacités de DOM Storage sur les navigateurs modernes et les versions antérieures d'Internet Explorer, il est bon de créer un système qui fonctionne dans les différents cas. Ce système le voici en exemple et regroupe DOM Storage et userData. Notez que je me sers d'un else if, et non d'un else, car pour le moment seuls Internet Explorer et Firefox sont à même de gérer ces principes de stockage :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Techniques AJAX - Dom Storage &amp; Persistence</title>
<!--[if lte IE 7]>
        <style>
                .storeuserData { behavior: url(#default#userData); }
        </style>
<![endif]-->
<script type="text/javascript">
        function fnSaveInput() {
                var oPersist = document.getElementById("oPersistInput");
                if (window.globalStorage) {
                        var storage = globalStorage['nayi.free.fr'];
                        storage.setItem("contentTest", oPersist.value);
                } else if (window.ActiveXObject) {
                        oPersist.setAttribute("contentTest", oPersist.value);
                        oPersist.save("oXMLBranch");
                }
        }
 
        function fnLoadInput() {
                var oPersist = document.getElementById('oPersistInput');
                if (window.globalStorage) {
                        var storage = globalStorage["nayi.free.fr"];
                        oPersist.value = storage.getItem("contentTest");
                } else if (window.ActiveXObject) {
                        oPersist.load("oXMLBranch");
                        oPersist.value = oPersist.getAttribute("contentTest"); 
                } 
        }
</script>
</head>
<body>
<form id="oPersistForm">
        <input class="storeuserData" type="text" id="oPersistInput" />
        <input type="button" value="Load" onclick="fnLoadInput()" />
        <input type="button" value="Save" onclick="fnSaveInput()" />
</form>
</body>
</html>

Afin de ne pas provoquer d'erreurs et de warnings au niveau des consoles d'analyse des navigateurs autres qu'Internet Explorer, j'ai placé le code CSS dans une instruction conditionnelle. Ainsi, seules les versions antérieures ou égales à la version 7 tiendront compte de ce code CSS (puisqu'Internet Explorer 8 gère nativement DOM Storage).

Exemple de certificat de réussite
Exemple de certificat de réussite