El viernes pasado, en el evento de Junio de Coders Cantabria, estuvimos analizando la especificación Html5 para almacenar información en cliente.

Os resumo las herramientas que tenemos disponibles a fecha de hoy, sus ventajas, sus inconvenientes y su compatibilidad entre navegadores.

Local/Session Storage

Tanto Local Storage como Session Storage, nos permiten almacenar entre 2 y 10 Mb en el navegador del cliente (según el navegador usado).

La información se almacena en forma clave/valor.

La información almacenada debe ser una cadena de texto

Lo que les diferencia a ambas es la persistencia del dato. Con SessionStorage perderemos el dato al cerrar el navegador o cerrar la sesión. Con LocalStorage en cambio, no perdemos la información.

Su uso es muy simple

getItem(key): nos devuelve un valor almacenado

localStorage.getItem("nombreKey")
sessionStorage.getItem("nombreKey")

setItem(key, valor): modifica un valor existente o lo crea si no existiera

localStorage.setItem("nombreKey","valor")
sessionStorage.setItem("nombreKey","valor")

Esta información es visible abriendo las herramientas de desarrollo. No se recomienda almacenar información sensible ya que no está cifrada.

WebSQL

WebSql plantea poder almacenar bases de datos relacionales en cliente pudiendo ejecutar consultas Sql igual que hacemos en servidor.

Tenemos un limite de 5Mb de almacenamiento

Desde el 18 de Noviembre del 2010 dejó de tener soporte y ya no es una especificación de Html5.

Firefox y Explorer han decidido no darle soporte. Sin embargo Chrome, Safari y Opera, siguen manteniéndolo.

Un ejemplo de uso podría ser el siguiente

var db = openDatabase("NombreBD", "1.0", "Base de datos de prueba", 5*1024*1024);
db.transaction(function(tx){
  tx.executeSql('select * from productos' ,[],
    function(tx, result){
      alert('Consulta OK');
    },
    function(tx, error){
      alert('Se ha producido el siguiente error');
    }
  );
});

IndexedDB

Se plantea como el sustituto de WebSql.

Es un sistema de almacenamiento local para grandes cantidades de datos.

Está orientado a objetos.

Nos permite un espacio ilimitado de almacenamiento.

Trabaja con 2 APIS distintos

• síncrono: usando ServiceWorkers
• asíncrono: usando callbacks

El siguiente ejemplo utiliza el API asíncrono, declarando las funciones callback «opupgradeneeded», «onSucess»

indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
var openRequest = indexedDB.open("basededatos",1);
openRequest.onupgradeneeded = function(e) { 
// cuando es necesario crear las tablas de la base de datos
   var thisDB = e.target.result;
}
 
openRequest.onsuccess = function(e) {
     // se ha creado con exito
}	

Firefox y Chrome dan soporte a IndexedDB. Sin embargo Internet Explorer aún no nos asegura trabajar con IndexedDB

Cache App

Cache App nos introduce en el paradigma «Offline First», que se encarga de preparar nuestra aplicación para que se encuentre disponible en «estado offline».

Cache App nos permite almacenar en local todos aquellos recursos de la aplicación indicados en un fichero manifest.

Este fichero se divide en 3 partes

• CACHE MANIFEST: nos indica los ficheros que deben ser cacheados
• NETWORK: nos indica aquellos ficheros que deben usasr la red
• FALLBACK: nos indica el fichero que debe ser mostrado ante una caida de conexión.

Analizando el recorrido que pueda tener Cache App, todo parece indicar que será sustituido por ServiceWorkers.

Tenéis un ejemplo muy bien explicando en la siguiente Url

https://jakearchibald.com/2014/offline-cookbook/

File System API

Y por último File System API, representa un sistema local de ficheros protegido

Nos permite almacenar grandes cantidades de información en formato binario.

El almacenamiento puede ser de 2 tipos

• temporal: son unos 5Mb. Se borra cuando el navegador necesita recuperar espacio
• persistente: es el usuario el que borra la información.

Tiene algunas limitaciones

• CrossDomain: No podemos acceder a ficheros de otro dominio
• Ficheros ejecutables: No nos permite almacenar ficheros ejecutables
• Restricción de nombres: No es posible nombres como «Mis Documentos»
  
• No acceso file:// : Al ser un espacio virtual, no podemos acceder al fichero via file://

Durante la sesión de Coders Cantabria se analizaron cada uno de estos métodos de almacenamiento.

Tenéis el código fuente y las transparencias de cada uno de ellos en Github y SlideShare

Codigo Fuente: gitHub

Transparencias: slideShare

Post By Rocio Muñoz (37 Posts)

Ingeniera Informatica. Dicen que todos los niños nacen con un pan debajo del brazo ... Yo creo que llevaba un ordenador. Trabajo como programadora en Cic en entornos Java. Apasionada del mundo web y la innovacion social.

Connect