Este documento describe el almacenamiento web en HTML5, el cual permite a las páginas web almacenar información en el navegador del usuario. Explica que existen dos tipos principales de almacenamiento: sessionStorage para datos de sesión y localStorage para datos que perduren entre visitas. También detalla los métodos y atributos del API de almacenamiento web.

1. API Almacenamiento Web
HTML5
10410567 Escárcega Enríquez Jesús Javier
10410576 Alvídrez Arrieta Hugo
6-Febrero-2014

2. ¿Qué es el almacenamiento web?
•
Es una de las especificaciones incluidas en la parte de Javascript de HTML5, que permite a
las 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 permiten
almacenar 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.

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

4. LOCALSTORAGE
•
•
Este mecanismo está pensado para almacenar información útil para múltiples
ventanas/pestañas, que perdura en el tiempo. No se puede compartir de navegador
a navegador. Para ello se utiliza el atributo localStorage. En este caso los
datos no desaparecen aun cerrando el navegador, únicamente se borrarán
haciendo un borrado manual, mediante código, a través de la consola del
navegador o borrándolas directamente desde la carpeta en la que se guardan en el
SO.
Ej.: Para el caso de un formulario de "logueo". Para que el usuario no tenga que
introducir los datos cuando pulse a 'No cerrar sesión‘
window.localStorage - almacena los datos sin fecha de caducidad

5. 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, pero
podría llevar a cabo múltiples transacciones en diferentes ventanas/pestañas
al mismo tiempo. Para ello se utiliza el atributo sessionStorage. Cabe destacar
que los datos se pierden al cerrar el navegador.
• Ej.: Para el caso de un formulario de registro. Para que si el usuario pierde la
conexión y debe darle a actualizar (F5), no tenga que volver a introducir los
datos.
code.sessionStorage - almacena los datos para una sesión (los datos se pierden
cuando la pestaña se cierra)

6. ATRIBUTOS:
• length: devuelve el número de pares clave/valor que contiene el objeto. Es de sólo
lectura, 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 llave
proporcionada.
localStorage.setItem('altura', '100');
localStorage.setItem('anchura', '500');

7. •
getItem(key): Devuelve el valor de la clave proporcionada. Si el elemento no
existe, 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 llave
proporcionada. 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();

8. 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>

9. 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.

10. 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 Javascript
por 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.

11. COOKIES VS. STORAGE

12. 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.

13. Conclusión
• La creciente necesidad de acceder a un mismo archivo desde diferentes
dispositivos, ha contribuido al desarrollo de herramientas para disponer de
la información requerida en cualquier lugar y momento: desde USB a
cuentas 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.

14. 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

15. 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.