Almacenamiento en el cliente

Desarrollo Web en Entorno Cliente

DAW

Tema 6

Sergio de Mingo (IES G.M. Jovellanos)

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

1 / 22

1 Sistemas de Almacenamiento

2 Almacenamiento Web

3 Aplicaciones Web Desconectadas

4 Otros mecanismos

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

2 / 22

Sistemas de Almacenamiento

Almacenamiento en el cliente

El almacenamiento de informacin en el lado del cliente en una

aplicacin web se ha dado desde los inicios de estas
Tradicionalmente se han usado Cookies
Las cookies son el mtodo mejor soportado por todo tipo de
navegadores
HTML5 ha introducido nuevos sistemas de almacenamiento de
informacin

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

3 / 22

Sistemas de Almacenamiento

Cookies

Son definidas por el servidor (aunque tambin podemos definirlas

desde JS)
El servidor pide su creacin en el cliente y a partir de ese momento,
todas las peticiones HTTP desde el navegador hacia ese sitio incluirn
en las cabeceras esas cookies definidas
Este comportamiento consume ancho de banda en exceso, por eso las
cookies deben usarse con precaucin

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

4 / 22

Sistemas de Almacenamiento

Cookies

Hasta la aparicin de estos nuevos sistemas de almacenamiento las

cookies han sido necesarias
El mecanismo de sesiones usado por la mayora de aplicaciones web
hace necesario almacenar parte del estado en el cliente
El cliente debe autorizar su almacenamiento
La seguridad puede ser otro problema. Trfico cifrado?

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

5 / 22

Sistemas de Almacenamiento

Nuevos mecanismos de almacenamiento

Almacenamiento Web Parte de HTML5. Muy sencillo de usar aunque no
soportado por los navegadores antiguos
Ap. Web Desconectadas Sistema de HTML5 para cachear gran cantidad
de informacin de la aplicacin para su posterior uso
desconectado
Bases de datos Web Interfaz SQL que solo implementan algunos
navegadores (IE y Firefox). No es estndar.
FileSystem API Interfaz para acceder a los ficheros almacenados en el
sistema de ficheros local. An no esta muy extendida

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

6 / 22

Almacenamiento Web

Almacenamiento Web
Tambin es conocido como .almacenamiento local.o "web storage"
Su funcionamiento se basa en dos implementaciones de la
Estas implementaciones son localStorage y sessionStorage
Ambas son propiedades del objeto window
La diferencia entre ambos es el alcance y el tiempo de vida de los
datos. Los datos de sesin de destruyen al cerrar en el navegador, los
datos locales persisten

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

7 / 22

Almacenamiento Web

Almacenamiento Web: alcance y tiempo de vida

La diferencia entre estas dos implementaciones es el alcance(scope) y

el tiempo de vida (lifetime) de los datos
El relacin al tiempo de vida, los datos con localStorage son
permanentes y solo se borran bajo demanda del usuario (a travs del
navegador). Con sessionStorage, los datos solo persisten mientras
exista el objeto pestaa o ventana

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

8 / 22

Almacenamiento Web

Almacenamiento Web: alcance y tiempo de vida

El alcance de ambos son todos los documentos que provengan del

mismo origen. Entiendo origen como el conjunto de Protocolo +
servidor + puerto. En el ejemplo, solo los dos primeros seran del
mismo origen
http://www.ejemplo.com
http://www.ejemplo.com/prueba.html
https://www.ejemplo.com
http://www.ejemplo.com:80

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

9 / 22

Almacenamiento Web

Almacenamiento Web: interfaz

La interfaz es muy sencilla:

setItem(nombre,valor)
getItem(nombre)
removeItem(nombre)
clear()
key(pos)

Para almacenar objetos complejos es necesario .aplanarlosomo strings

(por ejemplo con JSON)

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

10 / 22

Aplicaciones Web Desconectadas

Aplicaciones desconectadas

Desde la implantacin de HTML5 los navegadores incorporan una

cach para almacenar toda la informacin necesaria para visualizar una
aplicacin sin conexin
Esta informacin va ms all que los simples tems"de Storage
En esta cach se pueden almacenar todos los ficheros necesarios para
la aplicacin como hojas CSS, ficheros HTML, imgenes, ficheros JS,
etc ...

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

11 / 22

Aplicaciones Web Desconectadas

Aplicaciones desconectadas

Esta cach recoge la informacin de los ficheros que necesita

almacenar de un fichero manifiesto o manifest
Este fichero se enlaza en la cabecera de cada documento HTML del
que conste la aplicacin
Una vez que la aplicacin web se ha cargado (y descargado) la primera
vez, cada recarga acude siempre a la cach del navegador

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

12 / 22

Aplicaciones Web Desconectadas

Fichero Manifest
Este puede ser un ejemplo del fichero manifest
CACHE MANIFEST
myapp.html
myapp.js
myapp.css
img/background.jpg

Este fichero se enlaza en la propia etiqueta html:

<html manifest="myapp.appcache">
<head>...</head>
<body>...</body>
</html>

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

13 / 22

Aplicaciones Web Desconectadas

Sincronizacin con el servidor

Cuando el servidor de la aplicacin se encuentra al alcance de nuevo el
navegador revisar si el fichero manifest ha sido modificado. En este
caso sincronizar todos los contenidos de la aplicacin actualizando la
cache
Solo se chequea la versin del fichero manifiesto. Si se ha
actualizado otro fichero (p.e myapp.js) pero no el manifiesto la cach
no actualiza nada
Por eso es importante incluir algn cambio en el fichero manifiesto
cada vez que actualicemos algo en la aplicacin. As obligamos a los
navegadores a actualizarse.

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

14 / 22

Aplicaciones Web Desconectadas

Sincronizacin con el servidor

Por ejemplo una lnea comentada con el nmero de versin del

manifiesto:
CACHE MANIFEST
# File version: 0001
myapp.html
...

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

15 / 22

Aplicaciones Web Desconectadas

Sintaxis de manifiestos
Los ficheros manifiesto pueden incluir otras secciones para aportar ms
informacin
La seccin NETWORK informa de urls que deben ser tomadas del
servidor siempre y nunca cacheadas. Por ejemplo, aqu pueden ir todas
las urls con cdigo del backend
la seccin FALLBACK incluye pares de recursos. El primer recurso del
par ser tomado de la red si es posible. Si falla, se cargar de la cache
el segundo recurso
Adems podemos usar caracteres comodines o prefijos para las urls

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

16 / 22

Aplicaciones Web Desconectadas

Fichero Manifest
CACHE MANIFEST
# File version: 0001
CACHE:
myapp.html
myapp.js
myapp.css
img/background.jpg
FALLBACK:
videos/ ayuda-modo-offline.html
NETWORK:
php/

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

17 / 22

Otros mecanismos

Cookies
Son definidas por el servidor. Se transmiten en cabeceras HTTP
Durante toda la sesin de trabajo (entre un cliente y un sitio web)
todas las cookies definidas viajan en cada peticin-respuesta
Es una manera de que el servidor sepa que un conjunto de mensajes
tienen cierta relacin. Por ejemplo, una sesin de usuario
Desde el inicio de JS, se incorporan mecanismos para definir cookies
desde el lado del cliente
Es un mecanismo til para almacenar datos entre diferentes
documentos
Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

18 / 22

Otros mecanismos

Cookies

El mbito o alcance de la cookie es similar a la los anteriores sistemas,

basada en la ruta del documento
Una cookie es visible para un documento, para todos los de su
directorio y para todos los de los subdirectorios bajo el
Otro parmetro que podemos configurar en cada cookie es el tiempo
de vida o ampliar el mbito

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

19 / 22

Otros mecanismos

Usando cookies

Todas las cookies definidas se almacenan en document.cookie

Para definir una nueva cookie simplemente asignamos su par
nombre=valor a esta propiedad
Los valores no pueden contener acentos, ees, espacios, etc. por eso se
recomienda el uso de las funciones encodeURIComponent() y
decodeURIComponent()

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

20 / 22

Otros mecanismos

Usando cookies

Para leer las cookies hemos de recuperar el valor de la propiedad

document.cookie
Es un solo string as que habr que procesarlo usando split()
Si para los valores se ha usado alguna codificacin concreta esta debe
ser decodificada en este momento

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

21 / 22

(cc) Sergio de Mingo

Some rights reserved. This work is licensed under a Creative Commons
Attribution-Share Alike 3.0 Spain License, available at
http://creativecommons.org/licenses/by-sa/3.0/

http://apuntes-fp.blogspot.com
sergio.demingogil@educa.madrid.org

Desarrollo Web en Entorno Cliente (DAW)

Almacenamiento en el cliente

Tema 6

22 / 22