Existem bibliotecas que você pode usar que oferecem uma grande variedade de métodos genéricos e robustos para gerenciar os dados no armazenamento local. Aqui iremos implementar uma solução simples.
localStorage
a qual está exposta para nós globalmente. Isso significa que podemos chamar todos os métodos disponíveis nessa interface simplesmente usando essa instância.getItem
e setItem
.clear
. Ele é usado para limpar o armazenamento local de dados:storage
:storage.service.ts
, deve ser criado com o código abaixo:app.module.ts
e na lista de providers
adicione a nova classe:JSON.parse
? A resposta é simples: Conforme descrito anteriormente nesse tutorial, o armazenamento local memoriza os dados em uma forma de chave-valor, isso significa que os valores são armazenados como strings. Então, se quisermos ter um objeto real (ou lista) para tratar, devemos converter a string em um objeto JavaScript válido.ToDoListService
.Como mencionado anteriormente, este serviço poder ter uma API mais ampla com métodos mais robustos. Quando se escreve um serviço para acessar um banco de dados, existe outros métodos para adicionar, modificar e excluir itens especifícos.
TodoListService
. Primeiro precisaremos injetar o StorageService
no TodoListService
, assim como injetamos no ListManagerComponent
. Vamos pedir por uma instância do serviço no construtor e garantir que a sua classe seja importada. Vamos mover a lista de tarefas padrão para fora da classe. Também iremos adicionar uma constante com a chave do nosso armazenamento.Uma boa prática é usar os arquivos de ambientes para armazenar as chaves. Dessa forma, é possível gerenciar diferentes chaves para cada ammbiente - desenvolvimento, produção, staging, etc.
todoList
. Vamos inicializá-lo no construtor com a lista no armazenamento local, se existir, ou então com lista a padrão....item
) que são substituídos pelas chaves-valores de changes
. (Se uma chave em changes
não existe em item
, ela é adicionada ao novo objeto.)addItem
e updateItem
:saveList
de dentro dos métodos addItem
e updateItem
.splice(i, n)
remove n
itens começando pelo index i
. Em nosso código, nós removemos somente um item (é por isso que usamos 1 como segundo parâmetro).localStorage
é uma ótima e direta ferramenta para desenvolvedores armazenarem dados localmente nos computadores/dispositivos dos usuários. Nós então implementamos um novo serviço que usa o localStorage
para guardar os dados que nosso TodoListService
usa para salvar os itens da lista de tarefas.