API Almacenamiento Web HTML5

10410567 Escárcega Enríquez Jesús Javier

10410576 Alvídrez Arrieta Hugo

6-Febrero-2014

¿Qué es el almacenamiento web?

• Es una de las especificaciones incluidas en la parte de Javascript de HTML5, que permite alas páginas web almacenar información en la parte del cliente, es decir, el navegador web.Consta de dos mecanismos parecidos a las cookies de sesión de HTTP, pero que permitenalmacenar cantidades más grandes de datos, siempre en modo texto.

HTML 5 permite el almacenamiento de 3 formas distintas.

• Local: los datos son almacenados en la máquina del usuario como pares de clave/valor.

• Sesión: Se almacenan información como pares de clave/valor, pero solo durante lo que dure la sesión.

• Base de datos: Ofrece una API completa para almacenar información en base de datos.

Nosotros vamos a centrar en los dos primeros tipos de almacenamiento.

• El API WebStorage se divide en dos vertientes, el "SessionStorage", paraguardar información que caducará al final de la sesión y el "LocalStorage",que permite almacenar datos que perduren entre distintas visitas del mismousuario al sitio web.

LOCALSTORAGE

• Este mecanismo está pensado para almacenar información útil para múltiplesventanas/pestañas, que perdura en el tiempo. No se puede compartir de navegadora navegador. Para ello se utiliza el atributo localStorage. En este caso losdatos no desaparecen aun cerrando el navegador, únicamente se borraránhaciendo un borrado manual, mediante código, a través de la consola delnavegador o borrándolas directamente desde la carpeta en la que se guardan en elSO.

• Ej.: Para el caso de un formulario de "logueo". Para que el usuario no tenga queintroducir los datos cuando pulse a 'No cerrar sesión‘

window.localStorage - almacena los datos sin fecha de caducidad

SESSIONSTORAGE• Este mecanismo está pensado para guardar información referente a una

ventana/pestaña en la que el usuario lleva a cabo una transacción simple, peropodría llevar a cabo múltiples transacciones en diferentes ventanas/pestañasal mismo tiempo. Para ello se utiliza el atributo sessionStorage. Cabe destacarque los datos se pierden al cerrar el navegador.

• Ej.: Para el caso de un formulario de registro. Para que si el usuario pierde laconexión y debe darle a actualizar (F5), no tenga que volver a introducir losdatos.

code.sessionStorage - almacena los datos para una sesión (los datos se pierdencuando la pestaña se cierra)

ATRIBUTOS:

• length: devuelve el número de pares clave/valor que contiene el objeto. Es de sólolectura, no es modificable.

localStorage.length

MÉTODOS:

• key(n):Devuelve la clave n en el almacenamiento.

//devuelve altura del ejemplo anterior

localStorage.key(0);

• setItem(key, value):Inserta un nuevo valor en el almacenamiento con la llaveproporcionada.

localStorage.setItem('altura', '100');

localStorage.setItem('anchura', '500');

• getItem(key): Devuelve el valor de la clave proporcionada. Si el elemento noexiste, se devolverá null.

// devuelve el valor de altura del ejemplo anterior

localStorage.getItem('altura');

• removeItem(key, value): Elimina el elemento que está conectado a la llaveproporcionada. Si no existe la clave, el método no hace nada.

localStorage.removeItem('altura');

• clear(): elimina todos los pares clave/valor del objeto.

localStorage.clear();

Conocer si tu navegador soporta ésta API

<script type="text/javascript">

function compruebaCompatibilidad() {

if (window.sessionStorage && window.localStorage) {

alert('Tu navegador acepta almacenamiento local');

}

else {

alert('Lo siento, pero tu navegador no acepta almacenamiento local');

}

}

</script>

Características

• Con HTML5, las páginas web pueden almacenar datos localmente en el navegador del usuario. Antes, esto se hacía con las cookies, sin embargo, el almacenamiento Web es más seguro y más rápido.

• Los datos no se incluye con cada petición del servidor, pero es usado solamente cuando se le pide.

• También es posible almacenar grandes cantidades de datos, sin afectar el rendimiento de la página web.

• Los datos se almacenan en pares nombre / valor, y una página web se puede acceder a los datos almacenados sólo por sí mismo.

• A diferencia de las cookies, el límite de almacenamiento es mucho mayor (al menos 5 MB) y la información nunca se transfiere al servidor.

Compatibilidad entre Navegadores

• Es soportado en Internet Explorer 8+, Firefox, Ópera, Chrome y Safari

• La información que se guarda en el navegador no se almacena encriptada, a no ser que se haya encriptado previa y explícitamente mediante Javascriptpor otros mecanismos ajenos al propio API WebStorage.

• A diferencia de las cookies, la información almacenada sólo puede ser accedida desde la parte del cliente, es decir, no existe un mecanismo para acceder directamente desde PHP o cualquier otro lenguaje de servidor a los datos del WebStorage.

COOKIES VS. STORAGE

Beneficios y Utilidad

• La información del Web Storage solamente puede ser accedida desde el cliente, nunca desde el servidor.

• A diferencia de las cookies que se mandan como cabeceras http, el Web Storage no intercambia en ningún momento información con el servidor lo que lo hace mucho más seguro y más rápido.

• La información no es incluida en cada petición al servidor como sucede con las cookies, sino que solo se obtiene cuando se quiere usar.

• La información es almacenada en pares clave-valor por lo que se puede usar como si se tratase de variables.

• Una página web únicamente puede acceder a la información que ha almacenado ella por lo que es más seguro.

• Almacenar datos del lado del cliente.

Conclusión

• La creciente necesidad de acceder a un mismo archivo desde diferentesdispositivos, ha contribuido al desarrollo de herramientas para disponer dela información requerida en cualquier lugar y momento: desde USB acuentas de correo electrónico para el reenvío adjunto de los archivos.

• No se tuvo inconveniente en relación al tiempo de entrega.

• El tiempo calculado para este trabajo fue de 2 días.

Referencias

• 1. W3C. W3C Recommendation. W3C Recommendation. [En línea] W3C. http://www.w3.org/TR/webstorage/

• 2. Byte Lovers. Byte Lovers. [En línea] luiszuno.com. http://www.bytelovers.com/blog/html/almacenamiento-con-html5-web-storage

• 3. Carrero, Hermanos. Programacion.com. Programacion.com. [En línea] Diseño y desarrollo web. http://www.programacion.com/articulo/almacenamiento_local_utilizando_html_5_387

Ejercicio

• Mencione para usted que es el almacenamiento web.

• Mencione los 2 tipos de almacenamiento web que hay.

• Realizar una pagina que lleve el conteo de los clicks de un botón, y que al refrescar la pagina continúe con el conteo.