Trabalhando com LocalStorage

Se você acha que os navegadores (Chrome, Explorer, Mozilla, Opera..) de hoje foram feitos apenas para abrir páginas da internet, você está muito enganado.

Olhando um pouco mais a fundo, você vai perceber que cada vez mais eles vão assumindo outras responsabilidades como:

Analisar a performance das páginas da web,
Permitir a utilização de plugins de terceiros,
Oferecer o uso de ferramentas atreladas a segurança do usuário,
Receber notificações de páginas da web (web-push),
Armazenar informações locais dentro de cookies, sessões e também no famoso storage.
E muito mais!

Antes o que era um "simples" navegador de internet, vem assumindo cada vez mais espaço dentro do universo das aplicações desktop e mobile.

Na lição de hoje, nós aprenderemos a tirar proveito de uma das funcionalidades que estão disponíveis desde a chegada do HTML5, o LocalStorage!

O que é o LocalStorage

O LocalStorage é uma das formas que nós desenvolvedores temos para armazenar algumas informações de forma persistente dentro do navegador do nosso cliente.

Quando me refiro ao termo "persistente", estou querendo dizer que os dados continuarão sendo armazenados no navegador do cliente, mesmo após fecharem o navegador.

Essa funcionalidade faz parte de uma API em Javascript chamada de Web Storage, que fornece uma forma simples de armazenar dados no navegador do cliente.

Ele funciona de forma similar aos cookies e sessions, fornecendo uma interface simples de chave-valor onde podemos armazenar alguns dados, como por exemplo:

Informações relacionadas a sessão do usuário,
Login,
Senha (Brincadeiras a parte, você nunca deve armazenar dados sensíves por aqui)
Tokens,
E afins...

Estes são apenas alguns exemplos dos tipos de dados que podemos armazenar no LocalStorage 😁

Entretanto, com relação aos cookies, ele possui algumas vantagens, que sãoi:

Permite que você armazene um número maior de dados,
Possui uma segurança melhor,
É mais simples e fácil de se usar, pois conta com hooks em Javascript!

Primeiros Passos com o LocalStorage

Antes de continuarmos, é importante ressaltar que você NÃO precisa baixar, ou quem sabe importar alguma biblioteca para utilizar o LocalStorage no Javascript 😉

Uma vez que ele já "faz parte" da sintaxe da linguagem, podendo ser chamado tranquilamente da mesma forma como você executa um console.log() ou declara uma variável no Javascript.

Vejamos como se trabalhar com o LocalStorage abaixo.

Criando nosso ambiente de testes

Eu não sei qual é o seu nível de conhecimento na linguagem Javascript, e independente de qual seja, eu te recomendo começar desde o início desta jornada, caso surja alguma dúvida relacionada a linguagem, ok?

Vamos começar criando um novo arquivo chamado de localStorage.html, ele pode ser salvo em qualquer pasta existente dentro do seu computador:

<!DOCTYPE html>
<html>
 <head>
 <title>Testes do LocalStorage</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
 <h1>Testes do LocalStorage</h1>
 <p>Os testes estão sendo feitos no Javascript, consulte o console do navegador para acompanhar o desenvolvimento.</p>	
 </body>
 <script>
 //Comece aqui...
 </script>
</html>

Feito isso, vamos começar a brincar um pouco com essa API 🤩

Verificando se o LocalStorage está disponível no navegador do usuário

Como uma boa prática, é sempre bom verificar se o LocalStorage está disponível no navegador do usuário.

Por padrão, o LocalStorage está disponível a partir das seguintes versões:

Internet Explorer 8 (ou superior)
Firefox 3.5 (ou superior)
Safari 4 (ou superior)
Google Chrome 4 (ou superior)

É sempre bom verificar se o LocalStorage está disponível, vai que um usuário abre seu site usando o Explorer 7, ou Chrome 3.7? Vai quebrar sua aplicação, não é verdade? 😆

if (window.localStorage) {
 // Suporte ao localStorage
}

Como visto no comando acima, o comando de validação é bem simples bastando verificar se ela existe dentro de window, e se existir, as futuras implementações deverão ser inseridas dentro do bloco do if.

Criando Entradas

Para dar o pontapé inicial, vamos começar criando uma nova entrada dentro das tags <script> existente no arquivo que criamos logo acima.

<script>
 //comece aqui...
</script>

Para se criar uma nova entrada de chave-valor, você pode fazer isto da seguinte forma:

localStorage.setItem('nome', 'micilini');

Observe que estamos chamando a variável global chamada localStorage que contém uma instância da API do Web Storage, note que estamos fazendo isso tranquilamente sem a necessidade de importar nada.

O método setItem é responsável por registrar uma nova entrada no LocalStorage, onde o primeiro parâmetro sempre será a chave, e o segundo parâmetro o valor. No caso do exemplo acima, o nome da nossa chave é nome, e o valor é micilini.

Existem outras formas de se declarar entradas usando o setItem, como é o caso do uso de variáveis:

let chave = 'meu item';
let valor = 'meu valor';

localStorage.setItem(chave, valor);//Declaração por meio de variáveis

let chaveUm = 'owl';
let valorUm = 'true';
 
localStorage.setItem(chaveUm, valorUm);

Legal, mas e se eu quiser armazenar um objeto, isso é possível? Sim, vejamos:

Armazenado Objetos em JSON no LocalStorage

Também é possível armazenar alguns objetos no LocalStorage por meio do JSON, veja como isso é fácil:

// Primeiro nós criamos nosso objeto:
let meuObjeto = { nome: 'Portal Micilini', rank: 12, url: 'https://micilini.com' };
 
// Em seguida nós armazenamos no LocalStorage:
localStorage.setItem('dados', JSON.stringify(meuObjeto));

Veja que criamos o nosso objeto, e armazenamos ele dentro do LocalStorage por meio do JSON.stringfy().

Tenha em mente que você vai precisar do método JSON.parse() para transformar essa string em um JSON válido novamente, mas antes disso, precisamos aprender a recuperar um registro do LocalStorage 🙂

Lendo Entradas

Para ler um determinado registro dentro do LocalStorage, nós fazemos o uso do método getItem() da seguinte forma:

let meuItem = localStorage.getItem('nome');//Recupera o valor 'micilini'

Tenha em mente que este método terá somente um único parâmetro, que no caso é o nome da chave.

Caso a sua chave estiver dentro de uma variável, você pode recupera-la da seguinte forma:

let chave = 'nome';
let meuItem = localStorage.getItem(nome);//Recupera o valor 'micilini'

Você pode informar um número inteiro (int) para pegar um determinado item salvo em algum índice do LocalStorage. Para isso você vai precisar usar o método key() da seguinte forma:

let key = localStorage.key(0);//Recupera o nome da chave salva no índice 0
let value = localStorage.getItem(key);//Recupera o valor que está armazenado dentro da chave de índice 0

Lendo um JSON armazenado

Caso você tiver armazenado um JSON dentro do LocalStorage, você pode recuperar e transformar ele novamente em um objeto da seguinte forma:

// Lendo um item no formato JSON
 = JSON.parse(localStorage.getItem('dados'));

Viu como é simples?

Atualizando Entradas

Caso você quiser atualizar alguma entrada, você pode fazer isso usando o método setItem() atribuindo um novo valor a uma chave já existente:

localStorage.setItem('nome', 'Micilini Roll');

Excluindo Entradas

Para exluir uma entrada existente, basta usar o método removeItem() passando a chave como parâmetro:

localStorage.removeItem('nome');//Informando a string direta

let chave = 'owl';
localStorage.removeItem(chave);//Informando uma variável

Excluindo todas as entradas do seu site

Caso você deseje excluir todas as suas entradas referentes ao seu site, e que foram armazenadas no LocalStorage, basta usar o método clear() da seguinte forma:

localStorage.clear();

Interagindo com o LocalStorage

Por padrão, o LocalStorage possui uma propriedade chamada de length, que retorna a quantidade de itens salvos no armazenamento interno.

if (localStorage.length > 0) {
 // Existem itens
} else {
 // Não existem itens
}

Também é possível usar a estrutura de laço for para percorrer todos os itens armazenados no LocalStorage, veja como é fácil:

for (let i = 0; i < localStorage.length; i++){
 let chave = localStorage.key(i);
 let valor = localStorage.getItem(chave);
 console.log(chave, valor);
}

Observe que estamos informando o índice do item usando o método key() para posteriormente recupera-lo usando o getItem().

Como visualizar o LocalStorage no navegador?

Considerando que você está usando o Google Chrome, você pode visualizar o LocalStorage clicando com o botão direito em qualquer parte da sua página, e em seguida selecionar na opção [Inspecionar Elemento]:

Em seguida vá em Application > Storage > Local storage:

Note que as chaves e valores estão dispostos dentro de uma tabela, onde você poderá visualizar tudo o que está sendo armazenado.

Conclusão

Nesta lição você aprendeu um dos recursos mais incríveis disponibilizados para os desenvolvedores Javascript, o LocalStorage 😉