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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
---
title: Storage
slug: DOM/Storage
tags:
- Applications_web_hors_ligne
- DOM
- JavaScript
- Référence_du_DOM_Gecko
translation_of: Web/API/Web_Storage_API
translation_of_original: Web/Guide/API/DOM/Storage
---
<p>{{ ApiRef() }} {{ Fx_minversion_header(2) }}</p>
<div class="note">
<p>Cette traduction est complètement obsolète, veuillez consulter l'original anaglais)</p>
</div>
<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
<p>DOM Storage est le nom donné à l'ensemble des <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">fonctionnalités de stockage</a> introduites dans la spécification <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>. DOM Storage est conçu pour fournir une alternative aux cookies pour le stockage d'informations, alternative plus grande, plus sûre et plus facile à utiliser. DOM Storage n'est actuellement disponible que dans les navigateurs basés sur Mozilla, en particulier <a href="fr/Firefox_2">Firefox 2</a> et suivants.</p>
<div class="note">
<b>Note :</b> DOM Storage ne doit pas être confondu avec <a href="/Storage">mozStorage</a> (les interfaces XPCOM de Mozilla vers SQLite) ou l'<a href="fr/API_de_restauration_de_session">API de restauration de session</a> (un utilitaire de stockage <a href="fr/XPCOM">XPCOM</a> utilisable par les extensions).</div>
<h3 id="Description" name="Description">Description</h3>
<p>Le mécanisme DOM Storage est un moyen par lequel des paires de chaînes clé/valeur peuvent être stockées de manière sûre et récupérées pour être utilisées plus tard. L'ajout de cette fonctionnalité a pour but de fournir un moyen complet par lequel des applications interactives peuvent être construites (avec des possibilités avancées, comme la possibilité de travailler « hors ligne » pendant des périodes prolongées).</p>
<p>Pour l'instant, seuls les navigateurs basés sur Mozilla fournissent une implémentation fonctionnelle de la spécification DOM Storage. Cependant, Internet Explorer dispose d'une fonctionnalité semblable appelée « <a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">userData behavior</a> » qui permet également de conserver des données d'une session de navigation à une autre.</p>
<p>DOM Storage est utile car il n'existe aucune bonne méthode limitée au navigateur pour conserver une quantité raisonnable de données pour une période donnée. Les <a class="external" href="http://fr.wikipedia.org/wiki/Cookie_(informatique)">cookies de navigation</a> ont une capacité limitée et ne permettent pas d'organiser les données conservées, tandis que d'autres méthodes (comme <a class="external" href="http://www.macromedia.com/support/documentation/fr/flashplayer/help/help02.html">Flash Local Storage</a>) nécessitent un plugin externe.</p>
<p>Une des premières applications publiques à utiliser la fonctionnalité DOM Storage (en plus de la fonctionnalité userData Behavior d'Internet Explorer) a été <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> (une application de prise de notes) écrite par <a class="external" href="http://aaronboodman.com/">Aaron Boodman</a>. Dans son application, Aaron enregistre de manière simultanée les notes sur un serveur distant (lorsque la connexion Internet est disponible) et dans un espace d'enregistrement local. Cette méthode permet à l'utilisateur de rédiger ses notes de manière sûre, même avec une connexion Internet sporadique.</p>
<p>Bien que le concept et l'implémentation présentés dans halfnote soient relativement simples, sa création montre la possibilité d'une nouvelle gamme d'applications Web utilisables tant en ligne qu'hors ligne.</p>
<h3 id="R.C3.A9f.C3.A9rence" name="R.C3.A9f.C3.A9rence">Référence</h3>
<p>Les objets suivants sont globaux et existent comme propriétés de tout <a href="fr/DOM/window">objet <code>window</code></a>. Cela signifie qu'on peut y accéder avec <code>sessionStorage</code> ou <code>window.sessionStorage</code>. (c'est important à savoir, parce qu'on peut alors utiliser des iframes pour stocker ou accéder à des données supplémentaires à celles immédiatement disponibles dans la page).</p>
<h4 id="sessionStorage" name="sessionStorage"><code>sessionStorage</code></h4>
<p>Il s'agit d'un objet global (<code>sessionStorage</code>) qui conserve un espace de stockage disponible pour toute la durée de la session de la page. Une session de page dure aussi longtemps que le navigateur est ouvert et se poursuit au travers des rechargements de la page. L'ouverture d'une page dans un nouvel onglet ou une nouvelle fenêtre provoquera la création d'une nouvelle session pour la page.</p>
<pre class="eval">// Enregistre des données dans l'espace de stockage de la session courante
sessionStorage.username = "John";
// Accède à une donnée stockée
alert( "username = " + sessionStorage.username );
</pre>
<p>L'objet <code>sessionStorage</code> est surtout utile pour conserver des données temporaires qui doivent être enregistrées et restaurées si la fenêtre du navigateur est accidentellement ou volontairement rafraichie.</p>
<div class="bug">
<b>Note :</b> <code>sessionStorage</code> devrait également être capable de restaurer les données après un crash (et une restauration de la session) du navigateur, mais suite au {{ Bug(339445) }} cela ne fonctionne pas encore dans Firefox. Tant qu'il n'est pas résolu, l'utilisation de <code>sessionStorage</code> comme mesure préventive est discutable.</div>
<p><b>Exemples :</b></p>
<p>Enregistre automatiquement le contenu d'un champ texte et, si la page est rafraichie accidentellement, restaure ce contenu afin qu'aucun texte ne soit perdu.</p>
<pre class="eval"> // Recherche le champ texte à suivre
var field = document.getElementById("field");
// Vérifie s'il y a une valeur de sauvegarde automatique
// (ce qui se produira uniquement si la page est rafraichie)
if ( sessionStorage.autosave ) {
// Restaure le contenu du champ texte
field.value = sessionStorage.autosave;
}
// Vérifie le contenu du champ texte à chaque seconde
setInterval(function(){
// Et enregistre le résultat dans l'objet de stockage de session
sessionStorage.autosave = field.value;
}, 1000);
</pre>
<p><b>Pour plus d'informations :</b></p>
<ul>
<li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">La spécification de <code>sessionStorage</code></a></li>
</ul>
<h4 id="globalStorage" name="globalStorage"><code>globalStorage</code></h4>
<p>{{ Non-standard_header() }} Il s'agit d'un objet global (<code>globalStorage</code>) qui conserve une série d'espaces de stockage privés pour conserver des données sur une longue période de temps (par exemple depuis plusieurs pages et d'une session de navigation à l'autre).</p>
<pre class="eval">// Enregistre des données auxquelles seuls les scripts du domaine peuvent accéder
globalStorage['mozilla.org'].snippet = "<b>Hello</b>, comment ça va ?";
// Enregistre des données auxquelles toute page Web, sur n'importe quel domaine, peut accéder
globalStorage[<span class="nowiki">''</span>].favBrowser = "Firefox";
</pre>
<p>Plus précisément, l'objet <code>globalStorage</code> permet d'accéder à différents objets de stockage dans lesquels des données peuvent être enregistrées. Par exemple, si l'on voulait construire une page Web utilisant <code>globalStorage</code> sur ce domaine (developer.mozilla.org) nous devrions disposer de l'objet de stockage suivant :</p>
<ul>
<li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> — Toutes les pages Web au sein du sous-domaine developer.mozilla.org peuvent lire et écrire des données dans cet objet de stockage.</li>
</ul>
<p>{{ Fx_minversion_note(3, "Firefox 2 permettait d\'accéder à des objets de stockage plus haut dans la hiérarchie de domaine que le document actuel. Ce n\'est plus permis dans Firefox 3, pour des raisons de sécurité. Cet ajout à HTML 5 a également été retiré des spécifications HTML 5 en faveur de <code>localStorage</code>, qui n\'a pas encore été implémenté dans Firefox.") }}</p>
<p><b>Exemples :</b></p>
<p>Pour tous ces exemples, vous aurez besoin d'insérer un script (en plus des lignes de codes suivantes) dans chaque page sur laquelle vous désirez afficher le résultat.</p>
<p>Retient le nom d'utilisateur d'un visiteur pour le sous-domaine particulier visité :</p>
<pre class="eval"> globalStorage['developer.mozilla.org'].username = "John";
</pre>
<p>Compte le nombre de fois qu'un visiteur visite n'importe quelle page de votre domaine :</p>
<pre class="eval"> // parseInt doit être utilisée car toutes les données sont stockées comme des chaînes
globalStorage['mozilla.org'].visits =
parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;
</pre>
<h3 id="Pour_plus_d.27informations" name="Pour_plus_d.27informations">Pour plus d'informations</h3>
<ul>
<li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Spécification Web Applications 1.0</a></li>
<li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">Spécification de Web Applications 1.0 Storage</a></li>
<li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Activer/Désactiver DOM Storage dans Firefox ou SeaMonkey</a></li>
</ul>
<h3 id="Exemples" name="Exemples">Exemples</h3>
<ul>
<li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/">Exemples basiques utilisant DOMStorage</a></li>
<li><a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> — Application de prise de notes utilisant DOM Storage.</li>
</ul>
<h3 id="Sujets_li.C3.A9s" name="Sujets_li.C3.A9s">Sujets liés</h3>
<ul>
<li><a class="external" href="http://fr.wikipedia.org/wiki/Cookie_(informatique)">Cookies HTTP</a> (<code><a href="fr/DOM/document.cookie">document.cookie</a></code>)</li>
<li><a class="external" href="http://www.macromedia.com/support/documentation/fr/flashplayer/help/help02.html">Flash Local Storage</a> (enregistrement local avec Flash)</li>
<li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a> (en anglais)</li>
</ul>
<div class="noinclude">
</div>
<div class="note">
<p>{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}</p>
</div>
<p> </p>
|
