Aller au menu - Aller au contenu

Icône DOM Storage et Persistence

Par Avatar Sébastien de la Marck (Thunderseb) et Avatar Johann Pardanaud (Nesquik69)
Mise à jour : 07/12/2010
Difficulté : Intermédiaire Intermédiaire
6 849 visites depuis 7 jours, dont 152 sur ce chapitre classé 33/786
Chapitre rédigé par Thunderseb
Compatibilité de la méthode
Image utilisateur
Méthode		Image utilisateur
Internet Explorer		Image utilisateur
Firefox		Image utilisateur
Opera		Image utilisateur
Google Chrome		Image utilisateur
Safari
DOM Storage
Oui
via Persistence avant IE8
Oui
Oui
Oui
Oui
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

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

DOM Storage n'est à l'heure actuelle pas implémenté dans tous les navigateurs, loin de là. Firefox 2 implémente DOM Storage, et Internet Explorer 8 implémente certains objets du DOM Storage tels que globalStorage et sessionStorage.


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.
Retour en haut

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 :

Code : JavaScript
1
2
3
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 :

Code : JavaScript
1
2
3
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.

Code : JavaScript
1
2
3
localStorage["user"] = "Thunderseb";

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

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) :

Code : CSS
1
2
3
<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.

Pour la simplicité, il est recommandé d'utiliser un élément de formulaire comme un input=text ou un input=hidden.


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

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// 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



Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!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>
Retour en haut

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 :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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).
Retour en haut
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
9 commentaires pour "DOM Storage et Persistence"
Note moyenne : 3.60 / 4 (138 votes)
Pseudo Commentaire
En ligne Thunderseb # Posté le 24/02/2009 à 11:47:05
Responsable de la validation
Avatar

Avis : Très bon Validateurs
close

Ville : Liège
Pays : Belgique

 Non, ça ne peut pas remplacer les cookies pour le moment, car bcp de navigateurs sont encore à la ramasse avec cette technologie (Safari, Opera, Firefox).

Et le tutoriel n'est pas à jour. En effet, comme l'a souligné _nod ci dessus, globalStorage a été retiré de spécifications HTML5. Il faut que je mette à jour.
Hébergemoi - Realfox 4 - zValido - Left 4 Dead - Portal - Jouer Medic
Dynamisez vos sites web avec Javascript !
 
Hors ligne Melian # Posté le 24/02/2009 à 12:02:35
La Vague de IAM
Avatar

 Dommage çà aurait pu être bien pratique comme technique ^^
Je vois beaucoup de référence à HTML5 mais celui-ci est-il utilisable par le développeur lambda à l'heure actuelle ?
Hors ligne Ange des flammes # Posté le 25/07/2009 à 11:47:15
Avatar

 Il y a une erreur dans le code je pense, tu marques "oXMLBranch" puis "oXMLBraanch" dans la partie "Persistance userData" le code JavaScript
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// Création de l'objet oPersist
var oPersist = document.getElementById("oPersistInput"); 
 
// Ecriture
oPersist.setAttribute("user", oPersist.value);
oPresist.save("oXMLBranch"); // <-
 
// Lecture 
oPersist.load("oXMLBraanch"); // <-
alert(oPersist.getAttribute("user"));
As long as I'm here, they are the prey and I am the hunter.
You always have the choice, hunted or hunter ?
Demon hunter
 
Hors ligne Tiller # Posté le 04/09/2009 à 22:05:42
Seek me Elsewhere, Thanks
Avatar
close

Ville : Toulouse
Pays : France métropolitaine

 Hey seb, oublies pas que tu dois mettre à jour le DOM Storage =°
A time for everything and everything in its time.
 
Connecté Thunderseb # Posté le 04/09/2009 à 22:07:30
Responsable de la validation
Avatar

Avis : Très bon Validateurs
close

Ville : Liège
Pays : Belgique

 Non, ce sera fait, un jour.
Hébergemoi - Realfox 4 - zValido - Left 4 Dead - Portal - Jouer Medic
Dynamisez vos sites web avec Javascript !
 

Voir tous les commentaires