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 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 | 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 | 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
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 | localStorage["user"] = "Thunderseb";
alert(localStorage["user"]); // Affiche Thunderseb
|
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 | <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 | // 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 : 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 : 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 & 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).
Flux RSS News
Twitter
Facebook