Almacenamiento

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨julio de 2015⁩.

La interfazStorage 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étodoWindow.sessionStorage; Si deseas manipular el almacenamiento local para un dominio, debes llamar aWindow.localStorage.

Propiedades

Storage.lengthRead only: Retorna un entero que representa el número de elementos almacenados en el objetoStorage.

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 objetoStorage al llamar alocalStorage. Primero probamos si el almacenamiento local contiene elementos de dato usando!localStorage.getItem('bgcolor'). Si lo hace, ejecutamos una función llamadasetStyles() que obtiene los elementos usandolocalStorage.getItem() y utiliza dichos valores para actualizar los estilos de la página. Si no, ejecutamos otra función,populateStorage(), que utilizalocalStorage.setItem() para definir los valores de los elementos, luego ejecutasetStyles().

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 nuestraDemo de almacenamiento web.