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 session storage ou au local storage, pour un domaine donné. Elle permet, par exemple d'ajouter, de modifier ou supprimer des éléments d'information.

Manipuler le session storage pour un domaine se fait à l'aide de WindowSessionStorage.sessionStorage tandis que manipuler le local storage pour un domaine se fait à l'aide de WindowLocalStorage.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és dans le stockage.
Storage.getItem()
Lorqu'on lui passe le nom d'une clé, cette méthode renvoie la valeur qui y est associée.
Storage.setItem()
Lorqu'on lui passe un nom de clé et une valeur, cette méthode ajoute cette clé et sa valeur dans le stockage, ou met à jour la valeur liée à la clée si celle-ci est déjà présente.
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.

Éxemples

Ici nous accedons un objet Storage en appelant localStorage. On test d'abord si le stockage local contient un item  de donnée en utlisant !localStorage.getItem('bgcolor'). Le cas échéant, on exécute une fonction appelée setStyles() qui récupère les items de données en utilisant localStorage.getItem() et utilise ces valeurs pour mettre à jour le style de la page. Dans le cas contraire, on éxecute une autre fonction appelée populateStorage(), qui utilise localStorage.setItem() pour placer les valeurs des items, puis exécuter 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 tourner dans un exemple complet, dirigez-vous vers notre Demo 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 : EmilienD, gpenissard
 Dernière mise à jour par : EmilienD,