Como criar um banco de dados local no seu projeto front-end?

Se você já fez um projeto que carecesse de um banco de dados local, com certeza muitos de vocês usaram o Local Storage para fazer isso.

Mas, se eu te disser que existe um forma melhor para fazer isso?

IndexedDB

O IndexedDB é uma API que serve para armazenar quantias significativas de dados do usuário no front-end e por isso não vamos usar essa API, não diretamente. Para criar um CRUD com IndexedDB você vai ter que criar um código muito complexo e estamos buscando praticidade agora, mesmo assim eu quero que você leia a documentação do IndexedDB para você entender como essa API funciona e para dá o devido valor a abstração que eu vou te mostrar agora.

Dexie.js

O Dexie.js é uma biblioteca JavaScript que serve para criar um banco de dados local, essa biblioteca usa o IndexedDB por baixo dos panos e ela vai facilitar muito o nosso trabalho.

CRUD com Dexie.js

Para começar vamos instalar o Dexie.js no nosso projeto.

npm i dexie

Com o Dexie.js devidamente instalado vamos criar um arquivo JavaScript para gerenciar o nosso banco de dados, vou chamar esse arquivo de database.js.

No database.js vamos importar a classe Dexie.

import Dexie from 'dexie'

Agora vamos criar um banco de dados.

const database = new Dexie('myDatabase')

Agora vamos configurar uma store.

database.version(1).stores({
    users: 'id++, name, lastname'
})

Se você não sabe o que é uma version ou store é sinal que não estudou a documentação do IndexedDB. -.-

E antes de prosseguir quero lembrar a vocês, leiam a documentação do IndexedDB e Dexie.js, é isso.

Agora vamos criar uma classe para mexer no banco de dados.

export default class Database {}

Eu particularmente gosto de fazer dessa maneira.

E agora eu vou criar todas as funções do CRUD, bem, isso não é tutorial, está mais para um dica e por isso não vou explicar detalhadamente o que cada função faz.

export default class Database {

    create(object) {
        database.users.add(object)
    }

    async read(id) {
        return await database.users.get(id)
    }

    update(id, object) {
        database.users.update(id, object)
    }

    delete(id) {
        database.users.delete(id)
    }

}

Código final:

import Dexie from 'dexie'

const database = new Dexie('myDatabase')

database.version(1).stores({
    users: 'id++, name, lastname'
})

export default class Database {

    create(object) {
        database.users.add(object)
    }

    async read(id) {
        return await database.users.get(id)
    }

    update(id, object) {
        database.users.update(id, object)
    }

    delete(id) {
        database.users.delete(id)
    }

}

Olha como o código final ficou muito pequeno, eu não testei se esse código funciona, eu criei ele baseado em um projeto que usa Dexie.js. :p

Conclusão

Se quiser criar um banco de dados local, cogite usar o Dexie.js e nunca se esqueça de ler a documentação, nunca.