Série Dicas Basiquinhas— Trabalhando com IndexedDB

O que é o IndexedDB

O IndexedDB é uma api que permite você armazenar dados localmente no navegador do usuário. Com a mesma você pode criar aplicativos que podem ser usados offline, cache e etc.

Trabalhando com IndexedDB

Fala galera,  hoje vou dar uma dica básica porém pode ajudar muitas pessoas. Antes de qualquer coisa, vou te mostrar apenas o básico e você pode adaptar para sua realidade e melhores práticas.

via GIPHY

Primeiro vamos criar um html simples.
Exemplo:

Como você viu, acabei de criar um html com dois campos para nome e idade, adicionei uma tag script com uma classe Customer que vamos usar mais abaixo.

Agora vamos criar a conexão com o indexedDB logo abaixo da classe customer que criamos acima.

Exemplo:

Nesse codigo eu estou criando a conexão e adicionando eventos aos botões adicionados na tela. O método onupgradeneeded só é executado quando é criado o banco ou há alguma alteração na versão.

Agora vamos criar as funções para listar a adicionar abaixo  do código da conexão.

Exemplo:

Nesse código do addCustomer estou abrindo uma transação e depois pegando a minha store customers para adicicionar o customer e saber se foi sucesso ou não. No listAllCustomers a diferença é que tem um cursor que vai trazer 1 a 1 então é necessario percorrer para preencher o meu array customers.

Segue o código full:

Conclusão
Galerinha é muito simples e você pode abstrair essa implementação e trabalhar da melhor forma com herança e classe static. Apenas passei um inicio rsrs para você brincar 🙂

Abraço galera espero que tenha sido útil e acompanhe os próximos artigos da série que logo será publicado.
Fuuuuui!!!

Sobre min

Sou Desenvolvedor e DevOps, curto muito todo o mundo do desenvolvimento de software e amo palestrar sobre.

Contatos

Celular: (11) 95063-4443
E-mail: [email protected]

FALE COMIGO

Fale Comigo

Vamos nos conhecer e trocar uma ideia, estou disponível para network 🙂
VAMOS CONVERSAR
2020-02-25T22:01:58+00:00

Um Comentário

  1. BrianJOUNK 26 de março de 2020 em 07:47 - Responder

    Appreciate it for sharing your fantastic webpage.

Deixar Um Comentário Cancelar resposta