Exemple d'utilisation de HTML5 IndexDB pour stocker des images et des fichiers

L'autre jour, nous avons écrit sur la façon de sauvegarder des images et des fichiers dans localStorage, il s'agissait du pragmatisme dont nous disposons aujourd'hui. Cependant, localStorage a certaines implications en termes de performances - nous en discuterons dans un prochain blog - et l'approche souhaitée à l'avenir consiste à utiliser IndexedDB. Ici, je vais vous montrer comment stocker des images et des fichiers dans IndexedDB, puis les restituer via ObjectURL.

Cet article est traduit, le texte original est ici Stockage d'images et de fichiers dans IndexedDB

À propos de l'auteur : Robert Nyman [éditeur émérite]

Évangéliste technique et éditeur de Mozilla Hacks. Donne des conférences et des blogs sur HTML5, JavaScript et le Web ouvert. Robert croit fermement au HTML5 et au Web ouvert et travaille depuis 1999 dans le développement Front End pour le Web - en Suède et en Suède. La ville de New York. Il blogue également régulièrement sur atrobertnyman.com et adore voyager et rencontrer des gens.

Tout d'abord, parlons des étapes que nous allons suivre pour créer une base de données IndexedDB, y enregistrer le fichier, puis le lire et l'afficher dans la page :

1. Créez ou ouvrez une base de données

2. Créez un objectStore

3. Récupérer des fichiers image sous forme de blobs

4. Initialiser une transaction de base de données

5. Enregistrez l'objet blob d'image dans la base de données

6. Lisez le fichier enregistré, créez un ObjectURL à partir de celui-ci et définissez-le sur le src de l'élément image dans la page.

 // IndexedDBwindow.indexedDB = window.indexedDB || window.webkitIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.webkitIDBTransaction || , dbVersion = 1;/* Remarque : La méthode recommandée pour procéder consiste à attribuer à window.indexedDB, pour éviter des problèmes potentiels dans la portée globale lorsque les navigateurs Web commencent à supprimer les préfixes dans leurs implémentations. Vous pouvez l'attribuer à une variable, comme var indexedDB… mais vous devez ensuite vous assurer que le code est contenu dans un. function.*/// Créer/ouvrir une base de donnéesvar request = indexedDB.open(elephantFiles, dbVersion);request.onsuccess = function (event) { console.log(Succès de création/d'accès Base de données IndexedDB ); db = request.result ; db.onerror = function (event) { console.log (Erreur lors de la création/de l'accès à la base de données IndexedDB ); // Solution provisoire pour que Google Chrome crée un objectStore ; db.setVersion) { if (db.version != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { createObjectStore(db); getImageFile(); } else { getImageFile(); } } else { getImageFile();// Actuellement uniquement dans les dernières versions de Firefoxrequest.onupgradeneed. = function (événement) { createObjectStore(event.target.result);};

La manière attendue de l'utiliser est de déclencher l'événement onupgradeneeded lors de la création de la base de données ou d'obtenir un numéro de version plus élevé. Cette fonctionnalité n'est actuellement prise en charge que dans Firefox, mais le sera bientôt dans d'autres navigateurs Web. Si votre navigateur Web ne prend pas en charge cet événement, vous pouvez utiliser la méthode obsolète setVersion et vous connecter à son événement onsuccess.

 // Créer un objectStoreconsole.log(Creating objectStore)dataBase.createObjectStore(elephants);

Ici, vous créez un ObjectStore dans lequel vous stockerez des données - ou dans notre cas, des fichiers - et une fois créé, vous n'avez pas besoin de le recréer, il suffit de mettre à jour son contenu.

 // Créez XHRvar xhr = new XMLHttpRequest(), blob;xhr.open(GET, elephant.png, true); // Définissez le type de réponse sur blobxhr.responseType = blob;xhr.addEventListener(load, function () { if ( xhr.status === 200) { console.log(Image récupérée); // Fichier en tant que réponse blob = xhr.response; blob reçu dans IndexedDB putElephantInDb(blob); }}, false);// Envoyer XHRxhr.send();

Ce code récupère directement le contenu du fichier sous forme de blob. Actuellement, seul Firefox est pris en charge. Après avoir reçu l'intégralité du fichier, envoyez le blob à la fonction pour le stocker dans la base de données.

 // Ouvrir une transaction dans la base de donnéesvar transaction = db.transaction([elephants], IDBTransaction.READ_WRITE);

Pour commencer à écrire dans la base de données, vous devez démarrer une transaction avec le nom objectStore et le type d'opération que vous souhaitez effectuer (dans ce cas, lire et écrire).

 // Place le blob dans le dabasetransaction.objectStore(elephants).put(blob, image);

Une fois la transaction en place, vous obtenez une référence au objectStore souhaité, puis placez-y votre blob et donnez-lui la clé.

 // Récupère le fichier qui vient d'être stockétransaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile = event.target.result; console.log(Got elephant! + imgFile); window.URL object var URL = window.URL || window.webkitURL; // Créer et révoquer ObjectURL var imgURL = URL.createObjectURL(imgFile); // Définir img src sur ObjectURL var imgElephant = document.getElementById(elephant); imgElephant.setAttribute(src, imgURL); // Révocation de ObjectURL URL.revokeObjectURL(imgURL);};

Utilisez la même transaction pour obtenir le fichier image que vous venez de stocker, puis créez une objectURL et définissez-la sur le src de l'image dans la page. Par exemple, il peut également s'agir d'un fichier JavaScript attaché à un élément de script, qui analysera ensuite le JavaScript.

 (function () { // 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; // Créer/ouvrir une variable de base de données request = indexedDB.open(elephantFiles, dbVersion), db, createObjectStore = function (dataBase) { // Créer un objectStore console.log (Création d'objectStore) dataBase.createObjectStore(elephants }, getImageFile = function () { // Créer XHR var xhr = new XMLHttpRequest(), blob; xhr.open(GET, éléphant.png, true); // Définit le type de réponse sur blob xhr.responseType = blob; xhr.addEventListener(load, function () { if (xhr.status === 200) { console.log(Image récupérée); // Blob comme réponse blob = xhr.response; console.log(Blob: + blob); // Placer le blob reçu dans IndexedDB putElephantInDb(blob); }, false); // Envoyer XHR xhr.send(); }, putElephantInDb = function (blob) { console.log(Mettre les éléphants dans IndexedDB); // Ouvrir une transaction dans la base de données var transaction = db.transaction([ éléphants], IDBTransaction.READ_WRITE); // Mettez le blob dans la base de données var put = transaction.objectStore(elephants).put(blob, image); // Récupère le fichier qui vient d'être stocké transaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile = event.target.result; console.log(Got elephant! + imgFile); Obtenir l'objet window.URL var URL = window.URL || window.webkitURL; // Créer et révoquer ObjectURL var imgURL = URL.createObjectURL(imgFile); // Définir img src sur ObjectURL var imgElephant = document.getElementById(elephant); imgElephant.setAttribute(src, imgURL); // Révocation de la requête ObjectURL.revokeObjectURL }; onerror = function (event) { console.log (Erreur de création/d'accès Base de données IndexedDB ); } ; request.onsuccess = function (événement) { console.log (Succès de création/accès à la base de données IndexedDB) ; db = request.result = function (événement) { console.log (Erreur de création/d'accès) Base de données IndexedDB); } ; // Solution provisoire permettant à Google Chrome de créer un objectStore. Sera obsolète if (db.setVersion) { if (db.version. != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { getImageFile(); } // Pour une utilisation future Actuellement uniquement dans les dernières versions de Firefox request.onupgradeneeded = function. (événement) { createObjectStore(event.target.result };})();

Prise en charge de l'API d'URL

indexDb

Code source de GitHub

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.