Almacenamiento

Storage.length Read only

Retorna un entero que representa el número de elementos almacenados en el objetoStorage.

Storage.key()

Cuando se le pasa un número n, éste método retorna el nombre de la enésima clave en el almacenamiento.

Storage.getItem()

Cuando se le pasa un nombre de clave, retorna el valor de esa clave.

Storage.setItem()

Cuando se le pasa un nombre de clave y un valor, añade dicha clave al almacenamiento, o la actualiza el valor de la clave si ya existe.

Storage.removeItem()

Cuando se le pasa el nombre de una clave, eliminará dicha clave del almacenamiento.

Storage.clear()

Cuando es invocado vacía todas las claves del almacenamiento.

Aquí tenemos un objeto Storage al llamar a localStorage. Primero probamos si el almacenamiento local contiene elementos de dato usando !localStorage.getItem('bgcolor'). Si lo hace, ejecutamos una función llamada setStyles() que obtiene los elementos usando localStorage.getItem() y utiliza dichos valores para actualizar los estilos de la página. Si no, ejecutamos otra función, populateStorage(), que utiliza localStorage.setItem() para definir los valores de los elementos, luego ejecuta 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);
}

Usar la API de almacenamiento Web