Almacenamiento

Introducción

El almacenamiento DOM (DOM Storage) es el nombre dado al conjunto de características relacionadas con el almacenamiento introducidas en la especificación de aplicaciones web 1.0 y ahora detalladas por separado en su propia especificación W3C Web Storage. El almacenamiento DOM está diseñado para facilitar una forma amplia, segura y sencilla para almacenar información alternativa a las cookies. Fue introducido por primera vez en Firefox 2 y Safari 4 .

Descripción

El mecanismo de almacenamiento DOM es el medio a través del cual pares de clave/valor pueden ser almacenadas de forma segura para ser recuperadas y utilizadas más adelante. La meta de este añadido es suministrar un método exhaustivo a través del cual puedan construirse aplicaciones interactivas (incluyendo características avanzadas tales como ser capaces de trabajar "sin conexión" durante largos períodos de tiempo).

Actualmente los navegadores basados en Mozilla, Internet Explorer 8+ y Safari 4 y Chrome proporcionan una implementación funcional de la especificación del almacenamiento DOM. Sin embargo, las versiones anteriores a Internet Explorer 8 poseen una característica similar llamada "userData behavior" que permite conservar datos entre múltiples sesiones.

El almacenamiento DOM es útil ya que ningún navegador dispone de buenos métodos para conservar cantidades razonables de datos durante un periodo de tiempo. Las cookies de los navegadores tienen una capacidad limitada y no implementan una forma de organizar datos persistentes y otros métodos (tales como almacenamiento local de Flash) necesitan un plugin externo.

Una de las primeras aplicaciones hechas públicas que hace uso de la nueva funcionalidad de almacenamiento DOM (además del userData Behavior de Internet Explorer) fue halfnote (una aplicación para tomar notas) escrita por Aaron Boodman. En su aplicación, Aaron enviaba notas hacia el servidor (cuando la conexión a Internet estaba disponible) y simultáneamente las guardaba en local. Esto permitía al usuario escribir notas de modo seguro incluso cuando no disponía de conexión a Internet.

Aunque el concepto e implementación presentada en halfnote era en comparación simple, su creación mostró las posibilidades de esta nueva generación de aplicaciones web utilizables tanto con conexión como sin ella.

Referencia

Los siguientes objetos globales existen como propiedades de cada objeto window. Esto significa que se puede acceder a ellas como sessionStorage o window.sessionStorage (esto es importante ya que se puede usar IFrames para almacenar o acceder a datos adicionales, más allá de lo que está inmediatamente incluido en la página).

Storage

Este es un constructor ( Storage ) para todos los objetos de almacenamiento ( sessionStorage y globalStorage[location.hostname]). Al hacer Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) } podrías usar luego como atajo a la función removeItem("key") la forma localStorage.removeKey and sessionStorage.removeKey.

Los elementos globalStorage no son de tipo Storage , sino StorageObsolete .

Storage se define por la interfaz de almacenamiento WhatWG de la siguiente forma:

interface Storage {
  readonly attribute unsigned long length;
  [IndexGetter]key DOMString (in unsigned long index);
  [NameGetter] DOMString GetItem (in DOMString key);
  [NameSetter] void setItem (in DOMString key, in DOMString data);
  [NameDeleter] void removeItem (in DOMString key);
  void clear();
};

sessionStorage

Este es un objeto global (sessionStorage) que mantiene un área de almacenamiento que está disponible durante la sesión de página. Una sesión de página existe mientras el navegador esté abierto y sobrevive a recargas o restauraciones de páginas. Abrir una página en una nueva pestaña o en una ventana provoca que se cree una nueva sesión.

// Guardar datos en el almacén de la sesión actual
sessionStorage.setItem("username", "John");

// Acceder a algunos datos guardados
alert( "username = " + sessionStorage.getItem("username"));

El objeto sessionStorage es más usado para manejar datos temporales que deberían ser guardados y recuperados si el navegador es recargado accidentalmente.

Ejemplos:

Autoguardado de los contenidos de un campo de texto y, si el navegador se recarga accidentalmente, restauración del contenido del campo de texto para evitar la pérdida de datos.

 // Obtener el campo de texto al que vamos a seguir la pista
 var field = document.getElementById("field");
 
 // Ver si se tiene un valor de autoguardado
 // (esto sólo sucede si la página es actualizada accidentalmente)
 if ( sessionStorage.getItem("autosave")) {
    // Restaurar los contenidos del campo de texto
    field.value = sessionStorage.getItem("autosave");
 }
 
 // Comprobar los contenidos del campo de texto cada segundo
 setInterval(function(){
    // Y guardar los resultados en el objeto de almacenamiento de sesión
    sessionStorage.setItem("autosave", field.value);
 }, 1000);

Más información:

• Especificación sessionStorage

globalStorage

// Guardar datos a los que sólo pueden acceder scripts del dominio mozilla.org
globalStorage['mozilla.org'].setItem("snippet", "<b>Hola</b>, ¿cómo estás?");

Específicamente, el objeto globalStorage proporciona acceso a un número de diferentes objetos de almacenamiento en los que los datos pueden ser guardados. Por ejemplo, si se construye una página web que usa globalStorage en este dominio (developer.mozilla.org) se dispondría de los siguientes objetos de almacenamiento:

• globalStorage['developer.mozilla.org']- Todas las páginas web dentro del subdominio developer.mozilla.org podrán leer de, y escribir datos en, este objeto de almacenamiento.

Ejemplos:

Todos estos ejemplos necesitan que haya un script insertado (con el siguiente código) en cada página en la que se quiera ver el resultado.

Recordar el nombre un usuario para un subdominio en particular que está siendo visitado:

 globalStorage['developer.mozilla.org'].setItem("username", "John");

Seguir la pista al número de veces que un usuario visita todas las páginas de un dominio:

 // parseInt must be used since all data is stored as a string
 globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1);

localStorage

localStorage es lo mismo que globalStorage[location.hostname], excepto que está dentro del ámbito de un origen HTML5 (esquema + nombre de servidor + puerto no estándar), y que localStorage es un elemento de tipo Storage a diferencia de globalStorage[location.hostname], que es de tipo StorageObsolete . Por ejemplo, https://example.com no es capaz de acceder al mismo objeto localStorage que https://example.com pero pueden acceder al mismo objeto globalStorage. localStorage es una interfaz estándar, mientras que globalStorage no es estándar. localStorage fue introducida en Firefox 3.5.

Ten en cuenta que establecer una propiedad en globalStorage[location.hostname] no la establece en localStorage y extender Storage.prototype no afecta a los elementos globalStorage. Esto sólo se hace extendiendo StorageObsolete.prototype.

if (!window.localStorage) {
  Object.defineProperty(window, "localStorage", new (function () {
    var aKeys = [], oStorage = {};
    Object.defineProperty(oStorage, "getItem", {
      value: function (sKey) { return sKey ? this[sKey] : null; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "key", {
      value: function (nKeyId) { return aKeys[nKeyId]; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "setItem", {
      value: function (sKey, sValue) {
        if(!sKey) { return; }
        document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "length", {
      get: function () { return aKeys.length; },
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "removeItem", {
      value: function (sKey) {
        if(!sKey) { return; }
        var sExpDate = new Date();
        sExpDate.setDate(sExpDate.getDate() - 1);
        document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    this.get = function () {
      var iThisIndx;
      for (var sKey in oStorage) {
        iThisIndx = aKeys.indexOf(sKey);
        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
        else { aKeys.splice(iThisIndx, 1); }
        delete oStorage[sKey];
      }
      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
      for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) {
        iCouple = aCouples[iCouplId].split(/\s*=\s*/);
        if (iCouple.length > 1) {
          oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]);
          aKeys.push(iKey);
        }
      }
      return oStorage;
    };
    this.configurable = false;
    this.enumerable = true;
  })());
}

if (!window.localStorage) {
  window.localStorage = {
    getItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
    },
    key: function (nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); },
    setItem: function (sKey, sValue) {
      if(!sKey) { return; }
      document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
      this.length = document.cookie.match(/\=/g).length;
    },
    length: 0,
    removeItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
      var sExpDate = new Date();
      sExpDate.setDate(sExpDate.getDate() - 1);
      document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
      this.length--;
    },
    hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); }
  };
  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
}

Más información

• Almacenamiento web (W3C Web Grupo de trabajo sobre aplicaciones web)
• Activar / Desactivar almacenamiento DOM en Firefox o SeaMonkey

Ejemplos

• Tutorial de almacenamiento web JavaScript: cómo crear una aplicación de la libreta de direcciones. Práctico tutorial que describe cómo utilizar la API de almacenamiento web mediante la creación de una aplicación sencilla de la libreta de direcciones.
• Aplicaciones web en modo desconexión en hacks.mozilla.org: muestra una demo de la aplicación en modo desconexión y explica cómo funciona.
• Noteboard: aplicación para escritura de notas que almacena todos los datos en local.
• JData: una interfaz de objetos compartidos localStorage a la que cualquier sitio web en Internet puede acceder y que funciona en Firefox 3 +, Webkit 3.1.2 + versiones estables ("nightlies) y IE8. Piensa en ella como pseudo-globalStorage [""], pero el acceso de escritura necesita la confirmación del usuario.
• Ejemplo de localStorage en HTML 5 . Un ejemplo de localStorage muy sencillo y fácil de entender. Guarda y recupera los textos y muestra una lista de elementos guardados. Probado en Firefox 3 o superior.
• Almacenamiento de sesión en HTML5. Un ejemplo muy simple de almacenamiento de sesión. También incluye un ejemplo en almacenamiento local. Probado en Firefox 3.6 o superior.

Compatibilidad de los navegadores

Todos los navegadores tienen diferentes niveles de capacidad tanto para local- como para sessionStorage. Aquí puedes ver un resumen detallado de todas las capacidades de almacenamiento de los distintos navegadores.

Contenido relacionado

• Cookies HTTP ( document.cookie )
• Almacenamiento local de Flash
• Comportamiento userData en Internet Explorer
• nsIDOMStorageEventObsolete
• StorageEvent