La Web fue primero pensada como una forma de mostrar información, solo mostrarla. El procesamiento de información comenzó luego, primero con aplicaciones del lado del servidor y más tarde, de forma bastante ineficiente, a través de pequeños códigos y complementos (plug-ins) ejecutados en el ordenador del usuario. Sin embargo, la esencia de la Web siguió siendo básicamente la misma: la información era preparada en el servidor y luego mostrada a los usuarios. El trabajo duro se desarrollaba casi completamente del lado del servidor porque el sistema no aprovechaba los recursos en los ordenadores de los usuarios.

HTML5 equilibra esta situación. Justificada por las particulares características de los dispositivos móviles, el surgimiento de los sistemas de computación en la nube, y la necesidad de estandarizar tecnologías e innovaciones introducidas por plug-ins a través de los últimos años, la especificación de HTML5 incluye herramientas que hacen posible construir y ejecutar aplicaciones completamente funcionales en el ordenador del usuario, incluso cuando no existe conexión a la red disponible.

Una de las características más necesitadas en cualquier aplicación es la posibilidad de almacenar datos para disponer de ellos cuando sean necesarios, pero no existía aún un mecanismo efectivo para este fin. Las llamadas “Cookies” (archivos de texto almacenados en el ordenador del usuario) fueron usadas por años para preservar información, pero debido a su naturaleza se encontraron siempre limitadas a pequeñas cadenas de texto, lo que las hacía útiles solo en determinadas circunstancias.

La API Web Storage es básicamente una mejora de las Cookies. Esta API nos permite almacenar datos en el disco duro del usuario y utilizarlos luego del mismo modo que lo haría una aplicación de escritorio. El proceso de almacenamiento provisto por esta API puede ser utilizado en dos situaciones particulares: cuando la información tiene que estar disponible solo durante la sesión en uso, y cuando tiene que ser preservada todo el tiempo que el usuario desee. Para hacer estos métodos más claros y comprensibles para los desarrolladores, la API fue dividida en dos partes llamadas sessionStorage y localStorage.

sessionStorage Este es un mecanismo de almacenamiento que conservará los datos disponible solo durante la duración de la sesión de una página. De hecho, a diferencia de sesiones reales, la información almacenada a través de este mecanismo es solo accesible desde una única ventana o pestaña y es preservada hasta que la ventana es cerrada. La especificación aún nombra “sesiones” debido a que la información es preservada incluso cuando la ventana es actualizada o una nueva página desde el mismo sitio web es cargada.

localStorage Este mecanismo trabaja de forma similar a un sistema de almacenamiento para aplicaciones de escritorio. Los datos son grabados de forma permanente y se encuentran siempre disponibles para la aplicación que los creó.

DEMOSTRACIÓN

En Visual Studio vamos a dar click en menú File à New à Project

En la Ventana emergente le damos click a Web y espacio Name colocamos el nombre del proyecto que para el Ejemplo es “Demo 9 20480” y luego presionamos el botón OK

En el espacio de nombre del proyecto damos click derecho y seleccionamos Add à New Items

En la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos como nombre del archivo “Storage.html”, para luego presionar el botón Add.

En la páginaStorage.html tipiamos el siguiente código HTML

En el panel de proyectos vamos a crear una carpeta llamada Scripts y agregamos el archivo que contiene las bibliotecas de JavaScript, y lo mismo haremos creando una carpeta llamada css y colocaremos allí el archivo para crear los estilos.

Situamos el mouse encima de la carpeta “Scripts” y le damos click derecho y seleccionamos Add à New Items

Seleccionamos la opción de JavaScript File y le damos el nombre de storage.

Al dar click en el botón “Add”, fíjese que se nos añade el archivo correspondiente

En el archivo “storage.js” empezamos escribiendo la siguiente línea de código de JavaScript, para almacenar la información en la SessionStorage

Procedemos a realizar lo mismo con el LocalStorage

Y procedemos a ver nuestra página web:

Procedemos a escribir en el cuadro Nombre y Email y hacemos click en el botón Guardar del SessionStorage.

Fíjese que se limpió los cuadros de texto

Al dar click en el botón Obtener de Session Storage se nos mostrará la información Guardada

Ahora cerremos y abramos el navegador y nuevamente le damos click al botón Obtener del Session Storage, fíjese que ya no está

Ahora volvamos a escribir en los cuadro de texto y esta vez demos click en el botón Guardar de la Local Storage

Fíjese que nuevamente se limpió las cajas de texto

Ahora demos click al el botón Obtener de Local Storage se nos mostrará la información Guardada

Ahora cerremos y abramos el navegador nuevamente y al dar click al botón obtener de la Local Storage aparece la información correspondiente en la caja de texto