Usando la API de almacenamiento web

Conceptos bsicos

Los objetos de almacenamiento son simples almacenes de clave/valor, similares a objetos, pero que permanecen intactos cuando la pgina se recarga. Las claves y los valores siempre son cadenas de texto (fjate que las claves con enteros se convierten automticamente a cadenas, tal y como lo hacen los objetos). Puedes acceder a estos valores como un objeto, o con los mtodos Storage.getItem() y Storage.setItem(). Estas tres lneas modifican el valor de colorSetting de la misma manera:

localStorage.colorSetting = "#a4509b";
localStorage["colorSetting"] = "#a4509b";
localStorage.setItem("colorSetting", "#a4509b");

Los dos mecanismos en el almacenamiento web son los siguientes:

• sessionStorage mantiene un rea de almacenamiento separada para cada origen que est disponible mientras dure la sesin de la pgina (mientras el navegador est abierto, incluyendo recargas de pgina y restablecimientos).
• localStorage hace lo mismo, pero persiste incluso cuando el navegador se cierre y se reabra.

Estos mecanismos estn disponibles mediante las propiedades Window.sessionStorage y Window.localStorage (dicho con ms precisin, en navegadores con soporte, el objeto Window implementa los objetos WindowLocalStorage y WindowSessionStorage, en los cuales se basan las propiedades localStorage y sessionStorage). Al invocar uno de stos, se crear una instancia del objeto Storage, a travs del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente segn su origen funcionan y son controlados por separado.

As que, por ejemplo, si en un inicio se llama a localStorage en un documento, esto devolver un objeto Storage; llamar a sessionStorage en un documento devolver un objeto Storage diferente. Ambos objetos se pueden manipular de la misma forma, pero separados.

Detectar la caracterstica localStorage

Para poder usar localStorage, debemos de verificar que tiene soporte y que est disponible en la sesin del buscador actual.

Probar la disponibilidad

Los buscadores que soportan localStorage tienen una propiedad en el objeto window que se llama localStorage. Sin embargo, por varias razones, el slo asegurarse de que la propiedad existe puede arrojar excepciones. El que localStorage exista no es garanta suficiente de que en verdad est disponible, puesto que varios buscadores ofrecen configuraciones que lo inhabilitan. As que un buscador puede soportar localStorage, pero puede no hacerlo disponible para los scripts en la pgina. Un ejemplo de esto es Safari, que en el modo de bsqueda privada ofrece un objeto localStorage vaco con un cupo de 0, por lo que es inutilizable. Sin embargo, es posible que an as obtengamos un QuotaExceededError legtimo, lo que significa que ya usamos todo el espacio de almacenamiento disponible, aunque el almacenamiento est, de hecho, disponible. Nuestra deteccin de la caracterstica debe de tomar en cuenta estos escenarios.

Esta funcin detecta si localStorage tiene soporte y est disponible:

function storageAvailable(type) {
  try {
    var storage = window[type],
      x = "__storage_test__";
    storage.setItem(x, x);
    storage.removeItem(x);
    return true;
  } catch (e) {
    return (
      e instanceof DOMException &&
      // everything except Firefox
      (e.code === 22 ||
        // Firefox
        e.code === 1014 ||
        // test name field too, because code might not be present
        // everything except Firefox
        e.name === "QuotaExceededError" ||
        // Firefox
        e.name === "NS_ERROR_DOM_QUOTA_REACHED") &&
      // acknowledge QuotaExceededError only if there's something already stored
      storage.length !== 0
    );
  }
}

Y aqu se muestra cmo usarla:

if (storageAvailable("localStorage")) {
  // Yippee! We can use localStorage awesomeness
} else {
  // Too bad, no localStorage for us
}

Tambin puedes probar sessionStorage invocando storageAvailable('sessionStorage').

Aqu puedes ver una breve historia de la deteccin de la caracterstica localStorage.

Ejemplo

Para ilustrar un uso tpico de almacenamiento web, creamos un ejemplo simple que llamamos Demo de almacenamiento web. La pgina de inicio proporciona unos controles que se pueden usar para personalizar el color, la tipografa y la imagen decorativa:

[]Cuando seleccionas una opcin diferente, la pgina se actualiza instantneamente; adems, tus opciones se almacenan en localStorage, de forma que si abandonas la pgina y la vuelves a cargar, tus opciones son recordadas.

Tambin creamos una pgina de salida del evento si cargas esta pgina en otra pestaa y luego haces cambios a tus opciones en la pgina de inicio, vers que se muestra la informacin almacenada actualizada puesto que se dispara un StorageEvent.

[]

Probar si la memoria tiene valores

En el inicio de main.js, probamos si el objeto ya tiene valores (es decir, si la pgina ya fue visitada):

if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}

El mtodo Storage.getItem() se usa para obtener un dato de la memoria; en este caso, estamos probando si el dato bgcolor existe; si no, corremos populateStorage() para aadir los valores personalizados actuales a la memoria. Si ya hay valores guardados, corremos setStyles() para actualizar el estilo de la pgina con los valores almacenados.

Nota: Tambin puedes usar Storage.length para probar si el objeto de almacenamiento est vaci o no.

Obtener valores de la memoria

Como dijimos arriba, los valores se pueden recuperar de la memoria usando Storage.getItem(). Este mtodo usa la llave del dato como argumento y devuelve el valor. Por ejemplo:

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

Aqu, en las primeras tres lneas tomamos los valores del almacenamiento local. Despus, fijamos los valores mostrados en los elementos del formulario a esos valores, de forma que se mantengan sincronizados cuando recargues la pgina. Finalmente, actualizamos los estilos y la imagen decorativa en la pgina para que tus opciones personalizadas vuelvan a aparecer al recargar.

Guardar valores en la memoria

Storage.setItem() se usa tanto para crear nuevos datos como para actualizar valores existentes (si el dato ya exista). Este mtodo recibe dos argumentos: la llave del dato que se va a crear/modificar y el valor que se va a guardar.

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);

  setStyles();
}

La funcin populateStorage() define tres elementos en el almacenamiento local el color de fondo, la tipografa y la ruta de almacenamiento de la imagen. Luego corre la funcin setStyles() para actualizar el estilo de la pgina, etc.

Tambin incluimos un manejador onchange para cada elemento del formulario, de manera que los datos y los estilos son actualizados cada vez que un valor del formulario cambia:

bgcolorForm.onchange = populateStorage;
fontForm.onchange = populateStorage;
imageForm.onchange = populateStorage;

Responder a cambios en la memoria con el evento StorageEvent

El evento StorageEvent se dispara siempre que se hace un cambio al objeto Storage (nota que este evento no se dispara para cambios en sessionStorage). Este evento no va a trabajar en la misma pgina en la que se estn haciendo los cambios, sino que es una manera para que las otras pginas del dominio que usan la memoria sincronicen los cambios que se estn haciendo. Las pginas en otros dominios no pueden acceder a los mismos objetos de almacenamiento.

En la pgina de eventos (ver events.js) el nico JavaScript es el siguiente:

window.addEventListener("storage", function (e) {
  document.querySelector(".my-key").textContent = e.key;
  document.querySelector(".my-old").textContent = e.oldValue;
  document.querySelector(".my-new").textContent = e.newValue;
  document.querySelector(".my-url").textContent = e.url;
  document.querySelector(".my-storage").textContent = JSON.stringify(
    e.storageArea,
  );
});

Aqu aadimos un detector de evento al objeto window que se dispara cuando el objeto Storage asociado con el origen actual cambia. Como puedes ver arriba, el objeto asociado a este evento tiene varias propiedades que contienen informacin til la llave del dato que cambi, el valor anterior al cambio, el nuevo valor tras el cambio, la URL del documento que cambi la memoria y el objeto de almacenamiento mismo (que volvimos una cadena para que pudieras ver su contenido).

Borrar registros

El almacenamiento web tambin provee un par de mtodos simples para remover datos. No los usamos en nuestro demo, pero se pueden aadir de manera muy simple a tu proyecto:

• Storage.removeItem() recibe un solo argumento la llave del dato que quieres eliminar y lo remueve del objeto de almacenamiento de ese dominio.
• Storage.clear() no recibe argumentos; vaca todo el objeto de almacenamiento de ese dominio.

Especificaciones

Compatibilidad con navegadores

api.Window.localStorage

api.Window.sessionStorage

Ver tambin

• Pgina de inicio de la API de almacenamiento web