Ejemplo de uso de HTML5 IndexDB para almacenar imágenes y archivos

El otro día escribimos sobre cómo guardar imágenes y archivos en localStorage, se trataba del pragmatismo que tenemos a nuestra disposición hoy en día. Sin embargo, localStorage tiene algunas implicaciones de rendimiento (lo discutiremos en un blog posterior) y el enfoque deseado en el futuro es utilizar IndexedDB. Aquí te mostraré cómo almacenar imágenes y archivos en IndexedDB y luego renderizarlos a través de ObjectURL.

Este artículo está traducido, el texto original está aquí Almacenamiento de imágenes y archivos en IndexedDB

Sobre el autor: Robert Nyman [Editor emérito]

Evangelista técnico y editor de Mozilla Hacks. Da charlas y blogs sobre HTML5, JavaScript y la Web abierta. Robert cree firmemente en HTML5 y la Web abierta y ha estado trabajando desde 1999 en el desarrollo front-end para la web, en Suecia y en. Ciudad de Nueva York. También escribe regularmente en su blog atrobertnyman.com y le encanta viajar y conocer gente.

Primero, hablemos de los pasos que seguiremos para crear una base de datos IndexedDB, guardar el archivo en ella y luego leerlo y mostrarlo en la página:

1. Crea o abre una base de datos

2. Crea una tienda de objetos

3. Recuperar archivos de imagen como blobs

4. Inicializar una transacción de base de datos

5. Guarde el blob de imagen en la base de datos.

6. Lea el archivo guardado, cree un ObjectURL a partir de él y configúrelo en el src del elemento de imagen en la página.

 // IndexedDBwindow.indexedDB = ventana.indexedDB || ventana.webkitIndexedDB || ventana.mozIndexedDB || ventana.OIDBTransaction || , dbVersion = 1;/* Nota: La forma recomendada de hacer esto es asignando a window.indexedDB, para evitar posibles problemas en el ámbito global cuando los navegadores web comiencen a eliminar prefijos en sus implementaciones. Puede asignarlo a una variable, como var indexedDB... pero luego debe asegurarse de que el código esté contenido dentro de un archivo. function.*/// Crear/abrir base de datosvar request = indexedDB.open(elephantFiles, dbVersion);request.onsuccess = function (evento) { console.log(Creación/acceso exitosos Base de datos IndexedDB); db = request.result; db.onerror = function (event) { console.log(Error al crear/acceder a la base de datos IndexedDB }; // Solución provisional para que Google Chrome cree una tienda de objetos. db.setVersion) { if (db.version != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { createObjectStore(db); getImageFile(); }; else { getImageFile(); } } else { getImageFile(); Para uso futuro. = función (evento) { createObjectStore(event.target.result);};

La forma esperada de usarlo es activar el evento onupgradeneeded al crear la base de datos u obtener un número de versión superior. Actualmente, esta función solo es compatible con Firefox, pero pronto lo será en otros navegadores web. Si su navegador web no admite este evento, puede utilizar el método setVersion obsoleto y conectarse a su evento de éxito.

 // Crea un objectStoreconsole.log(Creando objectStore)dataBase.createObjectStore(elephants);

Aquí, crea un ObjectStore donde almacenará datos (o en nuestro caso, archivos) y una vez creado, no necesita volver a crearlo, solo actualizar su contenido.

 // Crea XHRvar xhr = new XMLHttpRequest(), blob;xhr.open(GET, elefante.png, true); // Establece el tipo de respuesta en blobxhr.responseType = blob;xhr.addEventListener(load, function () { if ( xhr.status === 200) { console.log(Imagen recuperada); // Archivo como blob de respuesta = xhr.response; blob recibido en IndexedDB putElephantInDb(blob); }}, false);// Enviar XHRxhr.send();

Este código obtiene directamente el contenido del archivo como un blob. Actualmente sólo se admite Firefox. Después de recibir el archivo completo, envíe el blob a la función para almacenarlo en la base de datos.

 // Abrir una transacción en la base de datosvar transacción = db.transaction([elefantes], IDBTransaction.READ_WRITE);

Para comenzar a escribir en la base de datos, debe iniciar una transacción con el nombre del objetoAlmacén y el tipo de operación que desea realizar (en este caso, lectura y escritura).

 // Coloca el blob en dabasetransaction.objectStore(elephants).put(blob, image);

Una vez que la transacción está realizada, obtienes una referencia al objectStore deseado, luego colocas tu blob en él y le das la clave.

 // Recuperar el archivo que acaba de almacenarsetransaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile = event.target.result;log(¡Tengo elefante! + imgFile); window.URL objeto var URL = window.URL || window.webkitURL // Crear y revocar ObjectURL var imgURL = URL.createObjectURL(imgFile); // Establece img src en ObjectURL var imgElephant = document.getElementById(elephant); imgElephant.setAttribute(src, imgURL); // Revocando ObjectURL URL.revokeObjectURL(imgURL);};

Utilice la misma transacción para obtener el archivo de imagen que acaba de almacenar, luego cree una URL de objeto y configúrela en el src de la imagen en la página. Por ejemplo, también podría ser un archivo JavaScript adjunto a un elemento de secuencia de comandos, que luego analizará el JavaScript.

 (función () { // IndexedDB var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction, dbVersion = 1.0 // Crear/abrir base de datos var request = indexedDB.open(elephantFiles, dbVersion), db, createObjectStore = function (dataBase) { // Crear un objectStore console.log(Creando objectStore) dataBase.createObjectStore(elephants); getImageFile = function () { // Crear; XHR var xhr = nuevo XMLHttpRequest(), blob; xhr.open(GET, elefante.png, true); // Establece el tipo de respuesta en blob xhr.responseType = blob; xhr.addEventListener(load, function () { if (xhr.status === 200) { console.log(Imagen recuperada); // Blob como respuesta blob = xhr.response; console.log(Blob: + blob); // Coloca el blob recibido en IndexedDB putElephantInDb(blob); }, false); // Enviar XHR xhr.send(); }, putElephantInDb = function (blob) { console.log(Poner elefantes en IndexedDB); // Abrir una transacción en la base de datos var transaction = db.transaction([ elefantes], IDBTransaction.READ_WRITE); // Coloca el blob en la dabase var put = transaction.objectStore(elephants).put(blob, image); // Recupera el archivo que se acaba de almacenar transaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile = event.target.result; console.log(¡Tengo elefante! + imgFile); Obtener objeto window.URL var URL = window.URL || window.webkitURL // Crear y revocar ObjectURL var imgURL =; URL.createObjectURL(imgFile); // Establece img src en ObjectURL var imgElephant = document.getElementById(elephant); imgElephant.setAttribute(src, imgURL); // Revocando la solicitud de ObjectURL.revokeObjectURL } }; onerror = function (evento) { console.log(Error al crear/acceder Base de datos IndexedDB); request.onsuccess = function (evento) { console.log (Creación exitosa/acceso a la base de datos IndexedDB); Base de datos IndexedDB); }; // Solución provisional para que Google Chrome cree un objectStore quedará obsoleto if (db.setVersion) { if (db.version). != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { createObjectStore(db); getImageFile(); } // Para uso futuro Actualmente solo en las últimas versiones de Firefox request.onupgradeneeded = función. (evento) { createObjectStore(event.target.resultado };})();

Soporte de API de URL

índiceDb

código fuente de github

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.