Storage

Proprits

Storage.length Lecture seule

Renvoie un entier reprsentant le nombre d'lments contenus dans l'objet Storage.

Mthodes

Storage.key()

Lorsqu'on lui passe un nombre n, cette mthode renvoie le nom de la n-ime cl dans le stockage.

Storage.getItem()

Lorqu'on lui passe le nom d'une cl, cette mthode renvoie la valeur de la cl correspondante.

Storage.setItem()

Lorqu'on lui passe un nom de cl et une valeur, cette mthode ajoute cette cl et cette valeur dans le stockage. Si la cl existe dj, elle met jour la valeur.

Storage.removeItem()

Lorqu'on lui passe le nom d'une cl, cette mthode supprime cette cl du stockage.

Storage.clear()

Lorsqu'elle est appele, cette mthode supprime toutes les cls du stockage.

Exemples

Nous accdons ici un objet Storage en appelant localStorage. Nous testons d'abord si le stockage local contient des lments en utilisant !localStorage.getItem('bgcolor'). Si oui, nous excutons une fonction appele setStyles() qui rcupre les lments en utilisant Storage.getItem(), et utilise ces valeurs pour mettre jour les styles de page. Sinon, nous excutons une autre fonction appele populateStorage(), qui utilise Storage.setItem() pour rgler les valeurs des lments, puis qui excute 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);
}

Spcifications

Compatibilit des navigateurs

Voir aussi

• Utiliser l'API Web Storage
• Window.localStorage
• Window.sessionStorage
• CacheStorage