Almacenamiento

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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 objeto Storage.

Métodos

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.

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

Especificación Estado Comentario
Web Storage (Second edition)
The definition of 'Storage' in that specification.
Recommendation  

Compatibilidad de navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 3.5 8 10.50 4
sessionStorage 5 2 8 10.50 4
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 ? 8 11 3.2[1]

[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.

Ver también

Usar la API de almacenamiento Web

Etiquetas y colaboradores del documento

 Colaboradores en esta página: ZeroBlazer, Sebastianz
 Última actualización por: ZeroBlazer,