S4_sesion10_almacenamientolocal.pdf

SOLUCIONES INFORMATICAS IV TEMA: ALMACENAMIENTO LOCAL

Almacenamiento de datos en el Cliente •

•

•

• •

HTML5 ofrece dos objetos nuevos para almacenar datos en el cliente: • localStorage – almacena datos sin limite de tiempo. • sessionStorage – almacena datos para una sesión. Anteriormente, esto se hizo con cookies. Las cookies no son adecuadas para grandes cantidades de datos, ya que se transmiten CADA solicitud al servidor, lo que hace que sea muy lento y efectivo. En HTML5, los datos no son transmitidos por cada solicitud del servidor, sino que se usan solo cuando se solicitan. Es posible almacenar grandes cantidades de datos sin afectar el rendimiento del sitio web. Los datos se almacenan en diferentes áreas para diferentes sitios web, y un sitio web solo puede acceder a los datos almacenados por sí mismo. HTML5 usa JavaScript para almacenar y acceder a los datos.

Objeto localStorage • El objeto localStorage almacena los datos sin limite de tiempo. • Ejemplo: <script type="text/javascript"> localStorage.nombre="Jose"; document.write(localStorage.nombre);

Objecto localStorage • El siguiente ejemplo cuenta la cantidad de veces que un usuario ha visitado una página <script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits "+ localStorage.pagecount + " time(s).");

Objeto sessionStorage • El objeto sessionStorage almacena los datos para una sesión. Los datos se eliminan cuando el usuario cierra la ventana del navegador.

• Ejemplo: <script type="text/javascript"> sessionStorage.nombre="Smith"; document.write(sessionStorage.nombre);

Objeto sessionStorage • El siguiente ejemplo cuenta la cantidad de veces que un usuario ha visitado una página <script type="text/javascript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");

IndexedDB IndexedDB es una API de bajo nivel que ofrece almacenamiento en el cliente de cantidades significativas de datos estructurados, incluyendo archivos y blobs.

IndexedDB No es una base de datos relacional, sino que se podría llamar un almacén de objetos ya que en la base de datos que creemos, existen almacenes y en su interior añadimos objetos (como el siguiente): { id:21992, nombre: "Memoria RAM" }

IndexedDB Como algunas de las bondades de IndexedDB podemos destacar las siguientes: • Es un sistema de almacenamiento local: Es una característica muy útil; pensemos en una aplicación móvil hecha en HTML5… o en una extensión de Chrome, Firefox, etc. Si IndexedDB no fuera un sistema de almacenamiento local no podríamos acceder al contenido almacenado si nuestra conexión de red estuviese caída. Gracias a que la información almacenada en IndexedDB está en el propio equipo, nuestra aplicación puede seguir funcionando perfectamente aunque estemos sin conexión.

IndexedDB • No tiene límite de tamaño: Es una de sus grandes bondades. Al usar LocalStorage, tenemos un límite de almacenamiento establecido por el navegador… límite que suele rondar los 10MB. Si bien es suficiente para gran parte de los casos, este límite puede suponer un problema si nuestra aplicación mueve mucho dato. En el caso de IndexedDB este límite no existe y estamos hablando de un sistema de almacenamiento ilimitado (bueno, limitado por tu disco duro claro). Eso sí, en el caso de Firefox, aunque el espacio sea ilimitado, el navegador pre-reserva 50MB de espacio y te solicita permiso cuando necesita reservar otros 50MB.

IndexedDB • Permite múltiples “tablas”: Bueno, IndexedDB no funciona con tablas, pero en este punto del artículo y para que nos entendamos, puedes tener en una misma base de datos varias tablas para almacenar tu contenidos. • Permite múltiples bases de datos: No estás limitado a una base de datos, puedes conectarte a varias bases de datos vía IndexedDB.

IndexedDB: Crear base datos var indexedDB

=

window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

var dataBase = null; dataBase = indexedDB.open("soluciones4", 1);

dataBase.onsuccess = function (e) { alert('Base de datos cargada correctamente'); };