Prueba de Concepto – Autogestión Web

Almacenamiento local de imágenes en Base64

Estrategia
Para cubrir la necesidad presentada se propone una funcionalidad de guardar la información de las
Imágenes (de manera segura) utilizando Local Storage. Lo cual nos brinda la capacidad de
mantener la información almacenada del lado del cliente (navegador) sin impactar el modelo de
arquitectura.

Local Storage: El objeto Storage (API de almacenamiento web) nos permite almacenar datos de
manera local en el navegador y sin necesidad de realizar alguna conexión a una base de datos.
localStorage es una propiedad que accede al objeto Storage y tiene la función de almacenar datos
de manera local de forma indefinida o hasta que se decida limpiar los datos del navegador.
Del almacenamiento local podemos señalar:
Ventajas Desventajas
 Soporte por la mayoría de los  No soportado por nada antes: así que el
navegadores modernos. soporte no está disponible para los
 Almacenado directamente en el navegadores antiguos: IE 8, Firefox 3.5,
navegador. Safari 4, Chrome 4, Opera 10.5, iOS 2.0,
 Las mismas reglas de origen se Android 2.0. Pero, como puede verse, ya
aplican a los datos de es difícil encontrar estas versiones en
almacenamiento locales. uso hoy en día.
 No se envía con cada solicitud HTTP.  Si el servidor necesita información
 ~ 5MB de almacenamiento por almacenada del cliente, debe enviarla a
dominio (eso es 5120KB). propósito.

Al momento de realizar la primera conexión (sin información en el localStorage) del usuario y el

ingreso a la pantalla de seguimiento, esté proceso ocurrirá consultando todos los recursos a través
del servicio dispuesto para tal fin; para demora en carga de imágenes se realizará una pequeña
funcionalidad de carga progresiva para no interrumpir la navegación del usuario (colocando un
spinner de carga en la zona de las imágenes e impidiendo su acceso hasta que estén completas).
Luego de cargado el 100% de la información, se procederá a realizar el almacenado de la data de
las imágenes en el localStorage (Cache) del navegador para sus usos posteriores y así para una
próxima carga o navegación por esta pantalla de seguimiento, se realizará una consulta previa al
localStorage de la data requerida.

Se realizaron las siguientes pruebas:

1. Se almacenaron 60 imágenes en base64 en el Local Storage dentro de un array, cada

imagen con un peso de 41.2kb. En total 2.472kb ~ 3MB
2. Se recuperaron las imágenes del almacenamiento local y se mostraron en pantalla, dicho
proceso tomó menos de 1 segundo.