Beispiel für die Verwendung von HTML5 IndexDB zum Speichern von Bildern und Dateien

Als wir neulich darüber geschrieben haben, wie man Bilder und Dateien in localStorage speichert, ging es um den Pragmatismus, der uns heute zur Verfügung steht. Allerdings hat localStorage einige Auswirkungen auf die Leistung – wir werden dies in einem späteren Blog besprechen – und der gewünschte Ansatz für die Zukunft ist die Verwendung von IndexedDB. Hier zeige ich Ihnen, wie Sie Bilder und Dateien in IndexedDB speichern und sie dann über ObjectURL rendern.

Dieser Artikel wurde übersetzt, der Originaltext ist hier. Bilder und Dateien in IndexedDB speichern

Über den Autor: Robert Nyman [Emeritierter Herausgeber]

Technischer Evangelist und Herausgeber von Mozilla Hacks. Hält Vorträge und Blogs über HTML5, JavaScript und das Open Web und arbeitet seit 1999 mit der Front-End-Entwicklung für das Web – in Schweden und im Ausland New York City. Er bloggt außerdem regelmäßig auf atrobertnyman.com und liebt es zu reisen und Leute kennenzulernen.

Lassen Sie uns zunächst über die Schritte sprechen, die wir unternehmen werden, um eine IndexedDB-Datenbank zu erstellen, die Datei darin zu speichern und sie dann auszulesen und auf der Seite anzuzeigen:

1. Erstellen oder öffnen Sie eine Datenbank

2. Erstellen Sie einen Objektspeicher

3. Bilddateien als Blobs abrufen

4. Initialisieren Sie eine Datenbanktransaktion

5. Speichern Sie den Bild-Blob in der Datenbank

6. Lesen Sie die gespeicherte Datei aus, erstellen Sie daraus eine ObjectURL und setzen Sie diese auf den Quellcode des Bildelements auf der Seite

 // IndexedDBwindow.indexedDB ||. window.mozIndexedDB ||. window.oIDBTransaction || , dbVersion = 1;/* Hinweis: Die empfohlene Methode hierfür ist die Zuweisung es zu window.indexedDB, um potenzielle Probleme im globalen Bereich zu vermeiden, wenn Webbrowser beginnen, Präfixe in ihren Implementierungen zu entfernen. Sie können es einer Variablen zuweisen, wie var indexedDB…, aber dann müssen Sie sicherstellen, dass der Code in a enthalten ist function.*/// Datenbank erstellen/öffnenvar request = indexedDB.open(elephantFiles, dbVersion);request.onsuccess = function (event) { console.log(Erfolgreiche Erstellung/Zugriff IndexedDB-Datenbank); db = request.result; db.onerror = function (event) { console.log(Fehler beim Erstellen/Zugriff auf die IndexedDB-Datenbank }; db.setVersion) { if (db.version != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { createObjectStore(); else { getImageFile( }}// Derzeit nur in den neuesten Firefox-Versionen = function (event) { createObjectStore(event.target.result);};

Die erwartete Verwendungsweise besteht darin, beim Erstellen der Datenbank das Ereignis onupgradeneeded auszulösen oder eine höhere Versionsnummer zu erhalten. Diese Funktion wird derzeit nur in Firefox unterstützt, wird aber bald auch in anderen Webbrowsern unterstützt. Wenn Ihr Webbrowser dieses Ereignis nicht unterstützt, können Sie die veraltete setVersion-Methode verwenden und eine Verbindung zu ihrem onsuccess-Ereignis herstellen.

 // Erstelle einen objectStoreconsole.log(Creating objectStore)dataBase.createObjectStore(elephants);

Hier erstellen Sie einen ObjectStore, in dem Sie Daten – oder in unserem Fall Dateien – speichern. Nach der Erstellung müssen Sie ihn nicht mehr neu erstellen, sondern nur seinen Inhalt aktualisieren.

 // XHRvar erstellen xhr = new XMLHttpRequest(), blob;xhr.open(GET, Elephant.png, true); // Antworttyp auf blobxhr.responseType = blob;xhr.addEventListener(load, function () { if ( xhr.status === 200) { console.log(Bild abgerufen); // Datei als Antwort blob = xhr.response; Blob in IndexedDB empfangen putElephantInDb(blob); }}, false);// Send XHRxhr.send();

Dieser Code ruft den Inhalt der Datei direkt als Blob ab. Derzeit wird nur Firefox unterstützt. Nachdem Sie die gesamte Datei empfangen haben, senden Sie das Blob an die Funktion, um es in der Datenbank zu speichern.

 // Öffnen Sie eine Transaktion für die Datenbankvariable Transaction = db.transaction([elephants], IDBTransaction.READ_WRITE);

Um mit dem Schreiben in die Datenbank zu beginnen, müssen Sie eine Transaktion mit dem Namen des Objektspeichers und der Art der Operation starten, die Sie ausführen möchten (in diesem Fall Lesen und Schreiben).

 // Den Blob in den dabasetransaction.objectStore(elephants).put(blob, image) einfügen;

Sobald die Transaktion erfolgt ist, erhalten Sie einen Verweis auf den gewünschten Objektspeicher, platzieren dann Ihren Blob darin und geben ihm den Schlüssel.

 // Die gerade gespeicherte Datei abrufentransaction.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; // ObjectURL erstellen und widerrufen var imgURL = URL.createObjectURL(imgFile); // img src auf ObjectURL setzen var imgElephant = document.getElementById(elephant); imgElephant.setAttribute(src, imgURL);}

Verwenden Sie dieselbe Transaktion, um die gerade gespeicherte Bilddatei abzurufen, erstellen Sie dann eine Objekt-URL und setzen Sie sie auf den Quellcode des Bilds auf der Seite. Dies könnte beispielsweise auch eine an ein Skriptelement angehängte JavaScript-Datei sein, die dann das JavaScript analysiert.

 (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; // Datenbankvariable erstellen/öffnen request = indexedDB.open(elephantFiles, dbVersion), db, createObjectStore = function (dataBase) { // Einen ObjectStore erstellen console.log(Creating objectStore) dataBase.createObjectStore(elephants); }, getImageFile = function () { // Erstellen XHR var xhr = new XMLHttpRequest(), xhr.open(GET,elefant.png; true); // Den ResponseType auf Blob setzen xhr.responseType = blob; blob = xhr.response; console.log(Blob: + blob); // Den empfangenen Blob in IndexedDB einfügen; }, false); // Sende XHR xhr.send(); }, putElephantInDb = function (blob) { console.log(Putting Elephants in IndexedDB); Elefanten], IDBTransaction.READ_WRITE); // Den Blob in die Datenbank einfügen var put = transaktion.objectStore(elephants).put(blob, image); // Rufen Sie die gerade gespeicherte Datei ab transaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile = event.target.result; Holen Sie sich window.URL-Objekt var URL = window.URL || window.webkitURL; // ObjectURL erstellen und widerrufen var imgURL = URL.createObjectURL(imgFile); // Img src auf ObjectURL setzen var imgElephant = document.getElementById(elephant); // ObjectURL URL.revokeObjectURL(imgURL); onerror = function (event) { console.log(Fehler beim Erstellen/Zugriff IndexedDB-Datenbank); IndexedDB-Datenbank); }; // Zwischenlösung für Google Chrome zum Erstellen eines Objektspeichers Wird veraltet sein, wenn (db.setVersion) { if (db.version != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { getImageFile(} }; } // Für zukünftige Verwendung. Derzeit nur in den neuesten Firefox-Versionen request.onupgradeneeded = Funktion (event) { createObjectStore(event.target.result};})();

URL-API-Unterstützung

indexDb

Github-Quellcode

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.