Introduction au stockage DOM

Article
01/29/2010

Nouveautés de Windows Internet Explorer 8

L'API de stockage DOM comprend deux mécanismes connexes pour conserver de façon sécurisée des données côté client à l'aide du Modèle d'objet de document (DOM) sessionStorage (page éventuellement en anglais) et localStorage (page éventuellement en anglais). Ces objets sont des nouveautés d'Internet Explorer 8.

Remarque : Pour les versions antérieures d'Internet Explorer, le stockage permanent des données est assuré par le comportement userData (page éventuellement en anglais).

Cette rubrique contient les sections suivantes :

Qu'est-ce que le stockage DOM ?
Objets de script du stockage DOM
- window.sessionStorage
- window.localStorage
- L'objet de stockage
Événements de stockage DOM
- onstorage
- onstoragecommit
Sécurité et confidentialité
- Contexte et origine de la navigation de niveau supérieur
- L'origine détermine les limites de stockage
- Effacement des zones de stockage
Voir aussi

Qu'est-ce que le stockage DOM ?

Le stockage DOM est souvent comparé aux cookies HTTP. Comme pour les cookies, les développeurs de site Web peuvent stocker des données par session ou des données spécifiques au domaine sous forme de paires nom/valeur sur le client à l'aide du stockage DOM. Toutefois, contrairement aux cookies, le stockage DOM permet de contrôler plus facilement la façon dont les informations stockées par une fenêtre sont visibles pour une autre.

Par exemple, un utilisateur peut ouvrir deux fenêtres de navigateur pour acheter des billets d'avion pour deux vols différents. Toutefois, si l'application Web de la compagnie aérienne utilise des cookies pour stocker son état de session, il peut se produire une « fuite » d'informations entre les transactions, avec le risque que l'utilisateur achète deux billets pour le même vol sans s'en apercevoir. À mesure que les applications savent de mieux en mieux adopter des comportements hors connexion, par exemple en stockant des valeurs localement pour pouvoir revenir plus tard sur le serveur, le risque que cette sorte de « fuite » d'informations se produise augmente sensiblement.

Le stockage DOM offre également beaucoup plus d'espace disque que les cookies. Dans Internet Explorer, les cookies ne peuvent stocker que 4 kilo-octets (Ko) de données. Ce volume d'octets peut être une paire nom/valeur de 4 Ko, ou être constitué de 20 paires nom/valeur d'une taille totale de 4 Ko. En comparaison, le stockage DOM fournit environ 10 mégaoctets (Mo) pour chaque zone de stockage.

Fonctionnellement, les zones de stockage clientes sont assez différentes des cookies. Le stockage DOM ne transmet pas de valeurs au serveur avec chaque demande, comme le font les cookies, et les données hébergées dans une zone de stockage local n'expirent jamais. Il est en outre facile d'accéder à des fractions de données à l'aide d'une interface standard dont la prise en charge est croissante parmi des fournisseurs de navigateur, ce que ne permettent pas les cookies.

Objets de script du stockage DOM

window.sessionStorage
window.localStorage
L'objet de stockage

window.sessionStorage

Le stockage de session est conçu pour des scénarios où l'utilisateur effectue une transaction unique. L' attribut sessionStorage (page éventuellement en anglais) de l'objet window (page éventuellement en anglais) conserve des paires clé/valeur pour toutes les pages chargées pendant la durée de vie d'un onglet unique (pour la durée du contexte de navigation de niveau supérieur). Par exemple, une page peut contenir une case à cocher que l'utilisateur active pour indiquer qu'il souhaite prendre une assurance.

<label>
    <input type="checkbox" onchange="sessionStorage.insurance = checked">
    I want insurance on this trip.
</label>

Une page ultérieure peut ensuite vérifier, à partir du script, si l'utilisateur a activé la case à cocher.

if (sessionStorage.insurance) { ... }

L' objet stockage (page éventuellement en anglais) prend en charge des propriétés expando (« assurance » dans l'exemple précédent). Si le nom de propriété n'existe pas, une paire clé/valeur est créée automatiquement pour le contenir. Notez que les paires clé/valeur sont toujours stockées sous forme de chaînes. Différents types de données tels que des nombres, des valeurs booléennes et des données structurées doivent être convertis en chaînes avant d'être conservés dans une zone de stockage.

Une fois une valeur enregistrée sur sessionStorage, elle peut être récupérée par un script exécuté dans une autre page dans le même contexte. Lorsqu'un autre document est chargé, sessionStorage est initialisé à partir de la mémoire pour les URL de même-origine. (Consultez la section Sécurité et Confidentialité pour plus d'informations.)

Remarque : Bien que l'autorise l' HTML 5 (document non définitif, page éventuellement en anglais) Lien World Wide Web , Internet Explorer 8 ne reprend pas sessionStorage suite à une récupération après incident du navigateur.

window.localStorage

Le mécanisme de stockage local couvre plusieurs fenêtres et est conservé au-delà de la session active. L' attribut localStorage (page éventuellement en anglais) fournit aux domaines des zones de stockage permanentes. Il permet aux applications Web de stocker près de 10 Mo de données utilisateur, telles que des documents entiers ou la boîte aux lettres d'un utilisateur, sur le client pour des raisons de performance.

Par exemple, un site Web peut afficher un décompte correspondant au nombre de fois où l'utilisateur a visité une page avec le script suivant.

<p>
  You have viewed this page
  <span id="count">an untold number of</span>
  time(s).
</p>
<script>
  var storage = window.localStorage;
  if (!storage.pageLoadCount) storage.pageLoadCount = 0;
  storage.pageLoadCount = parseInt(storage.pageLoadCount, 10) + 1;
  document.getElementById('count').innerHTML = storage.pageLoadCount;
</script>

Remarque : Avant d'incrémenter pageLoadCount, il faut d'abord le convertir en nombre à l'aide de la méthode parseInt (JScript 5.6) (page éventuellement en anglais).

Chaque domaine et sous-domaine dispose de sa propre zone de stockage local distincte. Les domaines peuvent accéder aux zones de stockage des sous-domaines et les sous-domaines aux zones de stockage des domaines parents. Par exemple, localStorage['example.com'] est accessible à example.com et à n'importe lequel de ses sous-domaines. Le sous-domaine localStorage['www.example.com'] est accessible à example.com, mais pas à d'autres sous-domaines, tels que mail.example.com.

L'objet de stockage

Les propriétés et méthodes suivantes sont prises en charge à la fois par les objets de session et de stockage local.

Méthode clear (page éventuellement en anglais)

Supprime toutes les paires clé/valeur de la zone de stockage DOM.

Propriété constructor (page éventuellement en anglais)

Retourne une référence au constructeur d'un objet.

Méthode getItem (page éventuellement en anglais)

Récupère la valeur actuelle associée à la clé de stockage DOM.

Méthode key (page éventuellement en anglais)

Récupère la clé à l'index spécifié dans la collection.

Propriété length (page éventuellement en anglais)

Récupère la longueur de la liste de clé/valeur.

Propriété remainingSpace (page éventuellement en anglais)

Récupère l'espace mémoire restant, en octets, pour l'objet de stockage.

Méthode removeItem (page éventuellement en anglais)

Supprime une paire clé/valeur de la collection du stockage DOM.

Méthode setItem (page éventuellement en anglais)

Définit une paire clé/valeur.

Événements de stockage DOM

Internet Explorer déclenche des événements lorsque les données d'une zone de stockage sont mises à jour, afin que les informations puissent être synchronisées entre plusieurs instances du navigateur ou des onglets.

Les événements suivants sont pris en charge.

onstorage
onstoragecommit

onstorage

L' événement onstorage (page éventuellement en anglais) est déclenché dans un document (page éventuellement en anglais) lorsqu'une zone de stockage est modifiée. Tous les documents qui partagent le même contexte de session, et ceux qui affichent actuellement une page du même domaine ou sous-domaine où le stockage local est validé, reçoivent l'événement.

Si l'objet de document cible n'est pas actuellement actif, Internet Explorer ne déclenche pas d'événement.

onstoragecommit

Internet Explorer utilise des fichiers XML pour stocker le stockage local. L' événement onstoragecommit (page éventuellement en anglais) se déclenche lorsqu'un stockage local est écrit sur le disque.

Sécurité et confidentialité

Les données stockées dans le stockage local sont beaucoup plus publiques que celles stockées dans les cookies, qui peuvent se limiter à un chemin d'accès dans un domaine. Même le choix d'une clé difficile à deviner ne procurera aucune confidentialité car l'objet de stockage fournit un moyen de les énumérer.

Voici quelques éléments à prendre en considération :

Contexte et origine de la navigation de niveau supérieur
L'origine détermine les limites de stockage
Effacement des zones de stockage

L'accès à la zone de stockage de session est restreint par le contexte de navigation de niveau supérieur. Dans Internet Explorer, un nouveau contexte de navigation est créé pour chaque onglet. Le script qui s'exécute dans un contexte de navigation de niveau supérieur n'a aucun accès au stockage créé dans un autre. Les sites peuvent ajouter des données au stockage de session, et celui-ci sera accessible à toute page de cette origine ouverte dans la même fenêtre.

L'origine est déterminée par le protocole, le nom d'hôte (ou adresse IP) et le numéro de port de l'URL du document. L'accès au script des données de stockage est autorisé uniquement si l'origine du script correspond à celle de la zone de stockage.

L'origine détermine les limites de stockage

Les limites de quota de disque sont imposées en fonction du domaine de la page qui définit la valeur, plutôt qu'en fonction du domaine où la valeur est définie. Cela évite que des scripts malveillants utilisent le quota de stockage d'un domaine connexe. Cela empêche également de tels scripts d'utiliser des sous-domaines aléatoires pour stocker des quantités non restreintes de données.

La taille de stockage est calculée en fonction de la longueur totale de tous les noms et valeurs de clé, et une zone de stockage unique peut contenir jusqu'à 10 millions d'octets. La propriété remainingSpace (page éventuellement en anglais) est utilisée pour déterminer l'espace de stockage disponible.

Effacement des zones de stockage

L'état de la session est publié dès la fermeture de la dernière fenêtre à référencer ces données. Toutefois, les utilisateurs peuvent effacer des zones de stockage à tout moment en sélectionnant Supprimer l'historique de navigation dans le menu Outils d'Internet Explorer, en activant la case à cocher Cookies et en cliquant sur OK. Cela supprime la session et les zones de stockage local de tous les domaines qui ne figurent pas dans le dossier Favoris et réinitialise les quotas de stockage dans le Registre. Désactivez la case à cocher Conserver les données des sites Web favoris pour supprimer toutes les zones de stockage, quelle que soit la source.

Pour supprimer des paires clé/valeur dans une liste de stockage, effectuez une itération sur la collection avec removeItem (page éventuellement en anglais) ou utilisez clear (page éventuellement en anglais) pour supprimer tous les éléments à la fois. N'oubliez pas que les modifications apportées à une zone de stockage local sont enregistrées de manière asynchrone sur le disque.

Voir aussi

HTML 5 (document non définitif, page éventuellement en anglais) .

Partager via