---
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="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>