Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
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.
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 globalStorage
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 : JavaScript1
2 | 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 : JavaScript1
2
3 | if(window.sessionStorage) {
// OK
}
|
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
globalStorage. Le fonctionnement est semblable à
sessionStorage, hormis le fait que vous pouvez spécifier un domaine d'application :
Code : JavaScript1
2
3 | var storage = globalStorage["nayi.free.fr"]; // Définition de l'objet et du domaine applicatif
storage.setItem("user", "Thunderseb");
alert(storage.getItem("user"); // Affiche Thunderseb
|
Ici, il est plus simple d'instancier un objet
globaStorage, et de le manipuler avec les méthodes
setItem et
getItem qui permettent respectivement d'enregistrer et de récupérer des données.
Le premier argument de setItem est le nom de clé, et le deuxième est la valeur.
Si vous ne spécifiez pas de domaine (dans les crochets de
globalStorage), les données seront accessibles dans tous les domaines. Voici quelques exemples :
Code : JavaScript1
2
3
4 | globalStorage["nayi.free.fr"]; // Seulement disponible sur nayi.free.fr
globalStorage["free.fr"]; // Tous les sites hébergés chez Free.fr peuvent accéder aux données
globalStorage["fr"]; // Tous les sites en .fr peuvent accéder aux données
globalStorage[""]; // Tous les sites peuvent accéder aux données
|
Attention toutefois à bien spécifier un domaine et non une adresse http (i.e.
http://nayi.free.fr).
Notez qu'un objet
sessionStorage peut aussi être instancié de la même manière que
globalStorage, et un domaine peut aussi être défini. L'utilité est moindre, puisque
sessionStorage s'applique automatiquement au domaine qui crée l'objet.
Durée de stockage
Il n'est pas possible, à l'inverse des cookies de spécifier une date d'expiration de vos données. Cependant, vous avez la possibilité de supprimer les espaces alloués pour le stockage avec la méthode
removeItem :
Code : JavaScript1 | storage.removeItem("user");
|
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
behaviour (propriété non-W3C) :
Code : CSS1
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);
oPresist.save("oXMLBranch");
// Lecture
oPersist.load("oXMLBraanch");
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 : Autre1
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> |
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 : Autre1
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 & Persistence</title>
<!--[if lte IE 7]>
<style type="text/css">
.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).
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
312 Zéros connectés |
9 requêtes |
0.1636s (0.1494s)
