Пример использования HTML5 IndexDB для хранения изображений и файлов.

На днях мы писали о том, как сохранять изображения и файлы в localStorage, речь шла о доступном нам сегодня прагматизме. Однако localStorage имеет некоторые последствия для производительности — мы обсудим это в следующем блоге — и в будущем желательно использовать IndexedDB. Здесь я покажу вам, как хранить изображения и файлы в IndexedDB, а затем визуализировать их через ObjectURL.

Эта статья переведена, оригинальный текст находится здесь Хранение изображений и файлов в IndexedDB

Об авторе: Роберт Найман [почетный редактор]

Технический евангелист и редактор Mozilla Hacks. Выступает с докладами и ведет блоги о HTML5, JavaScript и открытой сети. Роберт твердо верит в HTML5 и открытую сеть и с 1999 года занимается разработкой интерфейсов для Интернета — в Швеции и в других странах. Нью-Йорк. Он также регулярно ведет блог atrobertnyman.com и любит путешествовать и знакомиться с людьми.

Сначала давайте поговорим о шагах, которые мы предпримем, чтобы создать базу данных IndexedDB, сохранить в ней файл, а затем прочитать его и отобразить на странице:

1. Создайте или откройте базу данных

2. Создайте хранилище объектов

3. Получите файлы изображений в виде больших двоичных объектов.

4. Инициализируйте транзакцию базы данных

5. Сохраните изображение в базе данных.

6. Считайте сохраненный файл, создайте из него ObjectURL и установите его в src элемента изображения на странице.

 // IndexedDBwindow.indexedDB || window.webkitIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.webkitIDBTransaction || window.OIDBTransaction , dbVersion = 1;/* Примечание. Рекомендуемый способ сделать это — назначить его в window.indexedDB, чтобы избежать потенциальных проблем в глобальной области, когда веб-браузеры начинают удалять префиксы в своих реализациях. Вы можете назначить его переменной, например var indexedDB… но тогда вам нужно убедиться, что код содержится внутри. function.*/// Создать/открыть базу данныхvar request = indexedDB.open(elephantFiles, dbVersion);request.onsuccess = function (event) { console.log(Успешное создание/доступ База данных IndexedDB); db = request.result; db.onerror = function (event) { console.log(Ошибка создания/доступа к базе данных IndexedDB); // Временное решение для Google Chrome для создания хранилища объектов, если ( db.setVersion) { if (db.version != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { createObjectStore(db); getImageFile() }; else { getImageFile(); } else { getImageFile() }}// В настоящее время только в последних версиях Firefoxrequest.onupgradeneeded. = функция (событие) { createObjectStore(event.target.result);};

Ожидаемый способ его использования — вызвать событие onupgradeneeded при создании базы данных или получить более высокий номер версии. Эта функция в настоящее время поддерживается только в Firefox, но вскоре будет поддерживаться и в других веб-браузерах. Если ваш веб-браузер не поддерживает это событие, вы можете использовать устаревший метод setVersion и подключиться к его событию onsuccess.

 // Создаем объектStoreconsole.log(Creating objectStore)dataBase.createObjectStore(elephants);

Здесь вы создаете ObjectStore, в котором будете хранить данные — или, в нашем случае, файлы — и после создания вам не нужно его воссоздавать, просто обновляйте его содержимое.

 // Создать XHRvar xhr = new XMLHttpRequest(), blob;xhr.open(GET, Elephant.png, true // Установить тип ответа на blobxhr.responseType = blob; xhr.status === 200) { console.log); (Изображение получено); // Файл как ответный объект = xhr.response; // Поместите получен большой двоичный объект в IndexedDB putElephantInDb(blob }}, false);// Отправить XHRxhr.send();

Этот код напрямую получает содержимое файла в виде большого двоичного объекта. В настоящее время поддерживается только Firefox. После получения всего файла отправьте большой двоичный объект в функцию, чтобы сохранить его в базе данных.

 // Открытие транзакции в базе данныхvar транзакции = db.transaction([elephants], IDBTransaction.READ_WRITE);

Чтобы начать запись в базу данных, вам необходимо запустить транзакцию с именем objectStore и типом операции, которую вы хотите выполнить (в данном случае чтение и запись).

 // Помещаем большой двоичный объект в dabasetransaction.objectStore(elephants).put(blob, image);

Как только транзакция состоится, вы получите ссылку на нужное хранилище объектов, затем поместите в него свой большой двоичный объект и передадите ему ключ.

 // Извлекаем только что сохраненный файлtransaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile = event.target.result; console.log(Got слон! + imgFile); объект window.URL var URL = window.URL || Создание и отзыв ObjectURL var imgURL = URL.createObjectURL(imgFile); // Установите для img src значение ObjectURL var imgElephant = document.getElementById(elephant); imgElephant.setAttribute(src, imgURL); // Отменяем ObjectURL URL.revokeObjectURL(imgURL);};

Используйте ту же транзакцию, чтобы получить только что сохраненный файл изображения, затем создайте URL-адрес объекта и установите его в качестве источника изображения на странице. Например, это также может быть файл JavaScript, прикрепленный к элементу сценария, который затем будет анализировать 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 // Создание/открытие базы данных var; request = indexedDB.open(elephantFiles, dbVersion), db, createObjectStore = function (dataBase) { // Создание хранилища объектов console.log(Creating objectStore) dataBase.createObjectStore(elephants }, getImageFile = function () { // Создание XHR var xhr = новый XMLHttpRequest(), blob xhr.open(GET, слон.png, true); // Устанавливаем тип ответа как blob xhr.responseType = blob; xhr.addEventListener(load, function () { if (xhr.status === 200) { console.log(Изображение получено); // Blob как ответ blob = xhr.response; console.log(Blob: + blob); // Помещаем полученный объект в IndexedDB putElephantInDb(blob); }, false); // Отправляем XHR xhr.send(); }, putElephantInDb = function (blob) { console.log(Помещаем слонов в IndexedDB); // Открываем транзакцию в базе данных var транзакция = db.transaction([ слоны], IDBTransaction.READ_WRITE); // Помещаем большой двоичный объект в базу данных var put = транзакции.objectStore(elephants).put(blob, image); // Извлекаем только что сохраненный файл Получить объект window.URL var URL = window.URL || Создание и отзыв ObjectURL var imgURL = URL.createObjectURL(imgFile); // Установите для img src значение ObjectURL var imgElephant = document.getElementById(elephant); imgElephant.setAttribute(src, imgURL); // Отменяем ObjectURL URL.revokeObjectURL(imgURL); onerror = функция (событие) { console.log(Ошибка создания/доступа База данных IndexedDB); }; request.onsuccess = function (event) { console.log(Успешное создание/доступ к базе данных IndexedDB); db = request.result; db.onerror = функция (событие) { console.log(Ошибка создания/доступа); База данных IndexedDB); } // Временное решение для Google Chrome по созданию objectStore. if (db.setVersion) { if (db.version. != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { createObjectStore(db); getImageFile(); }; else { getImageFile(); } else { getImageFile(); } // Для будущего использования. В настоящее время только в последних версиях Firefox request.onupgradeneeded = function. (событие) { createObjectStore(event.target.result };})();

Поддержка URL-API

indexDb

Исходный код на Гитхабе

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.