Neste estágio, nosso aplicativo gerencia tarefas apenas na memória. Isso significa que toda vez que a página é atualizada, toda a lista de tarefas é perdida.

Para corrigir isso e garantir que as tarefas sejam salvas entre as sessões do usuário, usaremos o Local Storage — um recurso nativo do navegador que permite armazenar pares chave-valor diretamente no navegador do usuário.

O que é Local Storage?

Os dados armazenados no Local Storage não desaparecem quando a página ou o navegador são fechados — permanecem disponíveis mesmo após uma reinicialização completa do navegador.

O LocalStorage armazena apenas dados como strings, portanto, ao trabalhar com objetos ou arrays, é necessário convertê-los usando JSON.stringify() antes de salvar e JSON.parse() ao recuperar.

A seguir estão os principais métodos utilizados para interagir com o Local Storage:

Adicionando Armazenamento Local

Para garantir que nossas tarefas sejam salvas mesmo após recarregar a página, é necessário implementar persistência usando o Local Storage do navegador. Isso significa que você deve ensinar nosso TaskService a salvar tarefas no armazenamento local e a carregá-las novamente quando o aplicativo iniciar.

Salvando Tarefas no Local Storage

Primeiro, é necessário um método que pegue nosso array interno de tarefas e o armazene no Local Storage do navegador.

Veja como fazer isso:

private saveTasks(): void {
  localStorage.setItem('tasks', JSON.stringify(this.tasks));
}

Este método converte o array tasks em uma string JSON usando JSON.stringify. Em seguida, armazena essa string no localStorage sob a chave tasks.

Sempre que uma tarefa for adicionada, excluída ou atualizada, este método será chamado para garantir que nossos dados estejam salvos.

Carregando Tarefas do Local Storage

Em seguida, implementaremos um método que carrega a lista de tarefas do Local Storage quando o serviço é inicializado.

private loadTasks(): Task[] {
  const data = localStorage.getItem('tasks');
  return data ? JSON.parse(data) : [];
}

Este método tenta recuperar um valor do localStorage usando a mesma chave tasks.

Se os dados existirem, ele converte a string JSON de volta para um array TypeScript. Se não houver nada no armazenamento, retorna um array vazio para começar do zero.

Carregando tarefas na inicialização do serviço

Queremos carregar as tarefas existentes assim que o serviço for criado. Para isso, utilizamos o construtor do serviço:

constructor() {
  this.tasks = this.loadTasks();
}

Isso garante que o array de tarefas seja imediatamente preenchido com quaisquer dados salvos anteriormente quando o aplicativo é iniciado.

Versão Final do TaskService

Tudo o que resta é garantir que nossa lista de tarefas seja salva no Local Storage sempre que ocorrer uma alteração. Isso significa que precisamos chamar o método saveTasks ao final dos métodos addTask, deleteTask e toggleTask para manter o Local Storage sincronizado com nossa lista tasks.

Veja como fica o TaskService completo com a funcionalidade de armazenamento local:

Ao implementar saveTasks() e loadTasks() em nosso serviço, permitimos que nosso gerenciador de tarefas persista dados entre sessões. Agora, sempre que o usuário adiciona, conclui ou exclui uma tarefa, essas alterações são armazenadas no navegador e restauradas automaticamente na próxima vez que ele abrir o aplicativo.

Isso proporciona ao nosso aplicativo uma experiência de usuário muito mais profissional e confiável.