Um tutorial sobre como usar armazenamento do lado do cliente em aplicativos da Web

Ao criar aplicativos web modernos, especialmente aplicativos web progressivos (PWAs), é crucial ter uma maneira de armazenar dados offline. IndexedDB é um poderoso banco de dados do lado do cliente que permite que aplicativos da web armazenem e recuperem dados, mesmo quando o usuário está offline. Este guia orientará você nos fundamentos do IndexedDB, mostrando como criar, ler, atualizar e excluir dados (operações CRUD) em seu aplicativo da web.

O que é IndexedDB?

IndexedDB é uma API de baixo nível para armazenamento no lado do cliente de grandes quantidades de dados estruturados, incluindo arquivos e blobs. Ao contrário do localStorage, o IndexedDB permite armazenar tipos de dados complexos, não apenas strings. Ele usa um modelo de banco de dados transacional assíncrono, o que o torna poderoso para aplicativos que precisam lidar com grandes conjuntos de dados ou sincronização de dados offline.

Por que usar IndexedDB?

• Recursos off-line: Ideal para Progressive Web Apps (PWAs) e aplicativos off-line.
• Capacidade de armazenamento: IndexedDB pode armazenar muito mais dados em comparação com localStorage (que é limitado a cerca de 5-10 MB).
• Flexibilidade: Armazene objetos complexos como arrays, objetos e até mesmo blobs.
• Assíncrono: As operações não bloqueiam o thread de IU, o que significa que seu aplicativo permanece responsivo.

Primeiros passos: configurando o IndexedDB

Vamos mergulhar nas etapas principais para trabalhar com IndexedDB. Cobriremos:

• Criando ou abrindo um banco de dados
• Criando armazenamentos de objetos (tabelas)
• Adicionando dados
• Leitura de dados
• Atualizando dados
• Excluindo dados

Etapa 1: abrindo um banco de dados

Para interagir com o IndexedDB, primeiro você precisa abrir uma conexão com o banco de dados. Se o banco de dados não existir, ele será criado.

const request = indexedDB.open('MyCustomersDatabase', 1);

request.onerror = (event) => {
    console.error('Database error:', event.target.errorCode);
};

request.onsuccess = (event) => {
    const db = event.target.result;
    console.log('Database opened successfully', db);
};

request.onupgradeneeded = (event) => {
    const db = event.target.result;
    if (!db.objectStoreNames.contains('customers')) {
        const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { unique: true });
        console.log('Object store created.');
    }
};

Aqui está o que está acontecendo:

• indexedDB.open abre ou cria o banco de dados.
• onerror trata quaisquer erros ao abrir o banco de dados.
• onsuccess é acionado quando a conexão com o banco de dados é aberta com sucesso.
• onupgradeneeded é acionado quando o banco de dados precisa ser atualizado (por exemplo, se esta for a primeira vez que o banco de dados é aberto ou se a versão for alterada). É onde você define seus armazenamentos de objetos (pense neles como tabelas em SQL).

Etapa 2: Adicionando dados ao IndexedDB

Agora que configuramos nosso banco de dados e armazenamento de objetos, vamos adicionar alguns dados a eles.

const addCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.add(customer);

    request.onsuccess = () => {
        console.log('Customer added:', customer);
    };

    request.onerror = (event) => {
        console.error('Error adding customer:', event.target.errorCode);
    };
}

const customer = { id: 1, name: 'John Doe', email: '[email protected]' };

request.onsuccess = (event) => {
    const db = event.target.result;
    addCustomer(db, customer);
};

Aqui está o que está acontecendo:

• Criamos uma transação com acesso de 'leitura e gravação' para permitir modificações.
• O método add() é usado para inserir dados no armazenamento de objetos.
• Nós escutamos eventos de sucesso e erro para confirmar se os dados foram adicionados com sucesso.

Etapa 3: Lendo dados do IndexedDB

A leitura de dados do IndexedDB também é simples. Vamos recuperar o cliente que acabamos de adicionar usando o método get().

const getCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readonly');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.get(id);

    request.onsuccess = (event) => {
        const customer = event.target.result;
        if (customer) {
            console.log('Customer found:', customer);
        } else {
            console.log('Customer not found.');
        }
    };

    request.onerror = (event) => {
        console.error('Error fetching customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    getCustomer(db, 1); // Fetch customer with ID 1
};

Etapa 4: atualização de dados no IndexedDB

Para atualizar um registro existente, podemos usar o método put(), que funciona de forma semelhante a add(), mas substitui o registro se a chave já existir.

const updateCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.put(customer);

    request.onsuccess = () => {
        console.log('Customer updated:', customer);
    };

    request.onerror = (event) => {
        console.error('Error updating customer:', event.target.errorCode);
    };
}

const updatedCustomer = { id: 1, name: 'Jane Doe', email: '[email protected]' };

request.onsuccess = (event) => {
    const db = event.target.result;
    updateCustomer(db, updatedCustomer);
};

Etapa 5: Excluindo dados do IndexedDB

Finalmente, para excluir um registro, use o método delete().

const deleteCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.delete(id);

    request.onsuccess = () => {
        console.log('Customer deleted.');
    };

    request.onerror = (event) => {
        console.error('Error deleting customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    deleteCustomer(db, 1); // Delete customer with ID 1
};

Conclusão

IndexedDB é uma solução robusta para lidar com armazenamento de dados do lado do cliente, especialmente em aplicativos da web offline. Seguindo este guia, você aprendeu como:

• Abra e crie um banco de dados
• Criar armazenamentos de objetos
• Adicionar, ler, atualizar e excluir dados

Com o IndexedDB, você pode criar aplicativos da web mais resilientes que armazenam dados localmente e funcionam mesmo sem uma conexão com a Internet.

Referências:

1. MDN Web Docs - API IndexedDB
   
   Um guia completo sobre como o IndexedDB funciona, seus métodos de API e casos de uso.
   
   Guia de banco de dados indexado MDN

2. Google Developers - IndexedDB
   
   Um artigo detalhado que aborda as práticas recomendadas e o uso do IndexedDB para criar aplicativos da web com capacidade off-line.
   
   Desenvolvedores do Google - IndexedDB

3. API de banco de dados indexado W3C
   
   A especificação oficial do W3C descrevendo a implementação técnica e estrutura do IndexedDB.
   
   Especificação de banco de dados indexado W3C

Esses recursos fornecerão profundidade e contexto adicionais se você quiser explorar mais sobre o IndexedDB além deste tutorial!

Boa codificação!