Storage

Résumé

DOM Storage est le nom donné à l'ensemble des fonctionnalités de stockage introduites dans la spécification Web Applications 1.0. 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 Firefox 2 et suivants.

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 à celles immédiatement disponibles dans la page).

sessionStorage

Il s'agit d'un objet global (sessionStorage) 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.

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

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 :

• La spécification de sessionStorage

globalStorage

// 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 à 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 globalStorage sur ce domaine (developer.mozilla.org) nous devrions disposer de l'objet de stockage suivant :

• globalStorage['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.

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

Pour plus d'informations

• Spécification Web Applications 1.0
• Spécification de Web Applications 1.0 Storage
• Activer/Désactiver DOM Storage dans Firefox ou SeaMonkey

Exemples

• Exemples basiques utilisant DOMStorage
• halfnote — Application de prise de notes utilisant DOM Storage.

Sujets liés

• Cookies HTTP (document.cookie)
• Flash Local Storage (enregistrement local avec Flash)
• Internet Explorer userData behavior (en anglais)