Practica 5 Bases de Datos Locales

Instituto Tecnolgico de Celaya
HTML5: Prctica #5 Almacenamiento web
Tpicos Avanzados de Programacin Web

Semestre Enero Junio 2014 Uno de los aportes interesantes de HTML5 es la gestin de bases de datos locales para eliminar las cookies o mejorar la gestin de las variables de sesin. Existen diferentes mecanismos para realizar Almacenamiento en el lado del cliente por medio de HTML5: WebStorage Indexed Database Web SQL Database File Access
El beneficio de utilizar almacenamiento local es que permite manejar datos offline en nuestras aplicaciones y mejorar el rendimiento. En trminos generales, se tienen las siguientes caractersticas: Sandbox: Todo lo que corre sobre el navegador se ejecuta sobre Sandbox, es decir, est en una caja cerrada donde no se pueden tocar elementos exteriores para no afectar otros elementos del equipo del usuario; en otras palabras, solamente la pgina que guarda un dato, puede acceder a l y utilizarlo. Ninguna otra pgina tendr acceso al dato. Cuota: La cuota del espacio es limitada y la define cada navegador. Transacciones: Existen 2 tipos de bases de datos que permiten transacciones para mantener la integridad de los datos. Recuerda que una transaccin tiene 2 situaciones: rollback (en caso de error) y commit (confirmando la operacin en caso de xito) bajo la premisa de atomicidad: Se ejecuta TODO o NADA. Sncrono y Asncrono: Los tipos de almacenamiento tienen mtodos sncronos y asncronos.
Para detectar si un navegador tiene conexin a Internet, se puede utilizar la propiedad online del objeto navigator:
var condition = navigator.onLine ? "online" : "offline";


Semestre Enero Junio 2014 WebStorage WebStorage basa su funcionamiento en almacenar una variable (llave) junto con su valor. Se recomienda utilizar nicamente cuando se desea almacenar pocos datos de tipo primitivo. Ventajas: Presente en la mayora de los navegadores modernos. Su especificacin es sencilla, solamente se maneja un par llave valor Desventajas: Tiene un mal rendimiento para manejar grandes cantidades de datos. No maneja ndices, por lo que el rendimiento en las bsquedas es ineficiente. Se requiere proteger explcitamente la integridad referencial. Manejar Web Storage es realmente sencillo, pues solamente se utiliza el objeto localStorage: localStorage.llave = valor; Por ejemplo, para la asignacin de datos se puede hacer lo siguiente: localStorage.nombre = "Pepe"; localStorage.materias = ["Tpicos de Progra Web", "Programacin III"]; Para recuperacin de informacin, simplemente se accede a la propiedad desde localStorage: document.querySelector("#texto").innerHTML = localStorage.nombre; Ejercicio: Realice un formulario donde se muestre el texto "Nombre", una caja de texto y un botn. Cuando se cargue la pgina, se debe mostrar en la caja de texto un valor almacenado por Web Storage y el botn guardar debe permitir actualizar el valor de dicha variable. <!DOCTYPE html> <html> <head> <script> function muestraValor(){ document.querySelector("#txtNombre").value = localStorage.nombre; } function guardar() { localStorage.nombre = document.querySelector("#txtNombre").value; } </script> </head> <body onload="muestraValor()"> Nombre: <input type="text" id="txtNombre"> <input type="button" value="Guardar dato" onclick="guardar()"> </body> </html>


Semestre Enero Junio 2014 Web SQL Database Es un pequeo motor transaccional de bases de datos integrado en navegador y manejado desde JavaScript, disponible en Google Chrome. Este mtodo de almacenamiento tiene las siguientes ventajas: Est soportado por la mayora de los navegadores mviles (Android, Safari, Opera Mobile). Es un API asncrono que tiene un buen rendimiento por lo general. Dado que maneja ndices, las bsquedas son eficientes. Soporta transacciones. Una transaccin se basa en el principio de atomicidadad: Se ejecuta TODO (xito) o NADA (error). Soporta la integridad de datos.
Las siguientes son las desventajas de esta forma de almacenamiento con HTML 5: No se soporta en IE ni en Firefox Requiere conocer la sintaxis de SQL Es un estndar que no se va a continuar. Los 3 mtodos que maneja WebSQL son: openDatabase transaction executeSql
Para crear una base de datos se utiliza el mtodo openDatabase: var db = openDatabase('base', '1.0', 'Mi BD', 2*1024*1024);
Este mtodo sirve tanto para crear una base de datos como para abrir una conexin a sta. Si ya existiera, se usara la base de datos existente, en caso contrario, se creara una nueva. Los parmetros son: Nombre de base de datos Versin Descripcin de la base de datos Tamao en bytes.
El mtodo openDatabase tambin permite conocer si el navegador soporta o no Web Storage: if(!window.openDatabase) alert("Tu navegador no acepta WebSQL");


Semestre Enero Junio 2014
Algo interesante, y posiblemente un modelo a seguir por otros lenguajes de programacin, es que toda ejecucin de consultas sobre la base de datos se realiza dentro de una transaccin. Si la ejecucin o el cdigo interno falla, el rollback es automtico. Para ello, se utiliza la funcin transaction:
if (db) { db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS USUARIOS (id unique, nombre, apellido)'); tx.executeSql('INSERT INTO USUARIOS VALUES (1, "Juan", "Perez")'); tx.executeSql('INSERT INTO USUARIOS VALUES (2, "Pepe", "Lopez")'); }); }
La ejecucin de la transaccin nos retornar un punto de ejecucin sobre esta transaccin, por lo tanto, todas las ejecuciones sobre la misma se harn dentro de este contexto. Es importante aclarar que el elemento transaction() puede contener un segundo parmetro para manejar la excepcin generada por la ejecucin de la transaccin.
db.transaction(function (tx) tx.executeSql('CREATE nombre, apellido)'); tx.executeSql('INSERT tx.executeSql('INSERT }, function (err) { alert(err); });
{ TABLE IF NOT EXISTS USUARIOS (id unique, INTO USUARIOS VALUES (1, "Juan", "Perez")'); INTO USUARIOS VALUES (2, "Pepe", "Lopez")');
Si se ejecuta por segunda vez el cdigo, el valor de la columna ID no resulta nico, por lo tanto la transaccin es cancelada y la funcin del error es lanzada. Sobre este motor es posible realizar consultas de la misma forma que el estndar SQL, pero tambin sobre una transaccin con el mtodo executeSql:
db.transaction(function (tx) { tx.executeSql('SELECT * FROM USUARIOS', [], function (tx, results) { var len = results.rows.length, i;


Semestre Enero Junio 2014 for (i = 0; i < len; i++) { alert(results.rows.item(i).nombre); } }); }); //con #=se obtiene apartir del id //sin #=se obtiene apartir del id var id = document.querySelector["#txtID"].value; db.transaction(function (tx) { tx.executeSql('SELECT * FROM USUARIOS WHERE id = ?', [id], function (tx, results) { var len = results.rows.length, i; for (i = 0; i < len; i++) { alert(results.rows.item(i).nombre); } }); }); La ejecucin de estos cdigos de SQL requieren 3 parmetros:
La consulta a ejecutar Una lista de parmetros La funcin que usaremos para manejar los resultados. En esta ltima, tambin obtendremos la transaccin por si necesitramos ejecutar otra consulta y el conjunto de resultados arrojados por la consulta. Algunos ejemplos: Creacin de una tabla con campo autoincremental: this.db.transaction(function(tx) { tx.executeSql("create table if not exists Tareas(id integer primary key autoincrement, tarea string, estado string)", [], function() {console.log("Tabla creda");}, function(t, "+e.message); } e){ console.log("Error al crear Tabla.


); }); Creacin de tabla e insercin de datos con parmetros: db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log]; }); Insercin de datos concatenando: db.transaction(function (tx) { tx.executeSql("INSERT ('"+strTarea+"', 'item' );", [], function(t, resultSet){ console.log("Se agreg un item a la lista."); }, function(t, e){ console.log("Hubo un error al agregar un item a la lista. "+e.message); }); }); Actualizacin de registros: db.transaction(function (tx) { tx.executeSql("UPDATE Tareas SET estado='terminado' where tarea = '"+item.innerText+"';", [], function(){ lista."); }, function(t, e){ console.log("Hubo un error al terminar un item de la lista. "+e.message); }) }); Eliminacin de registros: db.transaction(function (tx) { tx.executeSql("DELETE FROM Tareas", [], console.log("Se actualiz un item de la INTO Tareas (tarea, estado) VALUES


function(){ console.log("Se vaci la tabla Tareas."); }, function(t, e){ console.log("Hubo Tareas. "+e.message); }) }); Definitivamente este agregado de HTML5 puede llegar a ser una ventaja significativa sobre el uso de cookies y el almacenamiento de datos de forma temporal en el cliente. Posiblemente, un punto no muy atractivo sea el hecho de que, si esta tcnica se popularizara en el futuro, tendremos cientos de sitios tratando de almacenar grandes cantidades de datos localmente, haciendo de esta una mala prctica. Por otro lado, esta propuesta es una gran solucin para trabajar con aplicaciones desconectadas a nivel empresarial para que puedan descargar algunos registros, o almacenarlos localmente hasta volver a obtener una conexin con los servidores. un error al vaciar la tabla
Ejercicio: Realice una pgina donde se almacene una lista de tareas por hacer de forma local, con la funcionalidad de Agregar y Eliminar. Hoja de estilos estilos.css .terminado, .Terminado{ color: #ccc; text-decoration: line-through; } .item:hover, .Falta:hover{ cursor: pointer; } Pgina html: <!doctype html> <html> <head> <script type="text/javascript" src="websql.js"></script> <link rel="stylesheet" href="estilos.css"> </head> <body> <h2>Lista de Tareas</h2> <input id="txtTarea" type="text" placeholder="Por realizar..."/> <button id="btnAgregar">Agregar</button> <button id="btnEliminar">Eliminar</button> <ul id="lista"></ul> </body>


Semestre Enero Junio 2014 </html> Script websql.js: var db; var tarea; var listaTareas; window.onload = function(){ if(!window.openDatabase) alert("Tu navegador no acepta WebSQL"); db = openDatabase("miBD", "1.0", "Lista de cosas por hacer", 2*1024*1024); this.db.transaction(function(tx) { tx.executeSql( "create table if not exists Tareas(id integer primary key autoincrement, tarea string, estado string)", [], function() { console.log("Creada Tabla"); }, function(t, e){ console.log("Error al crear Tabla. "+e.message); } ); }); var btnAgregar = document.getElementById("btnAgregar"); var txtTarea = document.getElementById("txtTarea"); var btnEliminar = document.getElementById("btnEliminar"); btnAgregar.addEventListener("click", function(){ agregarTarea(txtTarea.value); }); btnEliminar.addEventListener("click", eliminar); db.transaction(function (tx) { tx.executeSql('SELECT * FROM Tareas', [], function (tx, results) { for (var i = 0; i < results.rows.length; i++) { var tarea = results.rows.item(i).tarea; var clase = results.rows.item(i).estado; agregarElemento(tarea, clase); } }, function(t,e){ console.log("Hubo un error: "+e.message); }); }); };


Semestre Enero Junio 2014 var agregarElemento = function (tarea, clase){ var lista = document.getElementById("lista"); var nuevo = document.createElement("li"); nuevo.setAttribute("class",(!clase)?"item":clase); nuevo.innerText = tarea; tarea.value = ""; lista.appendChild(nuevo); nuevo.addEventListener("click", function(){ finalizarTarea(nuevo); }); } var agregarTarea = function(tarea){ agregarElemento(tarea); db.transaction(function (tx) { tx.executeSql("INSERT INTO Tareas (tarea, estado) VALUES ('"+tarea+"', 'item' );", [], function(t, resultSet){ console.log("Se agreg una tarea."); }, function(t, e){ console.log("Error al agregar la tarea: "+e.message); }); }); } var finalizarTarea = function(item){ item.className = "terminado"; db.transaction(function (tx) { tx.executeSql("UPDATE Tareas SET estado='terminado' where tarea = '"+item.innerText+"';", [], function(){ console.log("Se termin la tarea."); }, function(t, e){ console.log("Error al terminar la tarea: "+e.message); }) }); }


Semestre Enero Junio 2014 var eliminar = function(){ var lista = document.getElementById("lista"); lista.innerHTML =""; db.transaction(function (tx) { tx.executeSql("DELETE FROM Tareas", [], function(){ console.log("Se vaci la tabla Tareas."); }, function(t, e){ console.log("Hubo un error al vaciar la tabla Tareas. "+e.message); }) }); };


Semestre Enero Junio 2014 Indexed DB Indexed Database es un almacn de objetos; no es lo mismo que una base de datos relacional que tiene tablas, columnas y filas de colecciones. Su ventaja principal es que SI es un estndar que tendr continuidad. Otras ventajas incluyen: Tiene buen soporte al ser accesible desde Internet Explorer, Google Chrome, Firefox Mobile, Firefox. Tiene buen rendimiento por lo general, siendo un API asncrono. Al soportar ndices maneja un buen rendimiento para las bsquedas. Soporta transacciones.
Es la alternativa al WebSQL, que est obsoleto. Aunque cabe recordar que WebSQL es utilizado ampliamente por los navegadores mviles. Dentro de sus desventajas nos encontramos con las siguientes: Su API es un poco ms complicada. Se debe garantizar la integridad de los datos debido a que es un almacn de objetos, no se manejan tablas de datos.
Como primer paso para utilizar IndexedDB, necesitas verificar que el navegador soporta esta caracterstica de HTML 5. En caso afirmativo, asignar 2 propiedades del objeto window: IDBTransaction e IDBKeyRange. Observa que estos 3 elementos del objeto window son particulares de cada navegador, por lo que hay que revisar cul es el que se necesita al ejecutar la pgina: window.indexedDB = window.indexedDB || window.mozIndexedDB window.webkitIndexedDB || window.msIndexedDB; if (!window.indexedDB) { alert("Tu navegador no soporta IndexedDB"); return; } window.IDBTransaction = window.IDBTransaction window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange window.webkitIDBKeyRange || window.msIDBKeyRange; || || ||
El segundo paso es asignar una referencia a la base de datos y agregar eventos. Se puede lograr con el siguiente cdigo: var dbManager = {}; dbManager.db = {};


Semestre Enero Junio 2014 var NOMBRE_BD = "Tareas"; var NOMBRE_ALMACENAMIENTO = "tareas"; Creacin de la base de datos y el almacenamiento: dbManager.crearDB = function(callback){ var request = indexedDB.open(NOMBRE_BD, 1); request.onerror = function(e) { alert("Error en la peticion de creacion de la BD." + e); }; request.onsuccess = function(e) { console.log("BD creada"); dbManager.db = e.target.result; if(callback) callback(); }; request.onupgradeneeded = function(e) { dbManager.db = e.target.result; var store = dbManager.db.createObjectStore( NOMBRE_ALMACENAMIENTO, { keyPath: "id", autoIncrement: true }); store.createIndex("indiceTarea", "tarea", { unique: false }); store.createIndex("indiceEstado ", "estado", { unique: false }); store.add({tarea: "Comer sano", estado: "Falta" }); store.add({tarea: "Terminar Monografia", estado: "Falta"}); }; }; Obtener una referencia al almacenamiento: dbManager.getObjectStore = function(mode){ var tx = dbManager.db.transaction(NOMBRE_ALMACENAMIENTO, mode); return tx.objectStore(NOMBRE_ALMACENAMIENTO); }; Agregar un objeto al almacenamiento: dbManager.insertarTarea = function(strTarea){ var store = dbManager.getObjectStore('readwrite'); var req = store.add({tarea: strTarea, estado: "Falta"}); req.onsuccess = function (e) { agregarElemento(strTarea); console.log("Tarea insertada exitosamente.");


Semestre Enero Junio 2014 }; }; Actualizar un elemento del almacenamiento: dbManager.finalizarTarea = function(item){ var store = dbManager.getObjectStore('readwrite'); var req = store.openCursor(); req.onsuccess = function(e) { var cursor = e.target.result; if (cursor) { if(cursor.value.tarea == cursor.value.estado!="Terminado"){ var update = store.put({ id: cursor.value.id, tarea: cursor.value.tarea, estado: "Terminado" }); update.onsuccess = function(){ item.className = "Terminado"; }; update.onerror = function(e){ console.log("Error actualizar estado del tem "+cursor.value.id+" - "+e)}; } else{ cursor.continue(); } } else { console.log("No hay ms datos"); } }; }; Consultar datos del almacn: dbManager.getTodasTareas = function(callback){ var store = dbManager.getObjectStore('readwrite'); var resultado = []; var req = store.openCursor(); req.onsuccess = function(e) { var cursor = e.target.result; if (cursor) { resultado.push(cursor.value); cursor.continue(); } else { if(callback) callback(resultado); al item.innerHTML &&


Semestre Enero Junio 2014 } }; }; Eliminar datos del almacenamiento: dbManager.borrarTodo = function(){ var store = dbManager.getObjectStore('readwrite'); var req = store.clear(); req.onsuccess = function(e) { var lista = document.getElementById("lista"); lista.innerHTML =""; console.log("Eliminados los datos"); }; req.onerror = function (e) { console.error("Error al e.target.errorCode); }; }; eliminar el Store:",
Ejercicio: A partir del ejercicio anterior, implemente la misma funcionalidad utilizando IndexedDB en lugar de WebSQL: Script IndexDB.js: window.onload = function(){ window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; if (!window.indexedDB) { alert("Tu navegador no soporta IndexedDB"); return; } var btnAgregar = document.getElementById("btnAgregar"); var btnEliminar = document.getElementById("btnEliminar"); var tarea = document.getElementById("txtTarea"); btnAgregar.addEventListener("click", function(){ dbManager.insertarTarea(tarea.value); });


Semestre Enero Junio 2014 btnEliminar.addEventListener("click", dbManager.borrarTodo); dibujarTareas(); }; var dbManager = {}; dbManager.db = {}; var DB_NAME = "Tareas"; var STORE_NAME = "tareas"; dbManager.crearDB = function(callback){ var request = indexedDB.open(DB_NAME, 1); request.onerror = function(e) { alert("Error en la creacin de la BD." + e); }; request.onsuccess = function(e) { console.log("BD creada"); dbManager.db = e.target.result; if(callback) callback(); }; request.onupgradeneeded = function(e) { dbManager.db = e.target.result; var store = dbManager.db.createObjectStore(STORE_NAME, { keyPath: "id", autoIncrement: true }); store.createIndex("indiceTarea","tarea",{ unique: false }); store.createIndex("indiceEstado","estado",{unique:false }); store.add({tarea: "Comer sano", estado: "Falta" }); store.add({tarea: "Terminar Monografia", estado: "Falta"}); }; }; dbManager.getObjectStore = function(mode){ var tx = dbManager.db.transaction(STORE_NAME, mode); return tx.objectStore(STORE_NAME); }; dbManager.insertarTarea = function(strTarea){ var store = dbManager.getObjectStore('readwrite'); var req = store.add({tarea: strTarea, estado: "Falta"}); req.onsuccess = function (e) { agregarElemento(strTarea); console.log("Tarea insertada exitosamente.");


Semestre Enero Junio 2014 }; }; dbManager.finalizarTarea = function(item){ var store = dbManager.getObjectStore('readwrite'); var req = store.openCursor(); req.onsuccess = function(e) { var cursor = e.target.result; if (cursor) { if(cursor.value.tarea == item.innerHTML && cursor.value.estado!="Terminado"){ var update = store.put({ id: cursor.value.id, tarea: cursor.value.tarea, estado: "Terminado" }); update.onsuccess = function(){ item.className = "Terminado"; }; update.onerror = function(e){ console.log("Error al actualizar estado item"+cursor.value.id+" - "+e) }; }else{ cursor.continue(); } } else { console.log("No more entries!"); } }; }; dbManager.getTodasTareas = function(callback){ var store = dbManager.getObjectStore('readwrite'); var resultado = []; var req = store.openCursor(); req.onsuccess = function(e) { var cursor = e.target.result; if (cursor) { resultado.push(cursor.value); cursor.continue(); } else { if(callback) callback(resultado); } }; };


Semestre Enero Junio 2014 dbManager.borrarTodo = function(){ var store = dbManager.getObjectStore('readwrite'); var req = store.clear(); req.onsuccess = function(e) { var lista = document.getElementById("lista"); lista.innerHTML =""; console.log("Vaciado!"); }; req.onerror = function (e) { console.error("Error al e.target.errorCode); }; }; eliminar el Store:",
var dibujarTareas = function(){ dbManager.crearDB(function(){ dbManager.getTodasTareas(function(tareas){ tareas.forEach(function(tarea){ agregarElemento(tarea.tarea, tarea.estado); }); }); }); }; var agregarElemento = function (itemTarea, clase){ var lista = document.getElementById("lista"); var nuevo = document.createElement("li"); nuevo.setAttribute("class",(!clase)?"Falta":clase); nuevo.innerText = itemTarea; lista.appendChild(nuevo); nuevo.addEventListener("click", function(){ dbManager.finalizarTarea(nuevo); }); var tarea = document.getElementById("txtTarea"); tarea.value = ""; };


Semestre Enero Junio 2014 File Access Permite guardar contenido en una carpeta local del dispositivo, de manera que el navegador asocia la pgina visitada con dicha carpeta, para saber que el contenido descargado relacionado est alojado ah. No es una base de datos, sino un esquema de almacenamiento. Las ventajas de este tipo de almacenamiento son: Permite almacenar grandes cantidades de datos, por lo que es ideal para guardar imgenes, videos, documentos PDF, audio, etctera. Al igual que IndexedDB y WebSQL es asncrona, por lo que el rendimiento es bueno.
Y las desventajas son: Su desarrollo es reciente, por lo que solamente se soporta en Chrome No maneja transacciones No soporta el indexamiento para las bsquedas
Para implementar FileAccess, en primer lugar genera el objeto requestFileSystem, el cual maneja objetos particulares para cada navegador (actualmente solo se soporta Google Chrome): window.requestFileSystem window.webkitRequestFileSystem; = window.requestFileSystem 5 * 1024 * || 1024,
window.requestFileSystem(window.TEMPORARY, onSuccess, onError);
La peticin puede ser temporal (TEMPORARY) o permanente (PERMANENT). Si es temporal, la informacin almacenada puede ser removida por el navegador, mientras que si es permanente, solamente el usuario de forma explcita o la misma pgina web puede eliminar el contenido. Al hacer la peticin del requestFileSystem se indican 2 mtodos para el caso de xito y error. Los mtodos se deben implementar con la codificacin deseada: var onSuccess = function(filesystem){ console.log("Sistema de Archivos accesado.") fs = filesystem; }; var onError = function(e) { var msg = ''; switch (e.code) { case FileError.QUOTA_EXCEEDED_ERR: msg = 'Cuota excedida'; break; case FileError.NOT_FOUND_ERR:


Semestre Enero Junio 2014 msg = 'No encontrado'; break; case FileError.SECURITY_ERR: msg = 'Error de seguridad'; break; case FileError.INVALID_MODIFICATION_ERR: msg = 'Modificacin no vlida'; break; case FileError.INVALID_STATE_ERR: msg = 'Error de estado invlido'; break; default: msg = 'Error desconocido'; break; }; console.log('Error: ' + msg); } La creacin de archivos se realiza con el objeto filesystem: var crearArchivo = function(nombre, contenido) { fs.root.getFile( nombre + ".txt", {create:true}, function(entry){ entry.createWriter( function(writer){ writer.onwriteend = function(){ console.log("Termino de escribir."); }; writer.onerror = function(e){ console.log("Error al escribir: "+e); }; var blob = new Blob([contenido], "text/plain;charset=UTF-8"}); writer.write(blob); },onError); },onError ); } Obtener un archivo se hace de la siguiente manera: var leerArchivo = function(nombre){ fs.root.getFile( nombre+".txt", {}, function(entry){ {type:


Semestre Enero Junio 2014 entry.file(function(file){ var reader = new FileReader(); reader.onloadend = function(e) { var txtArea = document.createElement('textarea'); txtArea.value = this.result; document.body.appendChild(txtArea); }; reader.readAsText(file); }, onError); }, onError ); }; Agregar datos a un archivo existente: var escribirEnArchivo = function(nombre, contenido) { fs.root.getFile( nombre + ".txt", {create:false}, function(entry){ entry.createWriter( function(writer){ writer.seek(writer.length); var bb = new BlobBuilder(); //var bb = new WebKitBlobBuilder (); bb.append(contenido); writer.write(bb.getBlob('text/plain')); },onError); },onError ); } Eliminar archivos: window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { fs.root.getFile('log.txt', {create: false}, function(entry){ entry.remove(function() { console.log('File removed.'); }, onError); }, onError); }, onError); Cdigo para subir y mostrar una imagen utilizando localStorage:


Semestre Enero Junio 2014 http://robnyman.github.io/html5demos/localstorage/js/base.js https://github.com/robnyman/robnyman.github.com/blob/master/html5demos/localstorage/ind ex.html

Practica 5 Bases de Datos Locales

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Practica 5 Bases de Datos Locales

Uploaded by

Copyright:

Available Formats

Instituto Tecnolgico de Celaya

HTML5: Prctica #5 Almacenamiento web

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

window.requestFileSystem(window.TEMPORARY, onSuccess, onError);

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

Instituto Tecnolgico de Celaya

Tpicos Avanzados de Programacin Web

You might also like