Introducción al almacenamiento web

La API de almacenamiento web incluye dos mecanismos relacionados para hacer que los datos de cliente sean persistentes de forma segura usando Document Object Model (DOM), sessionStorage y localStorage. Estos objetos aparecieron con Windows Internet Explorer 8.

Nota  En versiones anteriores de Windows Internet Explorer, el almacenamiento de datos persistentes se implementa por medio del comportamiento userData.

¿Qué es el almacenamiento web?

El almacenamiento web se suele comparar con las cookies HTTP. Al igual que estas, con el almacenamiento web los desarrolladores web pueden almacenar datos específicos de la sesión o del dominio como pares nombre-valor en el cliente. Pero, al contrario de lo que sucede con las cookies, el almacenamiento web permite controlar más fácilmente el modo en que la información que una ventana almacena aparece visible en otra.

Por ejemplo, supongamos que un usuario abre dos ventanas del explorador para comprar unos billetes de avión en dos vuelos distintos. Si la aplicación web de la compañía aérea utiliza cookies para almacenar el estado de la sesión, la información podría "filtrarse" de una transacción a otra, con el consiguiente riesgo de que el usuario adquiera dos billetes para el mismo vuelo sin darse cuenta. Las probabilidades de que este tipo de información se "filtre" son más altas ahora que las aplicaciones presentan un abanico más amplio de comportamientos sin conexión, como almacenar valores de forma local con objeto de volver posteriormente al servidor.

El almacenamiento web proporciona además un espacio en disco notablemente mayor que las cookies. En Internet Explorer, las cookies pueden almacenar un máximo de únicamente 4 kilobytes (KB) de datos. Esta cantidad total de bytes puede ser desde un par nombre-valor de 4 KB hasta 20 pares nombre-valor que hagan un total de 4 KB. En comparación, el almacenamiento web proporciona casi 10 megabytes (MB) por cada área de almacenamiento.

En el plano funcional, las áreas de almacenamiento de cliente son muy distintas de las cookies. El almacenamiento web no transmite valores al servidor por cada petición que se produzca (como hacen las cookies) y los datos en un área de almacenamiento local nunca expiran. Además, al contrario que las cookies, el acceso a fragmentos de datos concretos es muy sencillo, gracias a una interfaz estándar que cada vez más proveedores de exploradores admiten.

Objetos de scripting del almacenamiento web

window.sessionStorage

El almacenamiento de sesión está pensado para escenarios en los que se realiza una única transacción. El atributo sessionStorage del objeto window conserva los pares clave-valor de todas las páginas que se hayan cargado mientras una pestaña está abierta (duración del contexto de exploración de primer nivel). Por ejemplo, en una página puede haber una casilla que el usuario ha activado porque quiere dejar constancia de que desea un seguro.


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

Una página que se visite después podría comprobar (con el script) si dicha casilla se ha activado.


if (sessionStorage.insurance) { ... } 

El objeto Storage admite propiedades de expando ('seguro' en el nuestro ejemplo). Si el nombre de la propiedad no existe, se creará automáticamente un par clave-valor para contenerlo. Recuerda que los pares clave-valor siempre se almacenan como cadenas. Por lo tanto, los tipos de datos como números, valores booleanos y datos estructurados deberán convertirse en cadenas antes de almacenarse como persistentes en un área de almacenamiento.

Cuando un valor se guarda en sessionStorage, se puede recuperar mediante un script que se ejecute en otra página en el mismo contexto. Cuando se carga otro documento, sessionStorage se inicializa desde la memoria para las direcciones URL con el mismo origen. (Consulta la sección Seguridad y privacidad para obtener más información.)

Nota  Aunque HTML5 lo permite, Internet Explorer 8 no reanuda sessionStorage después de una recuperación tras bloqueo del explorador.

window.localStorage

El mecanismo de almacenamiento local se extiende por diversas ventanas y persiste más allá de la sesión actual. El atributo localStorage ofrece áreas de almacenamiento persistente para dominios. Permite que las aplicaciones web almacenen en el cliente casi 10 MB de datos de usuario (como documentos completos o el buzón de correo de un usuario) por cuestiones de rendimiento.

Por ejemplo, un sitio web puede mostrar un recuento del número de veces que el usuario ha visitado una página con el siguiente script.


<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  Para incrementar pageLoadCount, antes se debe convertir a un número mediante el método parseInt (JavaScript 5.6).

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

El objeto de almacenamiento

Los siguientes métodos y propiedades son compatibles con los objetos de almacenamiento tanto local como de sesión.

TemaContenido
clear

Quita todos los pares clave-valor del área de almacenamiento web.

constructor

Devuelve una referencia al constructor de un objeto.

getItem

Recupera el valor actual relacionado con la clave del almacenamiento web.

key

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

length

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

remainingSpace

Recupera el resto de espacio en memoria, en bytes, correspondiente al objeto de almacenamiento.

removeItem

Quita un par clave-valor de la colección de almacenamiento web.

setItem

Define un par clave-valor.

 

Eventos de almacenamiento web

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

Se admiten los siguientes eventos.

onstorage

El evento onstorage se desencadena en un document cuando un área de almacenamiento cambia. Recibirán este evento todos los documentos que compartan el mismo contexto de sesión, así como aquellos que actualmente muestren una página perteneciente al mismo dominio o subdominio en el que el almacenamiento local se esté confirmando.

Si el objeto document de destino no está activo en este momento, Internet Explorer no desencadenará ningún evento.

onstoragecommit

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

Seguridad y privacidad

Los datos almacenados en el almacenamiento local son mucho más públicos que los almacenados en cookies, que pueden limitarse a una determinada ruta de acceso dentro de un dominio. Aun eligiendo una clave difícil de adivinar, no habrá ninguna privacidad, ya que el objeto Storage proporciona una forma de obtener las claves.

Estos son algunos puntos que deben tenerse en cuenta:

Contexto de exploración de primer nivel y nombre de host

El acceso al área de almacenamiento de la sesión queda restringido por el contexto de exploración de primer nivel. En Internet Explorer, se crea un contexto de exploración por cada pestaña que se abra. El script que se ejecuta en un contexto de exploración de primer nivel no tiene acceso al almacenamiento creado en otro contexto. Los sitios pueden agregar datos al almacenamiento de la sesión, a los que podrá acceder cualquier página desde ese nombre de host abierto en la misma ventana.

Importante  El puerto y protocolo y el esquema no se evalúan como parte de esta comprobación.

El origen delimita el almacenamiento

Los límites de cuota de disco vienen impuestos por el dominio de la página que define el valor, y no por el dominio en el que se está definiendo el valor. De esta forma, los scripts malintencionados no podrán agotar la cuota de almacenamiento del dominio en cuestión. Dichos scripts tampoco podrán usar subdominios al azar para almacenar cantidades de datos ilimitados.

El tamaño del almacenamiento se calcula como la longitud total de todos los valores y nombres de clave. Una sola área de almacenamiento puede contener hasta 10 millones de bytes. La propiedad remainingSpace sirve para averiguar el espacio de almacenamiento disponible.

Borrar las áreas de almacenamiento

El estado de la sesión se libera en cuanto se cierra la última ventana que haga referencia a los datos en cuestión. Pero los usuarios pueden borrar las áreas de almacenamiento en cualquier momento; para ello, deben seleccionar Eliminar el historial de exploración en el menú Herramientas de Internet Explorer, activar la casilla Cookies y hacer clic en Aceptar. De este modo, se borran las áreas de almacenamiento local y de la sesión de todos los dominios que no estén en la carpeta Favoritos y, asimismo, se restablecen las cuotas de almacenamiento en el Registro. Desactiva la casilla Conservar datos de sitios web favoritos de forma predeterminada para eliminar todas las áreas de almacenamiento, independientemente de su origen.

Para eliminar los pares clave-valor de una lista de almacenamientos, itera en la colección con removeItem o usa clear para eliminar todos los elementos al mismo tiempo. No olvides que los cambios realizados en un área de almacenamiento local se guardan en disco de manera asincrónica.

Referencia de API

Web Storage

Ejemplos y tutoriales

Guardar archivos localmente usando el Servicio de almacenamiento web

Demostraciones de la versión de prueba de Internet Explorer

Offline Calculator

Publicaciones de IEBlog

Generar experiencias sin conexión con AppCache e IndexedDB de HTML5

Especificación

Almacenamiento web

Temas relacionados

Breve descripción de JSON
Usar el almacenamiento web en el lado cliente
Escribir una aplicación web adaptada basada en datos con almacenamiento local de HTML5

 

 

Mostrar:
© 2014 Microsoft