Storage

Cet article nécessite une relecture rédactionnelle. Voici comment vous pouvez aider.

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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 cette clé.
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, ou met à jour la valeur liée à la clée si celle-ci existe déjà.
Storage.removeItem()
Lorqu'on lui passe le nom d'une clé, elle 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 localStorage.getItem(), et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée populateStorage(), qui utilise localStorage.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);
}

Note: Pour voir ce code s'exécuter en exemple complet, voir notre Démo de Stockage Web (en).

Spécifications

Specification Status Comment
Web Storage (Second edition)
La définition de 'Storage' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 3.5 8 10.50 4
sessionStorage 5 2 8 10.50 4
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 ? 8 11 iOS 3.2

Tous les navigateurs ont des niveaux de capacité variables à la fois pour localStorage et sessionStorage. Voici une revue détaillée de toutes les capacités de stockage pour différents navigateurs (en).

Note: depuis iOS 5.1, Safari Mobile stocke les données localStorage dans le dossier de cache, lequel est sujet à un nettoyage occasionnel, sur décision de l'OS, typiquement par manque de place.

Voir aussi

Utiliser l'API de Stockage Web (en)

 

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : CaribouFute, EmilienD, gpenissard
 Dernière mise à jour par : CaribouFute,