Cette traduction est complètement obsolète, veuillez consulter l'original anaglais)
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.
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 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
Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.
globalStorage
) 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).
// 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.
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 localStorage
, qui n'a pas encore été implémenté dans Firefox.
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)