LocalStorage Angular: Como Criar um Serviço de Armazenamento Local

Angular

LocalStorage Angular: Como Criar um Serviço de Armazenamento Local

Gabriel Nascimento
Escrito por Gabriel Nascimento em 1 de junho de 2020

Uma aplicação Angular costuma proporcionar uma ótima experiência para o usuário, mas…

Se você a todo momento solicita informações a um banco de dados no servidor, o aplicativo perde sua eficiência.

Afinal um servidor normal fornece os dados solicitados somente depois de alguns segundos.

Uma solução para esse problema é armazenar alguns dados no navegador do usuário. O que reduz o número de chamadas ao servidor…

Para isso vamos criar um serviço Angular de armazenamento local com localStorage.

O que é localStorage?

Casa armazenando vários pacotes

O localStorage faz parte de uma API JavaScript chamada Web Storage. Sendo uma ótima ferramenta para armazenar pares de chave|valor no computador do usuário.

E assim adquirir um acesso rápido a essas informações…

No entanto seu armazenamento é limitado e os dados são mantidos até que o usuário, ou aplicativo web, limpe o cache do navegador.

Por isso você deve tomar certos cuidados como:

  • Não guardar dados sensíveis;
  • Apenas informações públicas ao usuário;
  • E não armazenar grandes quantidades de dados.

Como funciona o localStorage?

Primeiro já podemos acessar o localStorage através de uma instância disponível para nós globalmente.

Assim conseguimos chamar todos os métodos necessários a partir dessa instância.

E você possui 4 métodos básicos para trabalhar com os dados armazenados:

  • setItem() cria um novo par de chave|valor;
  • getItem() recupera um valor a partir da chave;
  • removeItem() remove um par específico;
  • clear() apaga todos os dados gravados;

Veja um exemplo de uso:

localStorage.setItem('name', 'Gabriel');

let name = localStorage.getItem('name'); 
alert(`Hello, ${ name }!`); //Hello, Gabriel!

localStorage.removeItem('name');

localStorage.clear();

E caso você queira se aprofundar mais sobre localStorage, recomendo que veja esse Guia para Iniciantes.

Criando um serviço Angular para LocalStorage

Icone representando um serviço Angular localStorage

Apesar do localStorage funcionar com javascript puro, vale a pena centralizar todo sua lógica em um serviço Angular

Pois facilita futuras alterações e a implementação do tratamento de erros.

Então vamos começar com uma estrutura de serviço básica… 

Para isso você pode executar o comando do Angular CLI:

$ ng generate service local-storage

Desse modo um novo arquivo local-storage.service.ts é criado com o código abaixo:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LocalStorageService { 

  constructor() { }

}

Depois passamos a referência do localStorage a propriedade privada storage da classe… através do método constructor():

export class LocalStorageService { 

  private storage: Storage;

  constructor() { 
    this.storage = window.localStorage;
  }

}

Note que poderíamos acessar direto o window.localStorage. Mas ao usar uma referência, você ganha mais controle dentro do seu serviço Angular.

Criando o primeiro método do serviço Angular LocalStorage

Agora vamos criar um método set() para encapsular a função localStorage.setItem().

Sendo que o método set() deve receber o par chave|valor e repassar ao setItem():

set(key: string, value: string) {
  this.storage.setItem(key, value);
}

Porém o localStorage apenas armazena strings

Então caso você queira guardar um objeto complexo, primeiro deverá converter esse objeto em string.

Para isso podemos usar:

  • JSON.stringify() antes de passar o valor ao setItem();
  • E JSON.parse() para ler o objeto depois.
set(key: string, value: any) {
  this.storage.setItem(key, JSON.stringify(value));
}

Mas essa não é a única alteração que devemos realizar…

Porque apesar dos navegadores modernos suportarem o localStorage, algumas versões antigas não apresentam esse recurso.

Portanto você deve sempre testar se o navegador suporta o localStorage antes de usar:

set(key: string, value: any): boolean {
  if (this.storage) {
    this.storage.setItem(key, JSON.stringify(value));
    return true;
  }
  return false;
}

E caso o teste de negativo, você pode tratar o erro como:

  • Ter outra alternativa de armazenamento (por exemplo, cookies);
  • Ou apenas retornar false;

Mais funcionalidades ao serviço Angular LocalStorage

Carrinho armazenando pacotes em um local

Se você deseja criar um verdadeiro serviço Angular para localStorage, precisa implementar os métodos básicos de manipulação como: get(), remove() e clear();

Sendo que todos eles seguem os mesmos conceitos abordados no método set():

  • Encapsular o método do localStorage;
  • Apenas trabalhar com strings;
  • E verificar o suporte do navegador.

Agora veja como fica o código completo do serviço Angular:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LocalStorageService {

  private storage: Storage;

  constructor() {
    this.storage = window.localStorage;
  }

  set(key: string, value: any): boolean {
    if (this.storage) {
      this.storage.setItem(key, JSON.stringify(value));
      return true;
    }
    return false;
  }

  get(key: string): any {
    if (this.storage) {
      return JSON.parse(this.storage.getItem(key));
    }
    return null;
  }

  remove(key: string): boolean {
    if (this.storage) {
      this.storage.removeItem(key);
      return true;
    }
    return false;
  }

  clear(): boolean {
    if (this.storage) {
      this.storage.clear();
      return true;
    }
    return false;
  }

}

Parabéns por ter chegado até aqui!

Esse não foi uma artigo fácil…

Afinal configurar um serviço Angular pode ser simples, mas saber o que fazer com ele… nem tanto.

Por isso acredito que o serviço localStorage será um recurso valioso no seu Arsenal de Programador.

Particularmente utilizo ele na maioria das minhas aplicações para:

  • Armazenar tokens de autenticação;
  • Guardar configurações de interface;
  • E reduzir o número de requisições ao servidor.

Então analise em que situação você se encontra e use sua criatividade!

E se você gostou desse artigo, ou tem alguma dúvida, não esqueça de deixar nos comentários abaixo:

Hey,

o que você achou deste conteúdo? Conte nos comentários.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

One Reply to “LocalStorage Angular: Como Criar um Serviço de Armazenamento Local”