Storage

  • Raccourci de la révision : DOM/Storage
  • Titre de la révision : Storage
  • ID de la révision : 167736
  • Créé :
  • Créateur : BenoitL
  • Version actuelle ? Non
  • Commentaire Traduction à relire

Contenu de la révision

{{template.DomRef()}} {{wiki.template('Traduction_à_relire')}}

Résumé

DOM Storage et le nom donné à l'ensemble de fonctionnalités de stockage introduites dans la spécification Web Applications 1.0. DOM Storage est conçu pour fournir une alternative plus grande, plus sûre et plus facile à utiliser au stockage d'informations dans des cookies. DOM Storage n'est actuellement disponible que dans les navigateurs basés sur Mozilla, en particulier à partir de Firefox 2.

Note : DOM Storage ne doit pas être confondu avec mozStorage (les interfaces XPCOM de Mozilla vers SQLite) ou l'API de restauration de session (un utilitaire de stockage XPCOM utilisable par les extensions).

Description

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

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 « userData behavior » qui permet également de conserver des données d'une session de navigation à une autre.

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 cookies de navigation ont une capacité limitée et ne permettent pas d'organiser les données conservées, tandis que d'autres méthodes (comme Flash Local Storage) nécessitent un plugin externe.

Une des premières applications publiques à utiliser la fonctionnalité DOM Storage (en plus de la fonctionnalité userData Behavior d'Internet Explorer) a été halfnote (une application de prise de notes) écrite par Aaron Boodman. 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.

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.

Référence

Les objets suivants sont globaux et existent comme propriétés de tout objet window. Cela signifie qu'on peut y accéder avec sessionStorage ou window.sessionStorage. (C'est important à savoir, parce qu'on peut alors utiliser des iframes pour stocker ou accéder à des données supplémentaires par rapport à ce qui est immédiatement disponible dans la page.)

sessionStorage

Il s'agit d'un objet global (sessionStorage) qui conserve un espace de stockage qui restera 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 rechargement 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.

// 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 );

L'objet sessionStorage 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.

Note : sessionStorage devrait également être capable de restaurer les données après un crash (et une restauration de la session) du navigateur, mais suite au {{template.Bug(339445)}} cela ne fonctionne pas encore dans Firefox. Tant qu'il n'est pas résolu, l'utilisation de sessionStorage comme mesure préventive est discutable.

Exemples :

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.

 // 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);

Pour plus d'informations :

globalStorage

Il s'agit d'un objet global (globalStorage) qui conserve une série d'espaces de stockage publics et privés pouvant être utilisé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).

// 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[''].favBrowser = "Firefox";

Plus précisément, l'objet globalStorage permet d'accéder à un certain nombre d'objets de stockage différents dans lesquels des données peuvent être enregistrées. Par exemple, si l'on voulait construire une page Web utilisant globalStorage sur ce domaine (developer.mozilla.org) nous devrions disposer des objets de stockage suivants :

  • globalStorage{{mediawiki.external('\'developer.mozilla.org\'')}} — Toutes les pages Web au sein du sous-domaine developer.mozilla.org peuvent lire et écrire des données dans cet objet de stockage.
  • globalStorage{{mediawiki.external('\'mozilla.org\'')}} — Toutes les pages Web au sein du domaine mozilla.org peuvent lire et écrire dans cet objet de stockage.
  • globalStorage{{mediawiki.external('\'org\'')}} — Toutes les pages Web de tous les domaines en .org peuvent lire et écrire dans cet objet de stockage.
  • globalStorage{{mediawiki.external('<span class=\"plain\"></span>')}} — Toutes les pages Web de tous les domaines peuvent lire et écrire dans cet objet de stockage.

Exemples :

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 en voir le résultat.

Retient le nom d'utilisateur d'un visiteur pour le sous-domaine particulier visité :

 globalStorage['developer.mozilla.org'].username = "John";

Compte le nombre de fois qu'un visiteur visite n'importe quelle page de votre domaine :

 // 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;

Retient tous les sites Web que vous avez visités :

 globalStorage[''].sites += "," + location.hostname;

Pour plus d'informations :

Pour plus d'informations

Exemples

Sujets liés

{{ wiki.languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "pl": "pl/DOM/Storage" } ) }}

Source de la révision

<p>
{{template.DomRef()}}
{{wiki.template('Traduction_à_relire')}}
</p>
<h3 name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p>DOM Storage et le nom donné à l'ensemble de <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 plus grande, plus sûre et plus facile à utiliser au stockage d'informations dans des cookies. DOM Storage n'est actuellement disponible que dans les navigateurs basés sur Mozilla, en particulier à partir de <a href="fr/Firefox_2">Firefox 2</a>.
</p>
<div class="note"><b>Note :</b> DOM Storage ne doit pas être confondu avec <a href="fr/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 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 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 par rapport à ce qui est immédiatement disponible dans la page.)
</p>
<h4 name="sessionStorage"> <code>sessionStorage</code> </h4>
<p>Il s'agit d'un objet global (<code>sessionStorage</code>) qui conserve un espace de stockage qui restera 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 rechargement 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 {{template.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 name="globalStorage"> <code>globalStorage</code> </h4>
<p>Il s'agit d'un objet global (<code>globalStorage</code>) qui conserve une série d'espaces de stockage publics et privés pouvant être utilisé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 = "&lt;b&gt;Hello&lt;/b&gt;, comment ça va ?";

// Enregistre des données auxquelles toute page Web, sur n'importe quel domaine, peut accéder
globalStorage[<span class="plain">''</span>].favBrowser = "Firefox";
</pre>
<p>Plus précisément, l'objet <code>globalStorage</code> permet d'accéder à un certain nombre d'objets de stockage différents 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 des objets de stockage suivants :
</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><li> <code>globalStorage{{mediawiki.external('\'mozilla.org\'')}}</code> — Toutes les pages Web au sein du domaine mozilla.org peuvent lire et écrire dans cet objet de stockage.
</li><li> <code>globalStorage{{mediawiki.external('\'org\'')}}</code> — Toutes les pages Web de tous les domaines en .org peuvent lire et écrire dans cet objet de stockage.
</li><li> <code>globalStorage{{mediawiki.external('&lt;span class=\"plain\"&gt;&lt;/span&gt;')}}</code> — Toutes les pages Web de tous les domaines peuvent lire et écrire dans cet objet de stockage.
</li></ul>
<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 en voir 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>
<p>Retient tous les sites Web que vous avez visités :
</p>
<pre class="eval"> globalStorage[<span class="plain">''</span>].sites += "," + location.hostname;
</pre>
<p><b>Pour plus d'informations :</b>
</p>
<ul><li> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#globalstorage">spécification de <code>globalStorage</code></a>
</li></ul>
<h3 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 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 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://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">Internet Explorer userData behavior</a> (en anglais)
</li></ul>
<div class="noinclude">
</div>
{{ wiki.languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "pl": "pl/DOM/Storage" } ) }}
Revenir à cette révision