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.

Storage.length Read only

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

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

[1] A partir de iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta cache, que es sujeta a ser vaciada ocasionalmente a petición del SO, típicamente si hay poco espacio disponible.

Todos los navegadores tienen diferentes niveles de capacidad tanto para localStorage y sessionStorage. Aquí hay un análisis detallado de todas las capacidades de almacenamiento para diferentes navegadores.

Usar la API de almacenamiento Web