aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/storage
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/api/storage
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/fr/web/api/storage')
-rw-r--r--files/fr/web/api/storage/clear/index.html67
-rw-r--r--files/fr/web/api/storage/getitem/index.html77
-rw-r--r--files/fr/web/api/storage/index.html105
-rw-r--r--files/fr/web/api/storage/key/index.html143
-rw-r--r--files/fr/web/api/storage/length/index.html123
-rw-r--r--files/fr/web/api/storage/localstorage/index.html134
-rw-r--r--files/fr/web/api/storage/removeitem/index.html83
-rw-r--r--files/fr/web/api/storage/setitem/index.html139
8 files changed, 871 insertions, 0 deletions
diff --git a/files/fr/web/api/storage/clear/index.html b/files/fr/web/api/storage/clear/index.html
new file mode 100644
index 0000000000..8d9d33100a
--- /dev/null
+++ b/files/fr/web/api/storage/clear/index.html
@@ -0,0 +1,67 @@
+---
+title: Storage.clear()
+slug: Web/API/Storage/clear
+tags:
+ - API
+ - Méthode
+ - Reference
+ - Stockage
+ - Stockage Web
+translation_of: Web/API/Storage/clear
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<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>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><em>storage</em>.clear();</pre>
+
+<h3 id="Retoune">Retoune</h3>
+
+<p>{{jsxref("undefined")}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante crée trois entrées de données dans le stockage local, puis les supprime en utilisant clear().</p>
+
+<pre class="brush: 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>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<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>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Storage.clear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></li>
+</ul>
diff --git a/files/fr/web/api/storage/getitem/index.html b/files/fr/web/api/storage/getitem/index.html
new file mode 100644
index 0000000000..a81ccb0ccf
--- /dev/null
+++ b/files/fr/web/api/storage/getitem/index.html
@@ -0,0 +1,77 @@
+---
+title: Storage.getItem()
+slug: Web/API/Storage/getItem
+tags:
+ - API
+ - Méthode
+ - Stockage
+ - 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>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">var <em>aValue</em> = <em>storage</em>.getItem(<em>keyName</em>);
+</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><em><code>keyName</code></em></dt>
+ <dd>Une {{domxref("DOMString")}} contenant le nom de la clé voulue.</dd>
+</dl>
+
+<h3 id="Renvoi">Renvoi</h3>
+
+<p>Une {{domxref("DOMString")}} contenant la valeur de la clé. <code>null</code> est renvoyé si aucune correspondance n'est trouvée.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<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>
+
+<pre class="brush: js notranslate">function setStyles() {
+ var currentColor = localStorage.getItem('bgcolor');
+ var currentFont = localStorage.getItem('font');
+ var currentImage = localStorage.getItem('image');
+
+ document.getElementById('bgcolor').value = currentColor;
+ document.getElementById('font').value = currentFont;
+ document.getElementById('image').value = currentImage;
+
+ 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>
+
+<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">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>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Storage.getItem")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p>
diff --git a/files/fr/web/api/storage/index.html b/files/fr/web/api/storage/index.html
new file mode 100644
index 0000000000..ed862cb650
--- /dev/null
+++ b/files/fr/web/api/storage/index.html
@@ -0,0 +1,105 @@
+---
+title: Storage
+slug: Web/API/Storage
+tags:
+ - API
+ - Interface
+ - Reference
+ - Stockage
+ - Storage
+translation_of: Web/API/Storage
+---
+<div>{{APIRef("Web Storage API")}}</div>
+
+<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>
+
+<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>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<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>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<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>
+
+<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>
+
+<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>
+
+<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
+ populateStorage();
+} else {
+ setStyles();
+}
+
+function populateStorage() {
+ localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+ localStorage.setItem('font', document.getElementById('font').value);
+ localStorage.setItem('image', document.getElementById('image').value);
+
+ setStyles();
+}
+
+function setStyles() {
+ var currentColor = localStorage.getItem('bgcolor');
+ var currentFont = localStorage.getItem('font');
+ var currentImage = localStorage.getItem('image');
+
+ document.getElementById('bgcolor').value = currentColor;
+ document.getElementById('font').value = currentFont;
+ document.getElementById('image').value = currentImage;
+
+ 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>
+
+
+
+<p>{{Compat("api.Storage")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<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>
diff --git a/files/fr/web/api/storage/key/index.html b/files/fr/web/api/storage/key/index.html
new file mode 100644
index 0000000000..8be18bf6ea
--- /dev/null
+++ b/files/fr/web/api/storage/key/index.html
@@ -0,0 +1,143 @@
+---
+title: Storage.key()
+slug: Web/API/Storage/key
+tags:
+ - API
+ - Méthode
+ - Reference
+ - Stockage
+ - Storage
+ - Web Storage
+translation_of: Web/API/Storage/key
+---
+<p>{{APIRef()}}</p>
+
+<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>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>unNomDeCle</em> = <em>storage</em>.key(<em>cle</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<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>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{domxref("DOMString")}} contenant le nom de la clé .</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante parcours les éléments présents dans le local storage.</p>
+
+<pre class="brush: js">function forEachKey(callback) {
+ for (var i = 0; i &lt; 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>
+
+<h2 id="Autre_exemple">Autre exemple</h2>
+
+<p>La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes.</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; 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">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Fonctionnalité</th>
+ <th>Chrome</th>
+ <th>Edge</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>localStorage</td>
+ <td>4</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>3.5</td>
+ <td>8</td>
+ <td>10.50</td>
+ <td>4</td>
+ </tr>
+ <tr>
+ <td>sessionStorage</td>
+ <td>5</td>
+ <td>{{CompatUnknown}}</td>
+ <td>2</td>
+ <td>8</td>
+ <td>10.50</td>
+ <td>4</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Fonctionnalité</th>
+ <th>Android</th>
+ <th>Edge</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Support basique</td>
+ <td>2.1</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{ CompatUnknown }}</td>
+ <td>8</td>
+ <td>11</td>
+ <td>iOS 3.2</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Notez que les niveaux de capacités de localStorage et sessionStorage sont propres à chaque navigateur. Vous pourrez trouver ici <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">un article détaillé sur toutes les capacités de stockage de différents navigateurs</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>Depuis iOS 5.1, Safari Mobile réalise ses enregistrements de données type localStorage dans le cache du navigateur, faisant objet de remises à zéro occasionelles gérés par l'OS, le plus souvent lorsque l'espace s'amoindrit.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p>
diff --git a/files/fr/web/api/storage/length/index.html b/files/fr/web/api/storage/length/index.html
new file mode 100644
index 0000000000..2d32d4bae6
--- /dev/null
+++ b/files/fr/web/api/storage/length/index.html
@@ -0,0 +1,123 @@
+---
+title: Storage.length
+slug: Web/API/Storage/length
+tags:
+ - API
+ - Propriété
+ - Reference
+ - Stockage
+ - Web Stockage
+translation_of: Web/API/Storage/length
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<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>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>aLength</em> = <em>storage</em>.length;</pre>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Un entier.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante ajoute trois éléments au localStorage du domaine courant puis retourne le nombre d'éléments dans le storage:</p>
+
+<pre class="brush: 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="Compatibilité">Compatibilité</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Fonctionnalité</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>localStorage</td>
+ <td>4</td>
+ <td>3.5</td>
+ <td>8</td>
+ <td>10.50</td>
+ <td>4</td>
+ </tr>
+ <tr>
+ <td>sessionStorage</td>
+ <td>5</td>
+ <td>2</td>
+ <td>8</td>
+ <td>10.50</td>
+ <td>4</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Fonctionnalité</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Support de base</td>
+ <td>2.1</td>
+ <td>{{ CompatUnknown }}</td>
+ <td>8</td>
+ <td>11</td>
+ <td>iOS 3.2</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Tous les navigateurs ont des niveaux de capacité de stockage variables, que ce soit pour localStorage ou sessionStorage. Pour un test de l'ensemble des capacités des différents navigateurs <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">voir ici</a>.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Depuis iOS 5.1, Safari Mobile stocke les données liées à localStorage dans un fichier de cache qui est sujet à un nettoyage occasionnel par ordre du système d'exploitation, surtout lorsqu'il reste peu de place.</p>
+</div>
+
+<h2 id="À_voir_également">À voir également</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p>
diff --git a/files/fr/web/api/storage/localstorage/index.html b/files/fr/web/api/storage/localstorage/index.html
new file mode 100644
index 0000000000..d6286314d6
--- /dev/null
+++ b/files/fr/web/api/storage/localstorage/index.html
@@ -0,0 +1,134 @@
+---
+title: LocalStorage
+slug: Web/API/Storage/LocalStorage
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef()}}</p>
+
+<p>La propriété <code>localStorage</code> de l’objet <code>Window</code> est comparable à {{ DOMxRef("Window.sessionStorage", "sessionStorage") }} (la même {{ Glossary("same-origin_policy", "politique de même origine") }} est appliquée), mais les données enregistrées sont persistantes d’une session à l’autre. <code>localStorage</code> a été introduit dans Firefox 3.5.</p>
+
+<div class="note"><strong>Note :</strong> Quand le navigateur est en mode navigation privée, une nouvelle base de donnée temporaire est créée pour stocker les données locales ; cette base de données est vidée et supprimée quand le mode de navigation privée est arrêté.</div>
+
+<pre class="brush:js">// Sauvegarder les informations dans l’espace local courant
+localStorage.setItem("username", "John");
+
+// Accéder à des données enregistrées
+alert("username = " + localStorage.getItem("username"));</pre>
+
+<p class="note">La persistence de <code>localStorage</code> le rend utile pour une varitété d’usages, comprenant des compteurs de vues de page comme démontré dans ce <a href="http://codepen.io/awesom3/pen/Hlfma">tutoriel sur Codepen</a>.</p>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<p>Les objets {{ DOMxRef("Storage") }} sont un ajout récent au standard. Ainsi, ils pourraient ne pas être présents dans tous les navigateurs. Il est possible de contourner ce problème en insérant l’un des deux codes suivants au début de vos scripts. Cela vous permettra d’utiliser l’objet <code>localStorage</code> dans les navigateurs qui ne le supportent pas nativement.</p>
+
+<p>Cet algorithme est une imitation exacte de l’objet <code>localStorage</code>, mais utilise les cookies.</p>
+
+<pre class="brush:js">if (!window.localStorage) {
+ Object.defineProperty(window, "localStorage", new (function () {
+ var aKeys = [], oStorage = {};
+ Object.defineProperty(oStorage, "getItem", {
+ value: function (sKey) { return sKey ? this[sKey] : null; },
+ writable: false,
+ configurable: false,
+ enumerable: false
+ });
+ Object.defineProperty(oStorage, "key", {
+ value: function (nKeyId) { return aKeys[nKeyId]; },
+ writable: false,
+ configurable: false,
+ enumerable: false
+ });
+ Object.defineProperty(oStorage, "setItem", {
+ value: function (sKey, sValue) {
+ if(!sKey) { return; }
+ document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+ },
+ writable: false,
+ configurable: false,
+ enumerable: false
+ });
+ Object.defineProperty(oStorage, "length", {
+ get: function () { return aKeys.length; },
+ configurable: false,
+ enumerable: false
+ });
+ Object.defineProperty(oStorage, "removeItem", {
+ value: function (sKey) {
+ if(!sKey) { return; }
+ document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+ },
+ writable: false,
+ configurable: false,
+ enumerable: false
+ });
+ this.get = function () {
+ var iThisIndx;
+ for (var sKey in oStorage) {
+ iThisIndx = aKeys.indexOf(sKey);
+ if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+ else { aKeys.splice(iThisIndx, 1); }
+ delete oStorage[sKey];
+ }
+ for (aKeys; aKeys.length &gt; 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+ for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx &lt; aCouples.length; nIdx++) {
+ aCouple = aCouples[nIdx].split(/\s*=\s*/);
+ if (aCouple.length &gt; 1) {
+ oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+ aKeys.push(iKey);
+ }
+ }
+ return oStorage;
+ };
+ this.configurable = false;
+ this.enumerable = true;
+ })());
+}
+</pre>
+
+<div class="note"><strong>Note :</strong> La taille maximale des données est limitée par la capacité des cookies. Avec cet algorithme, utilisez les fonctions <code>localStorage.setItem()</code> et <code>localStorage.removeItem()</code> pour ajouter, changer ou supprimer une clé. L’utilisation des méthodes <code>localStorage.yourKey = yourValue;</code> et <code>delete localStorage.yourKey;</code> pour définir ou supprimer une clé n’est <strong>pas sécurisée avec ce code.</strong> Vous pouvez également changer son nom et l’utiliser pour gérer uniquement les cookies indépendamment de l’objet <code>localStorage</code>.</div>
+
+<div class="note"><strong>Note :</strong> En remplaçant <code>"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> par <code>"; path=/"</code> (et en changeant le nom de l’objet), cela deviendra un polyfill pour <code>sessionStorage</code> plutôt que pour <code>localStorage</code>. Cependant, cette implémentation partagera les valeurs stockées entre les fenêtres et onglets du navigateur (et sera nettoyée seulement quand toutes les fenêtres du navigateur sont fermées), tandis qu’une implémentation fidèle de <code>sessionStorage</code> restreint les valeurs stockées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.</div>
+
+<p>Voici une autre imitation, moins exacte, de l’objet <code>localStorage</code>. Elle est plus simple que la version précédente, mais est compatible avec les navigateur plus anciens comme Internet Explorer &lt; 8 (<strong>testé et vérifié même avec Internet Explorer 6</strong>). Ce code utilise également les cookies.</p>
+
+<pre class="brush:js">if (!window.localStorage) {
+ window.localStorage = {
+ getItem: function (sKey) {
+ if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+ return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+ },
+ key: function (nKeyId) {
+ return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+ },
+ setItem: function (sKey, sValue) {
+ if(!sKey) { return; }
+ document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+ this.length = document.cookie.match(/\=/g).length;
+ },
+ length: 0,
+ removeItem: function (sKey) {
+ if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+ document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+ this.length--;
+ },
+ hasOwnProperty: function (sKey) {
+ return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=")).test(document.cookie);
+ }
+ };
+ window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+</pre>
+
+<div class="note"><strong>Note :</strong> La taille maximale des données est limitée par les capacités des cookies. Avec cet algorithme, utilisez les fonctions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, et <code>localStorage.removeItem()</code> pour récupérer, ajouter, modifier ou supprimer une clé. L’utilsation de la méthode <code>localStorage.yourKey</code> pour récupérer, définir, ou supprimer une clé <strong>n’est pas possible avec ce code</strong>. Vous pouvez également changer son nom et l’utiliser pour gérer les cookies indépendamment de l’objet <code>localStorage</code>.</div>
+
+<div class="note"><strong>Note :</strong> En remplaçant la chaîne <code>"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> par <code>"; path=/"</code> (et en changeant le nom de l’objet), cela deviendra un polyfill pour <code>sessionStorage</code> plutôt que pour <code>localStorage</code>. Cependant, cette implémentation partagera les valeurs stockées au travers des onglets et fenêtres du navigateur (et seront supprimée uniquement quand toutes les fenêtres du navigateur seront fermées), alors qu’une implémentation pleinement compatible avec <code>sessionStorage</code> restreint les valeurs sauvegardées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.</div>
+
+<h3 id="Compatibilité_et_relation_avec_globalStorage">Compatibilité et relation avec globalStorage</h3>
+
+<p><code>localStorage</code> est équivalent à <code>globalStorage[location.hostname]</code>, à la différence qu’il est rattaché à une {{ Glossary("origine") }} HTML5, et que <code>localStorage</code> est une instance de <code>Storage</code>, contrairement à <code>globalStorage[location.hostname]</code> qui est une instance de <code>StorageObsolete</code> (qui est abordé ci-dessous). Par exemple, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> ne sera pas capable d’accéder au même objet <code>localStorage</code> que <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> mais il pourront accéder au même élément <code>globalStorage</code>. <code>localStorage</code> est une interface standard alors que <code>globalStorage</code> n’est pas standard. Ainsi, vous ne devriez pas vous fier à cette dernière.</p>
+
+<p>Veuillez noter que définir une propriété sur <code>globalStorage[location.hostname]</code> n’entraîne <strong>pas</strong> sa définition sur <code>localStorage</code>, et qu’étendre <code>Storage.prototype</code> n’affecte pas les objets <code>globalStorage</code> ; pour faire ainsi, c’est <code>StorageObsolete.prototype</code> qu’il faut étendre.</p>
+
+<h2 id="Format_de_stockage">Format de stockage</h2>
+
+<p>Les clés et les valeurs de <code>Storage</code> sont stockées au format {{ DOMxRef("DOMString") }} UTF-16, qui utilise 2 octets par caractère.</p>
diff --git a/files/fr/web/api/storage/removeitem/index.html b/files/fr/web/api/storage/removeitem/index.html
new file mode 100644
index 0000000000..f978fceb95
--- /dev/null
+++ b/files/fr/web/api/storage/removeitem/index.html
@@ -0,0 +1,83 @@
+---
+title: Storage.removeItem()
+slug: Web/API/Storage/removeItem
+tags:
+ - API
+ - Méthode
+ - Stockage
+ - Stockage Web
+translation_of: Web/API/Storage/removeItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<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>
+
+<p>Si aucun élement n'est donné en paramètre <code>nomCle</code>, cette méthode ne fait rien.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>storage</em>.removeItem(<em>nomCle</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em><u>nomCle</u></em></dt>
+ <dd>Un {{domxref("DOMString")}} contenant le nom de la clé que vous voulez supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante crée trois données dans le stockage local, puis va supprimer la donnée image.</p>
+
+<pre class="brush: js notranslate">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>
+
+<pre class="brush: js notranslate">function populateStorage() {
+  <code>sessionStorage</code>.setItem('bgcolor', 'red');
+  <code>sessionStorage</code>.setItem('font', 'Helvetica');
+ <code>sessionStorage</code>.setItem('image', 'myCat.png');
+
+  <code>sessionStorage</code>.removeItem('image');
+}</pre>
+
+<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>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<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>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Storage.removeItem")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage Web</a></p>
diff --git a/files/fr/web/api/storage/setitem/index.html b/files/fr/web/api/storage/setitem/index.html
new file mode 100644
index 0000000000..d36e170886
--- /dev/null
+++ b/files/fr/web/api/storage/setitem/index.html
@@ -0,0 +1,139 @@
+---
+title: Storage.setItem()
+slug: Web/API/Storage/setItem
+tags:
+ - API
+ - Méthode
+ - Stockage
+ - Stockage Web
+translation_of: Web/API/Storage/setItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<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>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>storage</em>.setItem(<em>nomClé</em>, <em>valeurClé</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<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>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p><em>Aucune valeur de retour.</em></p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<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>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante crée trois éléments à l'intérieur du stockage local.</p>
+
+<pre class="brush: 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="Compatibilité">Compatibilité</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Fonctionnalité</th>
+ <th>Chrome</th>
+ <th>Edge</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>localStorage</td>
+ <td>4</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>3.5</td>
+ <td>8</td>
+ <td>10.50</td>
+ <td>4</td>
+ </tr>
+ <tr>
+ <td>sessionStorage</td>
+ <td>5</td>
+ <td>{{CompatUnknown}}</td>
+ <td>2</td>
+ <td>8</td>
+ <td>10.50</td>
+ <td>4</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Fonctionnalité</th>
+ <th>Android</th>
+ <th>Edge</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Support basique</td>
+ <td>2.1</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{ CompatUnknown }}</td>
+ <td>8</td>
+ <td>11</td>
+ <td>iOS 3.2</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Tous les navigateurs ont des niveaux de capacité de stockage variables, que ce soit pour localStorage ou sessionStorage. Pour un test de l'ensemble des capacités des différents navigateurs <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">voir ici</a>.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Depuis iOS 5.1, Safari Mobile stocke les données liées à localStorage dans un fichier de cache qui est sujet à un nettoyage occasionnel par ordre du système d'exploitation, surtout lorsqu'il reste peu de place.</p>
+</div>
+
+<h2 id="À_voir_également">À voir également</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p>