Como armazenar dados offline com Ionic Storage

Nessa vídeo aula eu mostro como armazenar dados offline com o Ionic Storage.

 

O que é o Ionic Storage

O Ionic Storage é uma maneira simples de armazenar dados no formato chave/valor seja em um PWA (Progressive Web App) ou em um aplicativo nativo.

No aplicativo nativo será priorizado o uso do SQLite, para isso é necessário instalar o plugin cordova-sqlite-storage, e em um PWA a ordem de utilização será IndexedDB, WebSQL, e localstorage.

 

É possível escolher a ordem de prioridade de utilização de armazenamento. Para isso no arquivo app.module.ts, na propriedade imports basta colocar conforme exemplo abaixo.

 

Criando uma aplicação de exemplo

No vídeo acima e mostro como criar uma app para salvar contatos utilizando o Ionic Storage.

O passo a passo abaixo é o mesmo mostrado no vídeo.

  • Passo 1: Criar o aplicativo.
  • Passo 2: Instalar o Ionic Storage.
  • Passo 3: Configurar o Ionic Storage.
  • Passo 4: Criar o provider para fazer o CRUD.
  • Passo 5: Criar a pagina de inclusão/alteração de contatos.
  • Passo 6: Alterar a pagina Home para listar e excluir os contatos.

 

Passo 1: Criar o aplicativo

 

Passo 2: Instalar o Ionic Storage

 

Passo 3: Configurar o Ionic Storage

A configuração do Ionic Storage fica no arquivo app.module.ts

 

Passo 4: Criar o provider para fazer o CRUD

 

Arquivo contact.ts

 

Passo 5: Criar a pagina de inclusão/alteração de contatos

 

Arquivo edit-contact.ts

 

Arquivo edit-contact.html

 

Passo 6: Alterar a pagina Home para listar e excluir os contatos

Arquivo home.ts

 

Arquivo home.html

 

Clique no botão abaixo para ver o código fonte gerado nessa aula

 

Código fonte gerado na aula

 

Referências

 

Gostou desse artigo? Aproveite e curta e compartilhe para que mais pessoas possam também visualiza-lo!

Ainda ficou alguma dúvida ou tem alguma sugestão? Deixa aí nos comentários!