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 |
---|---|---|
Unknown La definición de 'Storage' en esta especificación. |
Unknown |
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.