Storage

L'interface Storage de l'API Web Storage 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.

Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode Window.sessionStorage. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode Window.localStorage.

Propriétés

Storage.length Lecture seule
Renvoie un entier représentant le nombre d'éléments contenus dans l'objet Storage.

Méthodes

Storage.key()
Lorsqu'on lui passe un nombre n, cette méthode renvoie le nom de la n-ième clé dans le stockage.
Storage.getItem()
Lorqu'on lui passe le nom d'une clé, cette méthode renvoie la valeur de la clé correspondante.
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.
Storage.removeItem()
Lorqu'on lui passe le nom d'une clé, cette méthode supprime cette clé du stockage.
Storage.clear()
Lorsqu'elle est appelée, cette méthode supprime toutes les clés du stockage.

Exemples

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 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 Storage.setItem() pour régler les valeurs des éléments, puis qui exécute setStyles().

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);
}

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de 'Storage' dans cette spécification.
Statut inconnu

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
StorageChrome Support complet 4Edge Support complet 12Firefox Support complet 3.5IE Support complet 8Opera Support complet 10.5Safari Support complet 4WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 6Opera Android Support complet 11Safari iOS Support complet 3.2Samsung Internet Android Support complet 1.0
clearChrome Support complet 4Edge Support complet 12Firefox Support complet 3.5IE Support complet 8Opera Support complet 10.5Safari Support complet 4WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 6Opera Android Support complet 11Safari iOS Support complet 3.2Samsung Internet Android Support complet 1.0
getItemChrome Support complet 4Edge Support complet 12Firefox Support complet 3.5IE Support complet 8Opera Support complet 10.5Safari Support complet 4WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 6Opera Android Support complet 11Safari iOS Support complet 3.2Samsung Internet Android Support complet 1.0
keyChrome Support complet 4Edge Support complet 12Firefox Support complet 3.5IE Support complet 8Opera Support complet 10.5Safari Support complet 4WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 6Opera Android Support complet 11Safari iOS Support complet 3.2Samsung Internet Android Support complet 1.0
lengthChrome Support complet 4Edge Support complet 12Firefox Support complet 3.5IE Support complet 8Opera Support complet 10.5Safari Support complet 4WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 6Opera Android Support complet 11Safari iOS Support complet 3.2Samsung Internet Android Support complet 1.0
removeItemChrome Support complet 4Edge Support complet 12Firefox Support complet 3.5IE Support complet 8Opera Support complet 10.5Safari Support complet 4WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 6Opera Android Support complet 11Safari iOS Support complet 3.2Samsung Internet Android Support complet 1.0
setItemChrome Support complet 4Edge Support complet 12Firefox Support complet 3.5IE Support complet 8Opera Support complet 10.5Safari Support complet 4WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 6Opera Android Support complet 11Safari iOS Support complet 3.2Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet

Voir aussi