Html5: Metodos de almacenamiento en cliente
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
No comments yet.