Exemplo de uso do HTML5 IndexDB para armazenar imagens e arquivos

Outro dia escrevemos sobre como salvar imagens e arquivos no localStorage, era sobre o pragmatismo que temos hoje. No entanto, localStorage tem algumas implicações de desempenho - discutiremos isso em um blog posterior - e a abordagem desejada no futuro é usar o IndexedDB. Aqui vou mostrar como armazenar imagens e arquivos no IndexedDB e depois renderizá-los via ObjectURL.

Este artigo está traduzido, o texto original está aqui Armazenando imagens e arquivos no IndexedDB

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

Evangelista Técnico e Editor do Mozilla Hacks Dá palestras e blogs sobre HTML5, JavaScript e Web Aberta. Robert acredita fortemente em HTML5 e na Web Aberta e trabalha desde 1999 com desenvolvimento Front End para a web - na Suécia e na Suécia. Cidade de Nova York. Ele também bloga regularmente em atrobertnyman.com e adora viajar e conhecer pessoas.

Primeiro, vamos falar sobre as etapas que seguiremos para criar um banco de dados IndexedDB, salvar o arquivo nele e depois lê-lo e exibi-lo na página:

1. Crie ou abra um banco de dados

2. Crie um objectStore

3. Recupere arquivos de imagem como blobs

4. Inicialize uma transação de banco de dados

5. Salve o blob de imagem no banco de dados

6. Leia o arquivo salvo e crie um ObjectURL a partir dele e defina-o como o src do elemento de imagem na página

 // IndexedDBwindow.indexedDB = window.indexedDB || window.webkitIndexedDB || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction || , dbVersion = 1;/* Nota: A maneira recomendada de fazer isso é atribuindo para window.indexedDB, para evitar possíveis problemas no escopo global quando os navegadores da web começarem a remover prefixos em suas implementações. Você pode atribuí-lo a uma variável, como var indexedDB… mas então você deve ter certeza de que o código está contido em um. function.*/// Criar/abrir databasevar request = indexedDB.open(elephantFiles, dbVersion);request.onsuccess = function (event) { console.log(Sucesso na criação/acesso Banco de dados IndexedDB); db = request.result; db.onerror = function (event) { console.log(Erro ao criar/acessar banco de dados IndexedDB }); db.setVersion) { if (db.versão! = dbVersion) { var setVersion = db.setVersion (dbVersion); setVersion.onsuccess = function () { createObjectStore(db); = função (evento) { createObjectStore(event.target.result);};

A maneira esperada de usá-lo é disparar o evento onupgradeneeded ao criar o banco de dados ou obter um número de versão superior. Atualmente, esse recurso é compatível apenas com o Firefox, mas em breve será compatível com outros navegadores. Se o seu navegador da web não suportar este evento, você poderá usar o método setVersion obsoleto e conectar-se ao seu evento onsuccess.

 // Cria um objectStoreconsole.log(Criando objectStore)dataBase.createObjectStore(elephants);

Aqui, você cria um ObjectStore onde irá armazenar dados - ou no nosso caso, arquivos - e uma vez criado, não precisa recriá-lo, apenas atualizar seu conteúdo.

 // Cria XHRvar xhr = new XMLHttpRequest(), blob;xhr.open(GET, elefante.png, true // Defina o responseType como blobxhr.responseType = blob; (Imagem recuperada); // Arquivo como resposta blob = xhr.response; blob recebido em IndexedDB putElephantInDb(blob }}, false);// Send XHRxhr.send();

Este código obtém diretamente o conteúdo do arquivo como um blob. Atualmente apenas o Firefox é compatível. Após receber o arquivo inteiro, envie o blob para a função armazená-lo no banco de dados.

 // Abre uma transação no banco de dadosvar transaction = db.transaction([elephants], IDBTransaction.READ_WRITE);

Para começar a escrever no banco de dados, você precisa iniciar uma transação com o nome do objectStore e o tipo de operação que deseja realizar (neste caso, leitura e escrita).

 // Coloque o blob em dabasetransaction.objectStore(elephants).put(blob, image);

Assim que a transação estiver concluída, você obtém uma referência ao objectStore desejado, coloca seu blob nele e fornece a chave.

 // Recupera o arquivo que acabou de ser armazenadotransaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile = event.target.result; window.URL objeto var URL = window.URL || window.webkitURL; // Criar e revogar ObjectURL var imgURL = URL.createObjectURL(imgFile); // Definir img src para ObjectURL var imgElephant = document.getElementById(elephant); imgElephant.setAttribute(src, imgURL);

Use a mesma transação para obter o arquivo de imagem que você acabou de armazenar, crie um objectURL e defina-o como o src da imagem na página. Por exemplo, também pode ser um arquivo JavaScript anexado a um elemento de script, que analisará o 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; // Criar/abrir banco de dados var; request = indexedDB.open(elephantFiles, dbVersion), db, createObjectStore = function (dataBase) { // Criar um objectStore console.log(Criando objectStore) dataBase.createObjectStore(elephants }, getImageFile = function () { // Criar XHR var xhr = new XMLHttpRequest(), blob; true); // Defina o responseType como blob xhr.responseType = blob; xhr.addEventListener(load, function () { if (xhr.status === 200) { console.log(Image retrieved); // Blob como resposta blob = xhr.response; console.log(Blob: + blob); // Coloca o blob recebido em IndexedDB putElephantInDb(blob); }, false); // Envia XHR xhr.send() }, putElephantInDb = function (blob) { console.log(Colocando elefantes em IndexedDB); elefantes], IDBTransaction.READ_WRITE); // Coloque o blob no banco de dados var put = transaction.objectStore(elephants).put(blob, image); // Recupera o arquivo que acabou de ser armazenado transaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile = event.target.result; Obter objeto window.URL var URL = window.URL || window.webkitURL; // Criar e revogar ObjectURL var imgURL = URL.createObjectURL(imgFile); // Definir img src para ObjectURL var imgElephant = document.getElementById(elephant); imgElephant.setAttribute(src, imgURL); onerror = function (event) { console.log(Erro ao criar/acessar Banco de dados IndexedDB); Banco de dados IndexedDB); // Solução provisória para o Google Chrome para criar um objectStore será descontinuada if (db.setVersion) { if (db.version. != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { getImageFile() }; } // Para uso futuro. Atualmente apenas nas versões mais recentes do Firefox request.onupgradeneeded = function. (evento) { createObjectStore(event.target.result };})();

Suporte para API de URL

indexDb

Código-fonte do Github

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.