Almacenamiento

La interfaz Storage de la API de almacenamiento web provee acceso al almacenamiento de la sesión o al almacenamiento local para un dominio en particular, permitiéndote por ejemplo añadir, modificar o eliminar elementos de dato almacenados.

Si deseas manipular el almacenamiento de sesión para un dominio, debes llamar al método Window.sessionStorage; Si deseas manipular el almacenamiento local para un dominio, debes llamar a Window.localStorage.

Propiedades

Storage.length Read only

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

Métodos

Storage.key() (en-US)

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.

Ejemplos

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

Nota: Para ver la ejecución de esto como un ejemplo funcional completo, mira nuestra Demo de almacenamiento web.

Especificaciones

Specification
HTML Standard
# storage

Compatibilidad de navegadores

BCD tables only load in the browser

Ver también