diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
| commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
| tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/storage | |
| parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
| download | translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/api/storage')
| -rw-r--r-- | files/fr/web/api/storage/clear/index.md | 59 | ||||
| -rw-r--r-- | files/fr/web/api/storage/getitem/index.md | 64 | ||||
| -rw-r--r-- | files/fr/web/api/storage/index.md | 89 | ||||
| -rw-r--r-- | files/fr/web/api/storage/key/index.md | 86 | ||||
| -rw-r--r-- | files/fr/web/api/storage/length/index.md | 69 | ||||
| -rw-r--r-- | files/fr/web/api/storage/removeitem/index.md | 81 | ||||
| -rw-r--r-- | files/fr/web/api/storage/setitem/index.md | 91 |
7 files changed, 219 insertions, 320 deletions
diff --git a/files/fr/web/api/storage/clear/index.md b/files/fr/web/api/storage/clear/index.md index c177f94657..a4540f154c 100644 --- a/files/fr/web/api/storage/clear/index.md +++ b/files/fr/web/api/storage/clear/index.md @@ -9,59 +9,46 @@ tags: - Stockage Web translation_of: Web/API/Storage/clear --- -<p>{{APIRef("Web Storage API")}}</p> +{{APIRef("Web Storage API")}} -<p>La méthode <code>clear()</code> de l'interface {{domxref("Storage")}}, lorsqu'elle est invoquée, vide toutes les clés stockées.</p> +La méthode `clear()` de l'interface {{domxref("Storage")}}, lorsqu'elle est invoquée, vide toutes les clés stockées. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"><em>storage</em>.clear();</pre> +```js +storage.clear(); +``` -<h3 id="Retoune">Retoune</h3> +### Retoune -<p>{{jsxref("undefined")}}</p> +{{jsxref("undefined")}} -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>La fonction suivante crée trois entrées de données dans le stockage local, puis les supprime en utilisant clear().</p> +La fonction suivante crée trois entrées de données dans le stockage local, puis les supprime en utilisant clear(). -<pre class="brush: js">function peuplerLeStockage() { +```js +function peuplerLeStockage() { localStorage.setItem('bgcolor', 'red'); localStorage.setItem('font', 'Helvetica'); localStorage.setItem('image', 'monChat.png'); localStorage.clear(); -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Pour voir un exemple réel, vous pouvez visitez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Démo de stockage web</a>. Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications.</p> -</div> +> **Note :** Pour voir un exemple réel, vous pouvez visitez notre [Démo de stockage web](https://mdn.github.io/dom-examples/web-storage/). Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">État</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Specification | État | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.Storage.clear")}} +## Voir aussi -<p>{{Compat("api.Storage.clear")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></li> -</ul> +- [Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/storage/getitem/index.md b/files/fr/web/api/storage/getitem/index.md index 1e3f950436..4563ca4cca 100644 --- a/files/fr/web/api/storage/getitem/index.md +++ b/files/fr/web/api/storage/getitem/index.md @@ -8,30 +8,28 @@ tags: - Stockage Web translation_of: Web/API/Storage/getItem --- -<p>{{APIRef("Web Storage API")}}<br> - La méthode <code>getItem()</code> de l'interface {{domxref("Storage")}} renvoie la valeur associée à la clé passée en paramètre.</p> +{{APIRef("Web Storage API")}} +La méthode `getItem()` de l'interface {{domxref("Storage")}} renvoie la valeur associée à la clé passée en paramètre. -<h2 id="Syntax">Syntax</h2> +## Syntax -<pre class="syntaxbox">var <em>aValue</em> = <em>storage</em>.getItem(<em>keyName</em>); -</pre> + var aValue = storage.getItem(keyName); -<h3 id="Paramètre">Paramètre</h3> +### Paramètre -<dl> - <dt><em><code>keyName</code></em></dt> - <dd>Une {{domxref("DOMString")}} contenant le nom de la clé voulue.</dd> -</dl> +- _`keyName`_ + - : Une {{domxref("DOMString")}} contenant le nom de la clé voulue. -<h3 id="Renvoi">Renvoi</h3> +### Renvoi -<p>Une {{domxref("DOMString")}} contenant la valeur de la clé. <code>null</code> est renvoyé si aucune correspondance n'est trouvée.</p> +Une {{domxref("DOMString")}} contenant la valeur de la clé. `null` est renvoyé si aucune correspondance n'est trouvée. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>La fonction suivante récupère trois élément du stockage local, puis réutilise les valeurs renvoyés afin de modifier le style de la page .</p> +La fonction suivante récupère trois élément du stockage local, puis réutilise les valeurs renvoyés afin de modifier le style de la page . -<pre class="brush: js">function setStyles() { +```js +function setStyles() { var currentColor = localStorage.getItem('bgcolor'); var currentFont = localStorage.getItem('font'); var currentImage = localStorage.getItem('image'); @@ -43,35 +41,21 @@ translation_of: Web/API/Storage/getItem htmlElem.style.backgroundColor = '#' + currentColor; pElem.style.fontFamily = currentFont; imgElem.setAttribute('src', currentImage); -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Pour voir cette fonction utilisée dans un exemple réel, dirigez-vous vers notre <a href="https://github.com/mdn/web-storage-demo">Demo de Stockage Web (en)</a>.</p> -</div> +> **Note :** Pour voir cette fonction utilisée dans un exemple réel, dirigez-vous vers notre [Demo de Stockage Web (en)](https://github.com/mdn/web-storage-demo). -<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">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.Storage.getItem")}} +## Voir aussi -<p>{{Compat("api.Storage.getItem")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<p><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p> +[Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/storage/index.md b/files/fr/web/api/storage/index.md index ed862cb650..4ae4cf6946 100644 --- a/files/fr/web/api/storage/index.md +++ b/files/fr/web/api/storage/index.md @@ -9,42 +9,39 @@ tags: - Storage translation_of: Web/API/Storage --- -<div>{{APIRef("Web Storage API")}}</div> +{{APIRef("Web Storage API")}} -<p>L'interface <strong><code>Storage</code></strong> de l'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a> donne accès au stockage de session (<code>SessionStorage</code>) ou au stockage local (<code>LocalStorage</code>) pour un domaine donné, vous permettant par exemple d'ajouter, de modifier ou de supprimer des éléments enregistrés.</p> +L'interface **`Storage`** de l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API) donne accès au stockage de session (`SessionStorage`) ou au stockage local (`LocalStorage`) pour un domaine donné, vous permettant par exemple d'ajouter, de modifier ou de supprimer des éléments enregistrés. -<p>Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode {{domxref("Window.sessionStorage")}}. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode {{domxref("Window.localStorage")}}.</p> +Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode {{domxref("Window.sessionStorage")}}. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode {{domxref("Window.localStorage")}}. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt> - <dd>Renvoie un entier représentant le nombre d'éléments contenus dans l'objet <code>Storage</code>.</dd> -</dl> +- {{domxref("Storage.length")}} {{readonlyInline}} + - : Renvoie un entier représentant le nombre d'éléments contenus dans l'objet `Storage`. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<dl> - <dt>{{domxref("Storage.key()")}}</dt> - <dd>Lorsqu'on lui passe un nombre <code>n</code>, cette méthode renvoie le nom de la n-ième clé dans le stockage.</dd> -</dl> +- {{domxref("Storage.key()")}} + - : Lorsqu'on lui passe un nombre `n`, cette méthode renvoie le nom de la n-ième clé dans le stockage. -<dl> - <dt>{{domxref("Storage.getItem()")}}</dt> - <dd>Lorqu'on lui passe le nom d'une clé, cette méthode renvoie la valeur de la clé correspondante.</dd> - <dt>{{domxref("Storage.setItem()")}}</dt> - <dd>Lorqu'on lui passe un nom de clé et une valeur, cette méthode ajoute cette clé et cette valeur dans le stockage. Si la clé existe déjà, elle met à jour la valeur.</dd> - <dt>{{domxref("Storage.removeItem()")}}</dt> - <dd>Lorqu'on lui passe le nom d'une clé, cette méthode supprime cette clé du stockage.</dd> - <dt>{{domxref("Storage.clear()")}}</dt> - <dd>Lorsqu'elle est appelée, cette méthode supprime toutes les clés du stockage.</dd> -</dl> +<!----> -<h2 id="Exemples">Exemples</h2> +- {{domxref("Storage.getItem()")}} + - : Lorqu'on lui passe le nom d'une clé, cette méthode renvoie la valeur de la clé correspondante. +- {{domxref("Storage.setItem()")}} + - : Lorqu'on lui passe un nom de clé et une valeur, cette méthode ajoute cette clé et cette valeur dans le stockage. Si la clé existe déjà, elle met à jour la valeur. +- {{domxref("Storage.removeItem()")}} + - : Lorqu'on lui passe le nom d'une clé, cette méthode supprime cette clé du stockage. +- {{domxref("Storage.clear()")}} + - : Lorsqu'elle est appelée, cette méthode supprime toutes les clés du stockage. -<p>Nous accédons ici à un objet <code>Storage</code> en appelant <code>localStorage</code>. Nous testons d'abord si le stockage local contient des éléments en utilisant <code>!localStorage.getItem('bgcolor')</code>. Si oui, nous exécutons une fonction appelée <code>setStyles()</code> qui récupère les éléments en utilisant {{domxref("Storage.getItem()")}}, et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée <code>populateStorage()</code>, qui utilise {{domxref("Storage.setItem()")}} pour régler les valeurs des éléments, puis qui exécute <code>setStyles()</code>.</p> +## Exemples -<pre class="brush: js">if(!localStorage.getItem('bgcolor')) { +Nous accédons ici à un objet `Storage` en appelant `localStorage`. Nous testons d'abord si le stockage local contient des éléments en utilisant `!localStorage.getItem('bgcolor')`. Si oui, nous exécutons une fonction appelée `setStyles()` qui récupère les éléments en utilisant {{domxref("Storage.getItem()")}}, et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée `populateStorage()`, qui utilise {{domxref("Storage.setItem()")}} pour régler les valeurs des éléments, puis qui exécute `setStyles()`. + +```js +if(!localStorage.getItem('bgcolor')) { populateStorage(); } else { setStyles(); @@ -70,36 +67,22 @@ function setStyles() { htmlElem.style.backgroundColor = '#' + currentColor; pElem.style.fontFamily = currentFont; imgElem.setAttribute('src', currentImage); -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<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#the-storage-interface', 'Storage')}}</td> - <td>{{Spec2('Web Storage')}}</td> - <td></td> - </tr> - </tbody> -</table> +} +``` -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Spécifications +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'webstorage.html#the-storage-interface', 'Storage')}} | {{Spec2('Web Storage')}} | | +## Compatibilité des navigateurs -<p>{{Compat("api.Storage")}}</p> +{{Compat("api.Storage")}} -<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>{{domxref("Window.localStorage")}}</li> - <li>{{domxref("Window.sessionStorage")}}</li> - <li>{{domxref("CacheStorage")}}</li> -</ul> +- [Utiliser l'API Web Storage](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) +- {{domxref("Window.localStorage")}} +- {{domxref("Window.sessionStorage")}} +- {{domxref("CacheStorage")}} diff --git a/files/fr/web/api/storage/key/index.md b/files/fr/web/api/storage/key/index.md index 97e9160b4c..f108c70da3 100644 --- a/files/fr/web/api/storage/key/index.md +++ b/files/fr/web/api/storage/key/index.md @@ -10,71 +10,57 @@ tags: - Web Storage translation_of: Web/API/Storage/key --- -<p>{{APIRef()}}</p> +{{APIRef()}} -<p>La méthode <code>key()</code> de l'interface {{domxref("Storage")}} prend un nombre n en argument et retourne la n-ième clé contenue dans storage. L'ordre des clés étant définie par le navigateur, il est recommandé de ne pas s'y référer .</p> +La méthode `key()` de l'interface {{domxref("Storage")}} prend un nombre n en argument et retourne la n-ième clé contenue dans storage. L'ordre des clés étant définie par le navigateur, il est recommandé de ne pas s'y référer . -<h2 id="Syntax">Syntax</h2> +## Syntax -<pre class="syntaxbox">var <em>unNomDeCle</em> = <em>storage</em>.key(<em>cle</em>);</pre> + var unNomDeCle = storage.key(cle); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><em>cle</em></dt> - <dd>Un entier représentant le numéro de la clé voulue. L'index débute à zero.</dd> -</dl> +- _cle_ + - : Un entier représentant le numéro de la clé voulue. L'index débute à zero. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Un {{domxref("DOMString")}} contenant le nom de la clé .</p> +Un {{domxref("DOMString")}} contenant le nom de la clé . -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>La fonction suivante parcours les éléments présents dans le local storage.</p> +La fonction suivante parcours les éléments présents dans le local storage. -<pre class="brush: js">function forEachKey(callback) { - for (var i = 0; i < localStorage.length; i++) { +```js +function forEachKey(callback) { + for (var i = 0; i < localStorage.length; i++) { callback(localStorage.key(i)); } -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Pour un exemple plus poussé, consultez la <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> -</div> +> **Note :** Pour un exemple plus poussé, consultez la [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). -<h2 id="Autre_exemple">Autre exemple</h2> +## Autre exemple -<p>La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes.</p> +La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes. -<pre class="brush: js">for (var i = 0; i < localStorage.length; i++) { +```js +for (var i = 0; i < localStorage.length; i++) { console.log(localStorage.getItem(localStorage.key(i))); } -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Storage.key")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></li> -</ul> +``` + +## Specifications + +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.Storage.key")}} + +## Voir aussi + +- [Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/storage/length/index.md b/files/fr/web/api/storage/length/index.md index b8479be8fa..a2ea7ab711 100644 --- a/files/fr/web/api/storage/length/index.md +++ b/files/fr/web/api/storage/length/index.md @@ -9,57 +9,44 @@ tags: - Web Stockage translation_of: Web/API/Storage/length --- -<p>{{APIRef("Web Storage API")}}</p> +{{APIRef("Web Storage API")}} -<p>La propriété en lecture seule de l'interface {{domxref("Storage")}} retourne un entier représentant le nombre d'items stockés dans l'objet <code>Storage</code>.</p> +La propriété en lecture seule de l'interface {{domxref("Storage")}} retourne un entier représentant le nombre d'items stockés dans l'objet `Storage`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>aLength</em> = <em>storage</em>.length;</pre> + var aLength = storage.length; -<h3 id="Retour">Retour</h3> +### Retour -<p>Un entier.</p> +Un entier. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>La fonction suivante ajoute trois éléments au localStorage du domaine courant puis retourne le nombre d'éléments dans le storage:</p> +La fonction suivante ajoute trois éléments au localStorage du domaine courant puis retourne le nombre d'éléments dans le storage: -<pre class="brush: js">function populateStorage() { +```js +function populateStorage() { localStorage.setItem('bgcolor', 'yellow'); localStorage.setItem('font', 'Helvetica'); localStorage.setItem('image', 'cats.png'); localStorage.length; // retourne 3 si localStorage est vide au préalable -}</pre> - -<div class="note"> -<p><strong>Note :</strong> Pour voir ceci utilisé dans un exemple concret, regardez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> -</div> - -<h2 id="Spécifications">Spécifications</h2> - -<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('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Storage.length")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></li> -</ul> +} +``` + +> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.Storage.length")}} + +## Voir aussi + +- [Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/storage/removeitem/index.md b/files/fr/web/api/storage/removeitem/index.md index 40a61a48e0..add1e6b954 100644 --- a/files/fr/web/api/storage/removeitem/index.md +++ b/files/fr/web/api/storage/removeitem/index.md @@ -8,76 +8,63 @@ tags: - Stockage Web translation_of: Web/API/Storage/removeItem --- -<p>{{APIRef("Web Storage API")}}</p> +{{APIRef("Web Storage API")}} -<p>La méthode <strong><code>removeItem()</code></strong> de l'interface {{domxref("Storage")}} , lorsque vous lui passez une clé en argument, va supprimer la ressource avec le nom de clé correspondant du storage. L'interface <strong><code>Storage</code></strong> de l'API <a href="/fr/docs/Web/API/Web_Storage_API">Web Storage API</a> fournit des accès particuliers dans les domaines des stockages locaux et de sessions.</p> +La méthode **`removeItem()`** de l'interface {{domxref("Storage")}} , lorsque vous lui passez une clé en argument, va supprimer la ressource avec le nom de clé correspondant du storage. L'interface **`Storage`** de l'API [Web Storage API](/fr/docs/Web/API/Web_Storage_API) fournit des accès particuliers dans les domaines des stockages locaux et de sessions. -<p>Si aucun élement n'est donné en paramètre <code>nomCle</code>, cette méthode ne fait rien.</p> +Si aucun élement n'est donné en paramètre `nomCle`, cette méthode ne fait rien. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>storage</em>.removeItem(<em>nomCle</em>);</pre> + storage.removeItem(nomCle); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>nomCle</code></dt> - <dd>Un {{domxref("DOMString")}} contenant le nom de la clé que vous voulez supprimer.</dd> -</dl> +- `nomCle` + - : Un {{domxref("DOMString")}} contenant le nom de la clé que vous voulez supprimer. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>{{jsxref("undefined")}}.</p> +{{jsxref("undefined")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>La fonction suivante crée trois données dans le stockage local, puis va supprimer la donnée image.</p> +La fonction suivante crée trois données dans le stockage local, puis va supprimer la donnée image. -<pre class="brush: js">function populateStorage() { +```js +function populateStorage() { localStorage.setItem('bgcolor', 'red'); localStorage.setItem('font', 'Helvetica'); localStorage.setItem('image', 'myCat.png'); localStorage.removeItem('image'); -}</pre> +} +``` -<p>Nous pouvons également faire ceci avec le stockage de session.</p> +Nous pouvons également faire ceci avec le stockage de session. -<pre class="brush: js">function populateStorage() { - <code>sessionStorage</code>.setItem('bgcolor', 'red'); - <code>sessionStorage</code>.setItem('font', 'Helvetica'); - <code>sessionStorage</code>.setItem('image', 'myCat.png'); +```js +function populateStorage() { + sessionStorage.setItem('bgcolor', 'red'); + sessionStorage.setItem('font', 'Helvetica'); + sessionStorage.setItem('image', 'myCat.png'); - <code>sessionStorage</code>.removeItem('image'); -}</pre> + sessionStorage.removeItem('image'); +} +``` -<div class="note"> -<p><strong>Note :</strong> Pour voir ce code en fonctionnement, voir <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> -</div> +> **Note :** Pour voir ce code en fonctionnement, voir [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.Storage.removeItem")}} +## Voir aussi -<p>{{Compat("api.Storage.removeItem")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<p><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage Web</a></p> +[Utilisation de l'API de stockage Web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/storage/setitem/index.md b/files/fr/web/api/storage/setitem/index.md index ce945681ff..da20ec878f 100644 --- a/files/fr/web/api/storage/setitem/index.md +++ b/files/fr/web/api/storage/setitem/index.md @@ -8,71 +8,56 @@ tags: - Stockage Web translation_of: Web/API/Storage/setItem --- -<p>{{APIRef("Web Storage API")}}</p> +{{APIRef("Web Storage API")}} -<p>La méthode <code>setItem()</code> de l'interface {{domxref("Storage")}}, lorsque lui sont passées le duo clé-valeur, les ajoute à l'emplacement de stockage, sinon elle met à jour la valeur si la clé existe déjà.</p> +La méthode `setItem()` de l'interface {{domxref("Storage")}}, lorsque lui sont passées le duo clé-valeur, les ajoute à l'emplacement de stockage, sinon elle met à jour la valeur si la clé existe déjà. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>storage</em>.setItem(<em>nomClé</em>, <em>valeurClé</em>);</pre> + storage.setItem(nomClé, valeurClé); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><em>nomClé</em></dt> - <dd>C'est une {{domxref("DOMString")}} contenant le nom de la clé que l'on souhaite créer/modifier.</dd> - <dt><em>valeurClé</em></dt> - <dd>C'est une {{domxref("DOMString")}} contenant la valeur associée à son nom de clé que l'on souhaite créer/modifier.</dd> -</dl> +- _nomClé_ + - : C'est une {{domxref("DOMString")}} contenant le nom de la clé que l'on souhaite créer/modifier. +- _valeurClé_ + - : C'est une {{domxref("DOMString")}} contenant la valeur associée à son nom de clé que l'on souhaite créer/modifier. -<h3 id="Retourne">Retourne</h3> +### Retourne -<p><em>Aucune valeur de retour.</em></p> +_Aucune valeur de retour._ -<h3 id="Exceptions">Exceptions</h3> +### Exceptions -<p><code>setItem()</code> peut émettre une exception si l'emplacement de stockage est plein. En particulier pour Safari mobile (depuis iOS 5), elle émettra une exception si l'utilisateur passe en navigation privée (contrairement aux autres navigateur qui autorisent le stockage même en navigation privée en utilisant un conteneur de données séparé, Safari met son quota de stockage à 0 octets).<br> - Par conséquent les développeurs devraient être sûrs de toujours de <strong>systématiquement capturer toute possible exception venant de setItem().</strong></p> +`setItem()` peut émettre une exception si l'emplacement de stockage est plein. En particulier pour Safari mobile (depuis iOS 5), elle émettra une exception si l'utilisateur passe en navigation privée (contrairement aux autres navigateur qui autorisent le stockage même en navigation privée en utilisant un conteneur de données séparé, Safari met son quota de stockage à 0 octets). +Par conséquent les développeurs devraient être sûrs de toujours de **systématiquement capturer toute possible exception venant de setItem().** -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>La fonction suivante crée trois éléments à l'intérieur du stockage local.</p> +La fonction suivante crée trois éléments à l'intérieur du stockage local. -<pre class="brush: js">function remplissageStockage() { +```js +function remplissageStockage() { localStorage.setItem('bgcolor', 'red'); localStorage.setItem('font', 'Helvetica'); localStorage.setItem('image', 'myCat.png'); -}</pre> - -<div class="note"> -<p><strong>Note :</strong> Pour voir ceci utilisé dans un exemple concret, regardez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> -</div> - -<h2 id="Spécifications">Spécifications</h2> - -<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('HTML WHATWG', 'webstorage.html#dom-storage-setitem', 'Storage.setItem')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Storage.setItem")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Storage/getItem">Storage.getItem()</a></li> - <li><a href="/fr/docs/Web/API/Storage/removeItem">Storage.removeItem()</a></li> - <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API Web Storage</a></li> -</ul> +} +``` + +> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-setitem', 'Storage.setItem')}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.Storage.setItem")}} + +## Voir aussi + +- [Storage.getItem()](/fr/docs/Web/API/Storage/getItem) +- [Storage.removeItem()](/fr/docs/Web/API/Storage/removeItem) +- [Utilisation de l'API Web Storage](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) |
