Introducción al almacenamiento DOM

La API de almacenamiento DOM incluye dos mecanismos relacionados para conservar los datos del cliente de manera segura mediante el DOM (Document Object Model), sessionStorage y localStorage. Estos objetos se introdujeron en Internet Explorer 8.

Nota: para versiones anteriores de Internet Explorer, el almacenamiento de datos persistente se implementa mediante el comportamiento de userData.

Este tema contiene las secciones siguientes.

• ¿Qué es el almacenamiento DOM?
• Objetos de scripts de almacenamiento DOM
  • window.sessionStorage
  • window.localStorage
  • Objeto Storage
• Eventos de almacenamiento DOM
  • onstorage
  • onstoragecommit
• Seguridad y privacidad
  • Contexto y origen de exploración de nivel superior
  • Determinar los límites del almacenamiento en función del origen
  • Borrar áreas de almacenamiento
• Temas relacionados

¿Qué es el almacenamiento DOM?

Con frecuencia, el almacenamiento DOM se compara con las cookies de HTTP. Como sucede con las cookies, los desarrolladores web pueden almacenar datos de una sesión o específicos del dominio en pares de nombre/valor que se guardan en el cliente mediante el almacenamiento DOM. Sin embargo, al contrario que las cookies, el almacenamiento DOM facilita el control de cómo la información almacenada por una ventana está visible en otra ventana.

Por ejemplo, un usuario podría abrir dos ventanas del explorador para comprar billetes de avión para dos vuelos diferentes. Sin embargo, si la aplicación web de la compañía aérea utiliza cookies para almacenar el estado de la sesión, se podría "filtrar" información de una transacción a otra, lo que podría hacer que el usuario comprara dos billetes para el mismo vuelo sin darse cuenta. A medida que las aplicaciones adquieren más capacidades de comportamiento sin conexión, como almacenar valores localmente para regresar más adelante al servidor, la posibilidad de estas "filtraciones" de información aumenta.

El almacenamiento DOM también proporciona una cantidad significativamente mayor de espacio en disco que las cookies. En Internet Explorer, las cookies no pueden almacenar más que 4 kilobytes (KB) de datos. Este total en bytes puede ser un par de nombre/valor de 4 KB, o bien hasta 20 pares de nombre/valor cuyo tamaño total ocupe 4 KB. En cambio, el almacenamiento DOM proporciona aproximadamente 10 megabytes (MB) por cada área de almacenamiento.

Funcionalmente, las áreas de almacenamiento del cliente son bastante diferentes de las cookies. El almacenamiento DOM no transmite valores al servidor con cada solicitud como hacen las cookies. Además, los datos de un área de almacenamiento no local expiran nunca. Por añadidura, a diferencia de las cookies, resulta fácil tener acceso a datos individuales mediante una interfaz estándar cada vez más utilizada por los proveedores de exploradores.

Objetos de scripts de almacenamiento DOM

• window.sessionStorage
• window.localStorage
• Objeto Storage

window.sessionStorage

El almacenamiento de sesión se ha diseñado para aquellos casos en que el usuario lleva a cabo una sola transacción. El atributo sessionStorage del objeto window mantiene pares de clave/valor para todas las páginas cargadas durante la vigencia de una misma pestaña (mientras dura el contexto de exploración de nivel superior). Por ejemplo, una página podría tener una casilla que el usuario active para indicar que desea adquirir un seguro.

<label>
    <input type="checkbox" onchange="sessionStorage.insurance = checked">
    I want insurance on this trip.
</label>

En una página posterior, se comprobaría mediante script si el usuario ha activado la casilla.

if (sessionStorage.insurance) { ... } 

El objeto Storage admite las propiedades expando ('insurance' en el ejemplo anterior). Si el nombre de propiedad no existe, se crea automáticamente un par de clave/valor para contenerlo. Observe que los pares de clave/valor siempre se almacenan como cadenas. Los distintos tipos de datos, tales como números, valores booleanos y datos estructurados, se deben convertir en cadenas antes de conservarlos en una área de almacenamiento.

Una vez guardado un valor en sessionStorage, se puede recuperar mediante script que se ejecute en otra página del mismo contexto. Cuando se carga otro documento, sessionStorage se inicializa desde la memoria para las direcciones URL del mismo origen. (Vea la sección Seguridad y Privacidad para obtener más información.)

Nota: si bien el borrador de trabajo de HTML 5  lo permite, Internet Explorer 8 no reanuda sessionStorage después de una recuperación tras un bloqueo del explorador.

window.localStorage

El mecanismo del almacenamiento local abarca varias ventanas y se conserva aunque finalice la sesión actual. El atributo localStorage proporciona áreas de almacenamiento persistente para los dominios. Para mejorar el rendimiento, permite que las aplicaciones web almacenen en el cliente casi 10 MB de datos de usuario, tales como documentos completos o el buzón de correo de un usuario.

Por ejemplo, el script siguiente permite que un sitio web muestre cuántas veces el usuario ha visitado una página.

<p>
  You have viewed this page
  <span id="count">an untold number of</span>
  time(s).
</p>
<script>
  var storage = window.localStorage;
  if (!storage.pageLoadCount) storage.pageLoadCount = 0;
  storage.pageLoadCount = parseInt(storage.pageLoadCount, 10) + 1;
  document.getElementById('count').innerHTML = storage.pageLoadCount;
</script> 

Nota: antes de incrementar pageLoadCount, debe convertirse a un número mediante el método parseInt (JScript 5.6).

Cada dominio y subdominio tiene su propia área de almacenamiento local independiente. Los dominios pueden tener acceso a las áreas de almacenamiento de los subdominios y los subdominios pueden tener acceso a las áreas de almacenamiento de los dominios primarios. Por ejemplo, localStorage['example.com'] está accesible para example.com y cualquiera de sus subdominios. El subdominio localStorage['www.example.com'] está accesible para example.com, pero no para otros subdominios, como mail.example.com.

Objeto Storage

Los objetos de almacenamiento de sesión y local admiten las propiedades y los métodos siguientes.

Método clear

Quita todos los pares de clave/valor del área de almacenamiento DOM.

Propiedad constructor

Devuelve una referencia al constructor de un objeto.

Método getItem

Recupera el valor actual asociado a la clave de almacenamiento DOM.

Método key

Recupera la clave que se encuentra en el índice especificado de la colección.

Propiedad length

Recupera la longitud de la lista de pares clave/valor.

Propiedad remainingSpace

Recupera el espacio de memoria restante, en bytes, del objeto de almacenamiento.

Método removeItem

Elimina un par de clave/valor de la colección de almacenamiento DOM.

Método setItem

Establece un par de clave/valor.

Eventos de almacenamiento DOM

Internet Explorer desencadena eventos cuando se actualizan los datos de un área de almacenamiento, para que la información se pueda sincronizara entre varias instancias del explorador o varias pestañas.

Se admiten los eventos siguientes.

• onstorage
• onstoragecommit

onstorage

El evento onstorage se desencadena en un documento cuando cambia un área de almacenamiento. Reciben el evento todos los documentos que comparten el mismo contexto de sesión, así como aquellos que muestran actualmente una página del mismo dominio o subdominio donde se confirma el almacenamiento local.

Si el objeto de documento de destino no está activo, Internet Explorer no desencadena ningún evento.

onstoragecommit

Internet Explorer utiliza archivos XML para el almacenamiento local. El evento onstoragecommit se desencadena cuando se escribe en disco un almacenamiento local.

Seguridad y privacidad

Los datos almacenados en el almacenamiento local son mucho más públicos que los almacenados en cookies, que pueden estar limitados a una ruta de acceso determinada de un dominio. Ni siquiera una clave difícil de adivinar proporcionará privacidad, porque el objeto Storage proporciona una manera de enumerarlas.

A continuación se indican algunos aspectos que deben tenerse en cuenta:

• Contexto y origen de exploración de nivel superior
• Determinar los límites del almacenamiento en función del origen
• Borrar áreas de almacenamiento

Contexto y origen de exploración de nivel superior

El acceso al área de almacenamiento de sesión está restringido por el contexto de exploración de nivel superior. En Internet Explorer, se crea un contexto de exploración nuevo para cada pestaña. El script que se ejecuta en un contexto de exploración no tiene acceso al almacenamiento creado en otro. Los sitios pueden agregar los datos al almacenamiento de sesión y estarán accesibles para cualquier página de ese origen que se abra en la misma ventana.

El origen se determina en función del protocolo, el nombre de host (o la dirección IP) y el número de puerto de la dirección URL del documento. El acceso a los datos de almacenamiento mediante script se permite únicamente si el origen del script es el mismo que el del área de almacenamiento.

Determinar los límites del almacenamiento en función del origen

Los límites de cuota de disco se imponen al dominio de la página que establece el valor, y no al dominio donde se establece el valor. De esta forma, se impide que scripts malintencionados consuman la cuota de almacenamiento de un dominio relacionado. También evita que estos scripts utilicen subdominios aleatorios para almacenar cantidades de datos ilimitadas.

El tamaño de almacenamiento se calcula en la longitud total de todos los nombres y valores de clave, y una misma área de almacenamiento puede contener hasta 10 millones de bytes. La propiedad remainingSpace se utiliza para determinar el espacio de almacenamiento disponible.

Borrar áreas de almacenamiento

El estado de la sesión se libera tan pronto como se cierra la última ventana que hace referencia a estos datos. No obstante, el usuario puede borrar las áreas de almacenamiento cuando lo desee; para ello, se selecciona Eliminar el historial de exploración en el menú Herramientas de Internet Explorer, se activa la casilla Cookies y se hace clic en Aceptar. De esta forma se borran las áreas de almacenamiento de sesión y local de todos los dominios que no se encuentran en la carpeta Favoritos y se restablecen las cuotas de almacenamiento en el Registro. Si desea eliminar todas las áreas de almacenamiento, con independencia de su origen, desactive la casilla Conservar los datos de sitios web favoritos.

Para eliminar los pares de clave/valor de una lista de almacenamiento, recorra la colección en iteración mediante removeItem o use clear para quitar todos los elementos a la vez. Tenga presente que los cambios efectuados en un área de almacenamiento local se guardan en el disco de manera asincrónica.

Temas relacionados

• Borrador de trabajo de HTML 5