Estoy liado aprendiendo a utilizar indexedDB en un proyecto en javascript.
Surfeando por internet encontré muchos manuales/tutoriales de como utilizarlo a groso modo. Realicé un script el cual creaba o abría la "bd", añadía y mostraba los resultados. Funciones básicas, escritas secuencialmente sin interrupciones alguna, es decir al ejecutarse hacia todos esas acciones.
Código:
Evidentemente ese script es un ejemplo de prueba para quedarme con el funcionamiento.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) { window.alert("Tu navegador no soporta IndexedDB."); } var openRequest = indexedDB.open("pruebaBD",1); openRequest.onupgradeneeded = function(e) { // cuando es necesario crear las tablas de la base de datos var thisDB = e.target.result; if(!thisDB.objectStoreNames.contains("documents")) { var os = thisDB.createObjectStore("documents", {keyPath: "id",autoIncrement:true}); // crear tabla } }; openRequest.onsuccess = function(e) { // se ha creado con exito var db = e.target.result; var transaction = db.transaction(["documents"],"readwrite"); var store = transaction.objectStore("documents"); var docs = { title:"title", text:"text", date:new Date().getTime(), update:"update" }; var request = store.add(docs); request.onerror = function(e) { console.log("add doc to Database error: ", e.target.errorCode); }; request.onsuccess = function(e) { var transaction = db.transaction(["documents"],"readonly"); var store = transaction.objectStore("documents"); var request = store.openCursor(); request.onsuccess = function(event) { // Esto es un hack para versiones antiguas de Firefox (older versions than 6) var cursor = request.result || event.result; // Cuando el cursor esté a nulo es que hemos terminado la enumeración, por lo que // actualizamos el DOM if (!cursor) { $("#c").html("<div></div>"); return; } $("body").append("key: " + cursor.value.id + " => Todo text: " + cursor.value.text + ""); console.log("<div>key: " + cursor.value.id + " => Todo text: " + cursor.value.text + "</div>"); cursor.continue(); }; }; }; openRequest.onerror = function(e) { // ha ocurrido algún error console.log("Database error: ", e.target.errorCode); };
Ahora la idea es modular mediante objetos. Cuando inicio el proyecto se ejecuta al principio la creación o apertura de indexeddb, hasta ahí todo correcto.
Código:
La idea es que con un formulario, el cliente rellene unos datos y cuando dichos datos estén listos, mandarlos "database.addDoc();".var database = { init : 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) { window.alert("Tu navegador no soporta IndexedDB."); } openRequest = indexedDB.open("BD1",1); openRequest.onupgradeneeded = function(e) { // cuando es necesario crear las tablas de la base de datos var thisDB = e.target.result; if(!thisDB.objectStoreNames.contains("documents")) { var os = thisDB.createObjectStore("documents", {keyPath: "id",autoIncrement:true}); // crear tabla } }; }, addDoc : function(_title,_text,_date){ openRequest.onsuccess = function(e) { // se ha creado con exito var db = e.target.result; var transaction = db.transaction(["documents"],"readwrite"); var store = transaction.objectStore("documents"); var objValues = { title : _title, content : _text, date : _date, update : "-" }; var request = store.add(objValues); request.onerror = function(e) { console.log("add doc to Database error: ", e.target.errorCode); }; request.onsuccess = function(e) { console.log("add ok"); }; }; openRequest.onerror = function(e) { // ha ocurrido algún error console.log("Database error: ", e.target.errorCode); }; } }; database.init();
Todos los datos son mandados correctamente desde el formulario, e incluso la conexión establecida con indexdb al crearla como variable global parece que también me lo manda correctamente.
El problema me surge al interpretar addDoc del objeto database, que entra en dicho apartado, pero no me ejecuta "request.onsuccess = function..." que es la primera linea. Antes de dicha linea he comprobado que los datos que se mandan son correctos.
Alguna idea de que hago mal? algún fallo de diseño?
Cualquier ayuda será bienvenida.
Gracias.