diff options
Diffstat (limited to 'files/fr/web/api/web_storage_api')
| -rw-r--r-- | files/fr/web/api/web_storage_api/index.md | 95 | ||||
| -rw-r--r-- | files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md | 188 |
2 files changed, 126 insertions, 157 deletions
diff --git a/files/fr/web/api/web_storage_api/index.md b/files/fr/web/api/web_storage_api/index.md index bae54c054c..b83fd22fa4 100644 --- a/files/fr/web/api/web_storage_api/index.md +++ b/files/fr/web/api/web_storage_api/index.md @@ -10,87 +10,64 @@ tags: - sessionStorage translation_of: Web/API/Web_Storage_API --- -<p>{{DefaultAPISidebar("Web Storage API")}}</p> +{{DefaultAPISidebar("Web Storage API")}} -<p>L'API <strong>Web Storage</strong> fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies.</p> +L'API **Web Storage** fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies. -<h2 id="Web_Storage_concepts_et_utilisations">Web Storage, concepts et utilisations</h2> +## Web Storage, concepts et utilisations -<p>Les deux mécanismes au sein du web storage sont les suivantes:</p> +Les deux mécanismes au sein du web storage sont les suivantes: -<ul> - <li><code>sessionStorage</code> maintient une zone de stockage distinct pour chaque origine donnée qui est disponible pour la durée de la session de la page (tant que le navigateur est ouvert, y compris les rechargements et restaure)</li> - <li><code>localStorage</code> fait la même chose, mais persiste même lorsque le navigateur est fermé et rouvert.</li> -</ul> +- `sessionStorage` maintient une zone de stockage distinct pour chaque origine donnée qui est disponible pour la durée de la session de la page (tant que le navigateur est ouvert, y compris les rechargements et restaure) +- `localStorage` fait la même chose, mais persiste même lorsque le navigateur est fermé et rouvert. -<p>Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (pour être plus précis, pour le support des navigateurs, l'objet <code>Window</code> implemente le <code>WindowLocalStorage</code> et l'object <code>WindowSessionStorage</code>, dont les propriétés <code>localStorage</code> et <code>sessionStorage</code> dépendent) — L'appel de l'une de ces propriétés va créer une instance de l'objet {{domxref("Storage")}}, à travers de laquelle les éléments de données peuvent être définis, récupérés et éliminés. Un objet de stockage différent est utilisé pour le sessionStorage et le localStorage pour chaque origine — ils fonctionnent et sont contrôlés séparément.</p> +Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (pour être plus précis, pour le support des navigateurs, l'objet `Window` implemente le `WindowLocalStorage` et l'object `WindowSessionStorage`, dont les propriétés `localStorage` et `sessionStorage` dépendent) — L'appel de l'une de ces propriétés va créer une instance de l'objet {{domxref("Storage")}}, à travers de laquelle les éléments de données peuvent être définis, récupérés et éliminés. Un objet de stockage différent est utilisé pour le sessionStorage et le localStorage pour chaque origine — ils fonctionnent et sont contrôlés séparément. -<div class="note"> -<p><strong>Note :</strong> À partir de Firefox 45, lorsque le navigateur se bloque / redémarre, la quantité de données sauvegardées par origine est limitée à 10 Mo. Cela a été mis en place pour éviter les problèmes de mémoire causés par une utilisation excessive du stockage Web.</p> -</div> +> **Note :** À partir de Firefox 45, lorsque le navigateur se bloque / redémarre, la quantité de données sauvegardées par origine est limitée à 10 Mo. Cela a été mis en place pour éviter les problèmes de mémoire causés par une utilisation excessive du stockage Web. -<div class="note"> -<p><strong>Note :</strong> L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">désactivé les cookies tierce-partie</a> (Firefox a adopté ce comportement à partir de la <a href="/en-US/docs/Mozilla/Firefox/Releases/43">version 43</a> et suivantes.)</p> -</div> +> **Note :** L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a [désactivé les cookies tierce-partie](https://support.mozilla.org/en-US/kb/disable-third-party-cookies) (Firefox a adopté ce comportement à partir de la [version 43](/en-US/docs/Mozilla/Firefox/Releases/43) et suivantes.) -<div class="note"> -<p><strong>Note:</strong> Le Web Storage n'est pas identique au <a href="/en-US/docs/Storage">mozStorage</a> (interfaces XPCOM de Mozilla vers SQLite) ou l'<a href="/en-US/docs/Session_store_API">API Session store </a> (un utilitaire de stockage <a href="/en-US/docs/XPCOM">XPCOM</a> utilisable par des extensions).</p> -</div> +> **Note :** Le Web Storage n'est pas identique au [mozStorage](/en-US/docs/Storage) (interfaces XPCOM de Mozilla vers SQLite) ou l'[API Session store ](/en-US/docs/Session_store_API)(un utilitaire de stockage [XPCOM](/en-US/docs/XPCOM) utilisable par des extensions). -<h2 id="Web_Storage_interfaces">Web Storage interfaces</h2> +## Web Storage interfaces -<dl> - <dt>{{domxref("Storage")}}</dt> - <dd>Vous permet d'ajouter, modifier, lire ou supprimer des données pour un domaine et un type de stockage (session ou local) donnés.</dd> - <dt>{{domxref("Window")}}</dt> - <dd>L'API Web Storage dérive de l'objet {{domxref("Window")}} avec 2 nouvelles propriétés — {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} — lesquelles donnent accès, pour le domaine courant, aux objets session et local {{domxref("Storage")}} respectivement.</dd> - <dt>{{domxref("StorageEvent")}}</dt> - <dd>L'événement <code>storage</code> est déclenché sur l'objet <code>Window</code> du document en cas de changement dans un espace de stockage.</dd> -</dl> +- {{domxref("Storage")}} + - : Vous permet d'ajouter, modifier, lire ou supprimer des données pour un domaine et un type de stockage (session ou local) donnés. +- {{domxref("Window")}} + - : L'API Web Storage dérive de l'objet {{domxref("Window")}} avec 2 nouvelles propriétés — {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} — lesquelles donnent accès, pour le domaine courant, aux objets session et local {{domxref("Storage")}} respectivement. +- {{domxref("StorageEvent")}} + - : L'événement `storage` est déclenché sur l'objet `Window` du document en cas de changement dans un espace de stockage. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Pour illustrer une utilisation typique du stockage Web, nous avons créé un exemple simple, appelé de manière imaginative <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">Web Storage Demo</a>. La <a href="https://mdn.github.io/dom-examples/web-storage/">landing page</a> fournit des commandes permettant de personnaliser la couleur, la police et l'image décorative. Lorsque vous choisissez différentes options, la page est instantanément mise à jour. De plus, vos choix sont stockés dans <code>localStorage</code>. Ainsi, lorsque vous quittez la page puis la rechargez plus tard, vos choix sont mémorisés. En outre, nous avons fourni une <a href="https://mdn.github.io/dom-examples/web-storage/event.html">event output page</a> — Si vous chargez cette page dans un autre onglet, puis modifiez vos choix dans la page d'arrivée, vous verrez les informations de stockage mises à jour générées lors du déclenchement de {{event("StorageEvent")}}.</p> +Pour illustrer une utilisation typique du stockage Web, nous avons créé un exemple simple, appelé de manière imaginative [Web Storage Demo](https://github.com/mdn/dom-examples/tree/master/web-storage). La [landing page](https://mdn.github.io/dom-examples/web-storage/) fournit des commandes permettant de personnaliser la couleur, la police et l'image décorative. Lorsque vous choisissez différentes options, la page est instantanément mise à jour. De plus, vos choix sont stockés dans `localStorage`. Ainsi, lorsque vous quittez la page puis la rechargez plus tard, vos choix sont mémorisés. En outre, nous avons fourni une [event output page](https://mdn.github.io/dom-examples/web-storage/event.html) — Si vous chargez cette page dans un autre onglet, puis modifiez vos choix dans la page d'arrivée, vous verrez les informations de stockage mises à jour générées lors du déclenchement de {{event("StorageEvent")}}. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<h3 id="Window.localStorage"><code>Window.localStorage</code></h3> +### `Window.localStorage` -<p>{{Compat("api.Window.localStorage")}}</p> +{{Compat("api.Window.localStorage")}} -<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3> +### `Window.sessionStorage` -<p>{{Compat("api.Window.sessionStorage")}}</p> +{{Compat("api.Window.sessionStorage")}} -<h2 id="Navigation_privée_Modes_incognito">Navigation privée / Modes incognito</h2> +## Navigation privée / Modes incognito -<p>De nos jours, la plupart des navigateurs prennent en charge une option de confidentialité appelée "mode Incognito" ou "navigation privée", qui permet de s'assurer que la session de navigation privée ne laisse aucune trace après la fermeture du navigateur. Ceci est fondamentalement incompatible avec le stockage Web pour des raisons évidentes. En tant que tels, les éditeurs de navigateurs expérimentent différents scénarios pour gérer cette incompatibilité.</p> +De nos jours, la plupart des navigateurs prennent en charge une option de confidentialité appelée "mode Incognito" ou "navigation privée", qui permet de s'assurer que la session de navigation privée ne laisse aucune trace après la fermeture du navigateur. Ceci est fondamentalement incompatible avec le stockage Web pour des raisons évidentes. En tant que tels, les éditeurs de navigateurs expérimentent différents scénarios pour gérer cette incompatibilité. -<p>La plupart des navigateurs ont opté pour une stratégie dans laquelle les API de stockage sont toujours disponibles et apparemment totalement fonctionnelles, à la différence près que toutes les données stockées sont effacées après la fermeture du navigateur. Pour ces navigateurs, il existe toujours différentes interprétations de ce qui devrait être fait avec les données stockées existantes (à partir d'une session de navigation normale). Devrait-il être disponible en lecture en mode privé? Certains navigateurs, notamment Safari, ont opté pour une solution dans laquelle le stockage est disponible, vide et doté d'un quota de 0 octets, ce qui rend impossible l'écriture de données.</p> +La plupart des navigateurs ont opté pour une stratégie dans laquelle les API de stockage sont toujours disponibles et apparemment totalement fonctionnelles, à la différence près que toutes les données stockées sont effacées après la fermeture du navigateur. Pour ces navigateurs, il existe toujours différentes interprétations de ce qui devrait être fait avec les données stockées existantes (à partir d'une session de navigation normale). Devrait-il être disponible en lecture en mode privé? Certains navigateurs, notamment Safari, ont opté pour une solution dans laquelle le stockage est disponible, vide et doté d'un quota de 0 octets, ce qui rend impossible l'écriture de données. -<p>Les développeurs doivent connaître ces différentes implémentations et en tenir compte lors du développement de sites Web en fonction des API de stockage Web. Pour plus d'informations, consultez <a href="https://blog.whatwg.org/tag/localstorage"> cet article de blog du WHATWG </a> qui traite spécifiquement de ce sujet</p> +Les développeurs doivent connaître ces différentes implémentations et en tenir compte lors du développement de sites Web en fonction des API de stockage Web. Pour plus d'informations, consultez [cet article de blog du WHATWG ](https://blog.whatwg.org/tag/localstorage)qui traite spécifiquement de ce sujet -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API Web Storage</a></li> - <li><a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">Limites de stockage du navigateur et critères d'éviction</a></li> - <li><a href="https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b">HTML5 Storage API By Venkatraman</a></li> -</ul> +- [Utiliser l'API Web Storage](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) +- [Limites de stockage du navigateur et critères d'éviction](/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) +- [HTML5 Storage API By Venkatraman](https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b) diff --git a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md index 96ce992c18..497f5e9e80 100644 --- a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md +++ b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md @@ -9,43 +9,41 @@ tags: - localStorage translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API --- -<p>L'API "Web Storage" fournit des mécanismes par lesquels les navigateurs web peuvent stocker des paires de clé-valeur, d'une manière plus intuitive qu'en utilisant des cookies. Cet article décrit pas à pas comment se servir de cette technologie facile d'utilisation.</p> +L'API "Web Storage" fournit des mécanismes par lesquels les navigateurs web peuvent stocker des paires de clé-valeur, d'une manière plus intuitive qu'en utilisant des cookies. Cet article décrit pas à pas comment se servir de cette technologie facile d'utilisation. -<h2 id="Concepts_de_base">Concepts de base</h2> +## Concepts de base -<p>Les objets de stockages sont de simples magasins clé-valeur, similaires aux objets, mais restant intacts après des chargements de page. La clé peut être une chaîne de caractères ou des entiers, mais la valeur sera toujours une chaîne. Vous pouvez accéder à ces valeurs comme pour un objet ou avec les méthodes getItem() et setItem(). Les trois lignes suivantes vont enregistrer la couleur de la même façon :</p> +Les objets de stockages sont de simples magasins clé-valeur, similaires aux objets, mais restant intacts après des chargements de page. La clé peut être une chaîne de caractères ou des entiers, mais la valeur sera toujours une chaîne. Vous pouvez accéder à ces valeurs comme pour un objet ou avec les méthodes getItem() et setItem(). Les trois lignes suivantes vont enregistrer la couleur de la même façon : -<pre class="brush: js">localStorage.colorSetting = '#a4509b'; +```js +localStorage.colorSetting = '#a4509b'; localStorage['colorSetting'] = '#a4509b'; localStorage.setItem('colorSetting', '#a4509b'); -</pre> +``` -<div class="blockIndicator note"> -<p><strong>Note :</strong> Il est recommandé d'utiliser l'API "Web Storage" (<code>setItem</code>, <code>getItem</code>, <code>removeItem</code>, <code>key</code>, <code>length</code>) pour prévenir les <a href="http://www.2ality.com/2012/01/objects-as-maps.html">embûches</a> associées à l'utilisation d'objets capable de stocker des couples clé-valeur.</p> -</div> +> **Note :** Il est recommandé d'utiliser l'API "Web Storage" (`setItem`, `getItem`, `removeItem`, `key`, `length`) pour prévenir les [embûches](http://www.2ality.com/2012/01/objects-as-maps.html) associées à l'utilisation d'objets capable de stocker des couples clé-valeur. -<p>Les deux principaux mécanismes internes du Stockage Web sont :</p> +Les deux principaux mécanismes internes du Stockage Web sont : -<ul> - <li><strong><code>sessionStorage</code></strong> qui maintient un espace de stockage, séparé pour chaque origine différente, disponible le temps de la session de la page (tant que le navigateur reste lancé, incluant les rechargements de la page et les restaurations).</li> - <li><strong><code>localStorage</code></strong> qui tient le même rôle mais persiste même après le redémarrage du navigateur web.</li> -</ul> +- **`sessionStorage`** qui maintient un espace de stockage, séparé pour chaque origine différente, disponible le temps de la session de la page (tant que le navigateur reste lancé, incluant les rechargements de la page et les restaurations). +- **`localStorage`** qui tient le même rôle mais persiste même après le redémarrage du navigateur web. -<p>Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (plus précisément, dans les navigateurs web le supportant, l'objet <code>Window</code> implémente les objets <code>WindowLocalStorage</code> et <code>WindowSessionStorage</code>, sur lesquels les propriétés <code>localStorage</code> et <code>sessionStorage</code> se basent) — l'appel d'un des deux va créer une instance de l'objet {{domxref("Storage")}}, dans lequel des données pourront être ajoutées, récupérées et supprimées. Pour <code>sessionStorage</code> et <code>localStorage</code>, un objet de stockage différent est utilisé pour chaque origine — ils fonctionnent et sont contrôlés séparément.</p> +Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (plus précisément, dans les navigateurs web le supportant, l'objet `Window` implémente les objets `WindowLocalStorage` et `WindowSessionStorage`, sur lesquels les propriétés `localStorage` et `sessionStorage` se basent) — l'appel d'un des deux va créer une instance de l'objet {{domxref("Storage")}}, dans lequel des données pourront être ajoutées, récupérées et supprimées. Pour `sessionStorage` et `localStorage`, un objet de stockage différent est utilisé pour chaque origine — ils fonctionnent et sont contrôlés séparément. -<p>Donc, par exemple, un appel initial de <code>localStorage</code> sur un document va retourner un objet {{domxref("Storage")}} ; un appel de <code>sessionStorage</code> sur un document va retourner un objet {{domxref("Storage")}} différent. Les deux peuvent se manipuler de la même façon, mais séparément.</p> +Donc, par exemple, un appel initial de `localStorage` sur un document va retourner un objet {{domxref("Storage")}} ; un appel de `sessionStorage` sur un document va retourner un objet {{domxref("Storage")}} différent. Les deux peuvent se manipuler de la même façon, mais séparément. -<h2 id="Détection_de_la_fonction_localStorage">Détection de la fonction localStorage</h2> +## Détection de la fonction localStorage -<p>Pour être capable d'utiliser localStorage, nous devons d'abord vérifier qu'il est supporté et disponible dans la session de navigation actuelle.</p> +Pour être capable d'utiliser localStorage, nous devons d'abord vérifier qu'il est supporté et disponible dans la session de navigation actuelle. -<h3 id="Test_du_support_et_disponibilité">Test du support et disponibilité</h3> +### Test du support et disponibilité -<p>Les navigateurs qui supportent localStorage ont sur l'objet windows une propriété nommée localStorage. Cependant, pour différentes raisons, la vérification seule de l'existnce de cette propriété peut provoquer des erreurs. .Son absence n'est pas non plus une garantie de son indisponibilité, certains navigateurs offrent un paramètre pour désactiver localStorage. Donc un navigateur <em>peut</em> supporter localStorage, mais peut ne pas le rendre <em>disponible</em> aux scripts de la page. Un exemple de cela est Safari, qui en mode de navigation privée fournit un objet localStorage vide dont le quota est nul, le rendant inutilisable. Notre fonction de détection doit prendre en compte ces scénarios.</p> +Les navigateurs qui supportent localStorage ont sur l'objet windows une propriété nommée localStorage. Cependant, pour différentes raisons, la vérification seule de l'existnce de cette propriété peut provoquer des erreurs. .Son absence n'est pas non plus une garantie de son indisponibilité, certains navigateurs offrent un paramètre pour désactiver localStorage. Donc un navigateur _peut_ supporter localStorage, mais peut ne pas le rendre _disponible_ aux scripts de la page. Un exemple de cela est Safari, qui en mode de navigation privée fournit un objet localStorage vide dont le quota est nul, le rendant inutilisable. Notre fonction de détection doit prendre en compte ces scénarios. -<p>Voici une fonction qui va détecter que localStorage est supporté mais aussi disponible:</p> +Voici une fonction qui va détecter que localStorage est supporté mais aussi disponible: -<pre class="brush: js">function storageAvailable(type) { +```js +function storageAvailable(type) { try { var storage = window[type], x = '__storage_test__'; @@ -54,7 +52,7 @@ localStorage.setItem('colorSetting', '#a4509b'); return true; } catch(e) { - return e instanceof DOMException && ( + return e instanceof DOMException && ( // everything except Firefox e.code === 22 || // Firefox @@ -63,60 +61,64 @@ localStorage.setItem('colorSetting', '#a4509b'); // everything except Firefox e.name === 'QuotaExceededError' || // Firefox - e.name === 'NS_ERROR_DOM_QUOTA_REACHED') && + e.name === 'NS_ERROR_DOM_QUOTA_REACHED') && // acknowledge QuotaExceededError only if there's something already stored storage.length !== 0; } -}</pre> +} +``` -<p>Et voici comment l'utiliser :</p> +Et voici comment l'utiliser : -<pre class="brush: js">if (storageAvailable('localStorage')) { +```js +if (storageAvailable('localStorage')) { // Nous pouvons utiliser localStorage } else { // Malheureusement, localStorage n'est pas disponible -}</pre> +} +``` -<p>Au lieu de cela, vous pouvez tester la disponibilité de sessionStorage en appelant <code>storageAvailable('sessionStorage')</code>. </p> +Au lieu de cela, vous pouvez tester la disponibilité de sessionStorage en appelant `storageAvailable('sessionStorage')`. -<p>Vous pouvez retrouver ici <a href="https://gist.github.com/paulirish/5558557">une brève histoire de la détection de localStorage</a>.</p> +Vous pouvez retrouver ici [une brève histoire de la détection de localStorage](https://gist.github.com/paulirish/5558557). -<h2 id="Un_exemple_simple">Un exemple simple</h2> +## Un exemple simple -<p>Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé <strong>Web Storage Demo</strong>. La <a href="https://mdn.github.io/dom-examples/web-storage/">page de lancement</a> fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration:</p> +Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé **Web Storage Demo**. La [page de lancement](https://mdn.github.io/dom-examples/web-storage/) fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration: -<p><img alt="" src="landing.png"></p> + -<p>Quand vous choisissez une option différente, la page est mise à jour instantanément; de plus, vos choix sont stockés avec localStorage, donc quand vous quitterez la page et la rechargerez plus tard, vos choix auront été mémorisés.</p> +Quand vous choisissez une option différente, la page est mise à jour instantanément; de plus, vos choix sont stockés avec localStorage, donc quand vous quitterez la page et la rechargerez plus tard, vos choix auront été mémorisés. -<p>Nous avons aussi fournit une <a href="https://mdn.github.io/dom-examples/web-storage/event.html">page pour l'événement émis</a> - Si vous chargez cette page dans un autre onglet, puis faite les changements de votre choix sur la page de démarrage, vous allez voir une information liée à l'événement {{domxref("StorageEvent")}} qui a été lancé.</p> +Nous avons aussi fournit une [page pour l'événement émis](https://mdn.github.io/dom-examples/web-storage/event.html) - Si vous chargez cette page dans un autre onglet, puis faite les changements de votre choix sur la page de démarrage, vous allez voir une information liée à l'événement {{domxref("StorageEvent")}} qui a été lancé. -<p><img alt="" src="event-output.png"></p> + -<div class="note"> -<p><strong>Note :</strong> En plus de l'affichage en temps réel des pages en utilisant les liens ci-dessus, vous pouvez aussi <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">regarder le code-source</a>.</p> -</div> +> **Note :** En plus de l'affichage en temps réel des pages en utilisant les liens ci-dessus, vous pouvez aussi [regarder le code-source](https://github.com/mdn/dom-examples/tree/master/web-storage). -<h2 id="Tester_si_le_stockage_a_déjà_été_rempli">Tester si le stockage a déjà été rempli</h2> +## Tester si le stockage a déjà été rempli -<p>Pour démarrer avec <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/main.js">main.js</a>, nous allons tester que l'objet de stockage a bien été rempli (c-à-d, que l'on a déjà accédé à la page):</p> +Pour démarrer avec [main.js](https://github.com/mdn/dom-examples/blob/master/web-storage/main.js), nous allons tester que l'objet de stockage a bien été rempli (c-à-d, que l'on a déjà accédé à la page): -<pre class="brush: js">if(!localStorage.getItem('bgcolor')) { +```js +if(!localStorage.getItem('bgcolor')) { populateStorage(); } else { setStyles(); -}</pre> +} +``` -<p>La méthode {{domxref("Storage.getItem()")}} est utilisée pour obtenir les données de l'élément depuis le stockage ; dans ce cas nous testons l'existence de l'élément <code>bgcolor</code>; si il n'existe pas nous lançons <code>populateStorage()</code> pour ajouter des valeurs personnalisées dans le stockage. Si il y a déjà des valeurs ici, nous lançons <code>setStyles()</code> pour mettre à jour le style de la page avec les valeurs stockées.</p> +La méthode {{domxref("Storage.getItem()")}} est utilisée pour obtenir les données de l'élément depuis le stockage ; dans ce cas nous testons l'existence de l'élément `bgcolor`; si il n'existe pas nous lançons `populateStorage()` pour ajouter des valeurs personnalisées dans le stockage. Si il y a déjà des valeurs ici, nous lançons `setStyles()` pour mettre à jour le style de la page avec les valeurs stockées. -<p><strong>Note</strong>: Vous pouvez aussi utiliser {{domxref("Storage.length")}} pour tester si l'objet de stockage est vide ou non.</p> +**Note**: Vous pouvez aussi utiliser {{domxref("Storage.length")}} pour tester si l'objet de stockage est vide ou non. -<h2 id="Obtenir_les_valeurs_du_stockage">Obtenir les valeurs du stockage</h2> +## Obtenir les valeurs du stockage -<p>Comme vu ci dessus, les valeurs peuvent être recupérées du stockage en utilisant {{domxref("Storage.getItem()")}}. La méthode prend en argument la clé de l'élément, et retourne la valeur. Par exemple:</p> +Comme vu ci dessus, les valeurs peuvent être recupérées du stockage en utilisant {{domxref("Storage.getItem()")}}. La méthode prend en argument la clé de l'élément, et retourne la valeur. Par exemple: -<pre class="brush: js">function setStyles() { +```js +function setStyles() { var currentColor = localStorage.getItem('bgcolor'); var currentFont = localStorage.getItem('font'); var currentImage = localStorage.getItem('image'); @@ -128,92 +130,82 @@ else { htmlElem.style.backgroundColor = '#' + currentColor; pElem.style.fontFamily = currentFont; imgElem.setAttribute('src', currentImage); -}</pre> +} +``` -<p>Ici, les trois premières lignes vont chercher les valeurs dans le stockage local. Puis, nous définissons les valeurs exposées par le formulaire avec ces valeurs, afin qu'elles persistent quand on recharge la page. Enfin, nous mettons à jour le style et l'image de décoration de la page, ainsi nos options de personnalisation reviennent lors du rechargement de la page.</p> +Ici, les trois premières lignes vont chercher les valeurs dans le stockage local. Puis, nous définissons les valeurs exposées par le formulaire avec ces valeurs, afin qu'elles persistent quand on recharge la page. Enfin, nous mettons à jour le style et l'image de décoration de la page, ainsi nos options de personnalisation reviennent lors du rechargement de la page. -<h2 id="Enregistrer_une_valeur_dans_le_stockage">Enregistrer une valeur dans le stockage</h2> +## Enregistrer une valeur dans le stockage -<p>{{domxref("Storage.setItem()")}} est aussi bien utilisée pour la création d'une donnée, que pour la modification d'une donnée existante (si cette donnée existe déja). Elle prend deux arguments — la clé de l'élément à créer/modifier, et la valeur associée à stocker.</p> +{{domxref("Storage.setItem()")}} est aussi bien utilisée pour la création d'une donnée, que pour la modification d'une donnée existante (si cette donnée existe déja). Elle prend deux arguments — la clé de l'élément à créer/modifier, et la valeur associée à stocker. -<pre class="brush: js">function populateStorage() { +```js +function populateStorage() { localStorage.setItem('bgcolor', document.getElementById('bgcolor').value); localStorage.setItem('font', document.getElementById('font').value); localStorage.setItem('image', document.getElementById('image').value); setStyles(); -}</pre> +} +``` -<p>La fonction <code>populateStorage()</code> définit trois éléments dans le stockage local — la couleur de fond, la police de caractère et le chemin de l'image. Ensuite elle lance la fonction <code>setStyles()</code> pour mettre à jour le style de la page, etc.</p> +La fonction `populateStorage()` définit trois éléments dans le stockage local — la couleur de fond, la police de caractère et le chemin de l'image. Ensuite elle lance la fonction `setStyles()` pour mettre à jour le style de la page, etc. -<p>Nous avons aussi inclu un handler <code>onchange</code> sur chaque élément du formulaire, ainsi les données et le style sont mis à jour quelque soit la valeur du formulaire qui a changé:</p> +Nous avons aussi inclu un handler `onchange` sur chaque élément du formulaire, ainsi les données et le style sont mis à jour quelque soit la valeur du formulaire qui a changé: -<pre class="brush: js">bgcolorForm.onchange = populateStorage; +```js +bgcolorForm.onchange = populateStorage; fontForm.onchange = populateStorage; -imageForm.onchange = populateStorage;</pre> +imageForm.onchange = populateStorage; +``` -<h2 id="Répondre_aux_changements_du_stockage_avec_StorageEvent">Répondre aux changements du stockage avec StorageEvent</h2> +## Répondre aux changements du stockage avec StorageEvent -<p>L'événement {{event("StorageEvent")}} est lancé dès lors qu'un changement est fait sur l'objet {{domxref("Storage")}}. Cela ne va pas marcher sur la même page qui a provoqué le changement: c'est vraiment un moyen pour que les autres pages du domaine qui utilisent le stockage local puissent se synchroniser avec tous les changements qui ont été fait.</p> +L'événement {{event("StorageEvent")}} est lancé dès lors qu'un changement est fait sur l'objet {{domxref("Storage")}}. Cela ne va pas marcher sur la même page qui a provoqué le changement: c'est vraiment un moyen pour que les autres pages du domaine qui utilisent le stockage local puissent se synchroniser avec tous les changements qui ont été fait. -<p>Les pages des autres domaines ne peuvent pas accéder aux mêmes objets de stockage.</p> +Les pages des autres domaines ne peuvent pas accéder aux mêmes objets de stockage. -<p>Sur la page d'événement (voir <a href="https://github.com/mdn/web-storage-demo/blob/gh-pages/event.js">events.js</a>) le seul JavaScript est :</p> +Sur la page d'événement (voir [events.js](https://github.com/mdn/web-storage-demo/blob/gh-pages/event.js)) le seul JavaScript est : -<pre class="brush: js">window.addEventListener('storage', function(e) { +```js +window.addEventListener('storage', function(e) { document.querySelector('.my-key').textContent = e.key; document.querySelector('.my-old').textContent = e.oldValue; document.querySelector('.my-new').textContent = e.newValue; document.querySelector('.my-url').textContent = e.url; document.querySelector('.my-storage').textContent = e.storageArea; -});</pre> +}); +``` -<p>Ici nous avons ajouté un event listener à l'objet <code>window </code>qui se lance quand l'objet {{domxref("Storage")}}, associée à l'origine courante, est modifié. Comme vous pouvez le voir ci-dessus, l'objet événement associé à cet événement a de nombreuses propriétés contenant des informations utiles: la clé de la donnée qui a changé, l'ancienne valeur avant le changement, la nouvelle valeur après le changement, l'URL du document qui a changé le stockage et l'objet stockage lui-même.</p> +Ici nous avons ajouté un event listener à l'objet `window `qui se lance quand l'objet {{domxref("Storage")}}, associée à l'origine courante, est modifié. Comme vous pouvez le voir ci-dessus, l'objet événement associé à cet événement a de nombreuses propriétés contenant des informations utiles: la clé de la donnée qui a changé, l'ancienne valeur avant le changement, la nouvelle valeur après le changement, l'URL du document qui a changé le stockage et l'objet stockage lui-même. -<h2 id="Supprimer_des_données">Supprimer des données</h2> +## Supprimer des données -<p>l'API de Stockage Web fournit aussi un couple de méthodes simples pour supprimer des données. Nous ne les utilisons pas dans notre démo, mais elles sont simples à ajouter dans votre projet :</p> +l'API de Stockage Web fournit aussi un couple de méthodes simples pour supprimer des données. Nous ne les utilisons pas dans notre démo, mais elles sont simples à ajouter dans votre projet : -<ul> - <li>{{domxref("Storage.removeItem()")}} prend un seul argument — la clé de l'élément que vous souhaitez supprimer — et le supprime de l'objet de stockage pour le domaine.</li> - <li>{{domxref("Storage.clear()")}} ne prend pas d'argument, et vide l'ensemble des données de l'objet de stockage pour le domaine.</li> -</ul> +- {{domxref("Storage.removeItem()")}} prend un seul argument — la clé de l'élément que vous souhaitez supprimer — et le supprime de l'objet de stockage pour le domaine. +- {{domxref("Storage.clear()")}} ne prend pas d'argument, et vide l'ensemble des données de l'objet de stockage pour le domaine. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Storage')}}</td> - <td>{{Spec2('Web Storage')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('Web Storage')}} | {{Spec2('Web Storage')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<h3 id="Window.localStorage"><code>Window.localStorage</code></h3> +### `Window.localStorage` -<p>{{Compat("api.Window.localStorage")}}</p> +{{Compat("api.Window.localStorage")}} -<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3> +### `Window.sessionStorage` -<p>{{Compat("api.Window.sessionStorage")}}</p> +{{Compat("api.Window.sessionStorage")}} -<p>Tous les navigateurs ont des niveaux de capacité différents pour localStorage et sessionStorage. Voici un <a href="http://dev-test.nemikor.com/web-storage/support-test/">détail des capacités de stockage pour différents navigateurs</a>.</p> +Tous les navigateurs ont des niveaux de capacité différents pour localStorage et sessionStorage. Voici un [détail des capacités de stockage pour différents navigateurs](http://dev-test.nemikor.com/web-storage/support-test/). -<div class="note"> -<p><strong>Note :</strong> Depuis iOS 5.1, Safari Mobile stocke les données de localStorage dans le repertoire de cache, qui est parfois sujet à des nettoyages, à la demande de l'OS, typiquement quand l'espace restant est faible.</p> -</div> +> **Note :** Depuis iOS 5.1, Safari Mobile stocke les données de localStorage dans le repertoire de cache, qui est parfois sujet à des nettoyages, à la demande de l'OS, typiquement quand l'espace restant est faible. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Web_Storage_API">Page API du Stockage Web</a></li> -</ul> +- [Page API du Stockage Web](/fr/docs/Web/API/Web_Storage_API) |