Nesse artigo veremos como é possível trabalhar com o LocalStorage do Browser no Blazor. Para alcançar esse objetivo vamos utilizar o recurso de Interop JavaScript. Se você ainda não sabe como fazer sua aplicação Blazor conversar com código JavaScript, leia esse artigo, iremos partir desse exemplo.
LocalStorage e SessionStorage
Para quem já trabalha com algum framework SPA (Angular, React, Vue.Js), sabe que o LocalStorage e o SessionStorage do Browser são muito úteis para armazenamento de dados locais do aplicativo.
Um exemplo clássico, é salvar no LocalStorage o Token de autenticação do usuário, necessário para realizar requisições em APIs protegidas com algum tipo de autenticação baseada em token.
A diferença entre LocalStorage e SessionStorage, é que os dados persistidos no LocalStorage são mantidos mesmo que a sessão do browser seja encerrada. Ou seja, mesmo que você feche o browser, os dados do LocalStorage permanecerão lá.
Já os dados persistidos no SessionStorage são mantidos apenas durante a sessão aberta pela aplicação. Quando essa sessão é encerrada, os dados do SessionStorage serão apagados.
No exemplo que você verá nesse artigo, vamos trabalhar apenas com o LocalStorage, mas você poderá implementar o mesmo exemplo com o SessionStorage, é só fazer uma pequena adaptação nas funções JavaScript que veremos a seguir.
Função JavaScript
A ideia do exemplo que vamos desenvolver aqui, é criar uma classe de Serviço, que irá chamar três funções JavaScript para Salvar, Recuperar e Remover dados do LocalStorage.
No exemplo do artigo sobre JavaScript Interop, foi preparado o ambiente para que nossa aplicação Blazor interaja com JavaScript. Partindo desse exemplo, abra o arquivo funcoes.js que está na pasta wwwroot/js, e inclua as três funções destacadas aqui na Figura 1.
Essas três funções realizam, respectivamente, as operações de Salvar, Retornar e Remover dados do LocalStorage.
O LocalStorage funciona como um dicionário, e é por isso que a função saveToLocalStorage recebe os parâmetros chave e valor para gravar uma determinada informação. A função getFromLocalStorage recebe apenas a chave e retorna o seu respectivo valor. E o destroyFromLocalStorage recebe a chave que será removida do LocalStorage.
Para trabalhar com o SessionStorage, em vez do LocalStorage, basta modificar essas funções, substituindo as referências de window.localStorage para window.sessionStorage.
IStorageService
Para implementar um Serviço que irá realizar as funções de Storage no Blazor, começaremos definido uma interface, para trabalharmos da melhor maneira possível, com o Injetor de Dependência do Blazor.
Crie a interface IStorageService na pasta Services do seu projeto. O conteúdo dessa interface deve ser como demonstrado na Figura 2.
Veja que essa interface declara três métodos, com praticamente as mesmas assinaturas das funções JavaScript definidas anteriormente.
StorageService
Vamos agora codificar a classe StorageService, que irá implementar a interface IStorageService. Crie essa classe na mesma pasta Services.
A primeira coisa que devemos fazer nessa classe é injetar pelo seu construtor, o Serviço de Interop com JavaScript, IJSRuntime. Veja na Figura 3.
E para implementar os métodos da interface, vamos utilizar o método InvokeAsync do IJSRuntime, para fazer as respectivas chamadas às funções JavaScript que trabalharão com o LocalStorage. Veja as implementações desses métodos na Figura 4.
E para fechar a questão do StorageService, basta registrar o serviço no Startup, como mostra a Figura 5. Veja que estamos registrando o serviço como um Singleton, para otimizar o uso desse recurso.
Usando o StorageService
Agora que o StorageService está implementado, vamos utilizá-lo em um componente. Para isso vamos criar o componente TesteStorage.razor.
Como você pode ver na Figura 6, estamos injetando o IStorageService no componente, e criando uma interface de usuário bem simples para interagir com o serviço.
Veja que temos dois inputs para que o usuário possa digitar uma Chave e um Valor, e três botões para realizar as operações de Salvar, Recuperar e Remover itens no LocalStorage.
Para fechar a implementação do Componente, vamos partir para o código do bloco @functions. Veja essa implementação na Figura 7.
Nesse código temos as duas propriedades (Chave e Valor) que foram ligadas através de bind, aos inputs HTML.
Também temos três métodos ligados aos botões Salvar, Recuperar e Remover. Os três métodos fazem as respectivas chamadas aos três métodos do StorageService. Em seguida eles imprimem no Console o resultado de cada uma das chamadas.
Testando o LocalStorage
Para testar o nosso exemplo, execute a aplicação e navegue ao componente /storage. Como você pode ver na Figura 8, teste as três operações e veja o resultado no Console do Browser. Nesse exemplo estou usando as ferramentas de desenvolvimento do Chrome (F12).
Aproveite e vá na aba Application das ferramentas de desenvolvimento do Chrome, e veja todas as chaves e valores que você adicionou no LocalStorage da nossa aplicação. Figura 9.
Concluindo
Apesar de termos que fazer o acesso ao LocalStorage através de JavaScript Interop, a implementação ficou muito simples e isolada. A quantidade de código JavaScript é bem pequena e fácil de manter.
Grande Abraço e até o próximo!
Blaze of Code 
Um comentário em “LocalStorage no Blazor”