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

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?

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

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

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: