---
title: Web Storage API
slug: Web/API/Web_Storage_API
tags:
  - API
  - Reference
  - Storage
  - Web Storage
  - localStorage
  - sessionStorage
translation_of: Web/API/Web_Storage_API
---
<p>{{DefaultAPISidebar("Web Storage API")}}</p>

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

<h2 id="Web_Storage_concepts_et_utilisations">Web Storage, concepts et utilisations</h2>

<p>Les deux mécanismes au sein du web storage sont les suivantes:</p>

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

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

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

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

<div class="note">
<p><strong>Note:</strong> Le Web Storage n'est pas identique au <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (interfaces XPCOM de Mozilla vers SQLite) ou l'<a href="/en-US/docs/Session_store_API" title="Session_store_API">API Session store </a> (un utilitaire de stockage <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> utilisable par des extensions).</p>
</div>

<h2 id="Web_Storage_interfaces">Web Storage interfaces</h2>

<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 title="event-storage">storage</code> est déclenché sur l'objet <code>Window</code> du document en cas de changement dans un espace de stockage.</dd>
</dl>

<h2 id="Exemples">Exemples</h2>

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

<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#webstorage')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<h3 id="Window.localStorage"><code>Window.localStorage</code></h3>

<p>{{Compat("api.Window.localStorage")}}</p>

<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3>

<p>{{Compat("api.Window.sessionStorage")}}</p>

<h2 id="Navigation_privée_Modes_incognito">Navigation privée / Modes incognito</h2>

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

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

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

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