LocalStorage JavaScript: O Guia Fácil para usar o Armazenamento Local

Você pode prejudicar a experiência do usuário na sua aplicação, se toda vez buscar as informações necessárias em um banco de dados no servidor.

Afinal um servidor normal fornece os dados solicitados depois de alguns segundos.

Mas essa é a única opção?

Caso você utilize o LocalStorage JavaScript, poderá armazenar dados localmente no navegador do usuário…

E assim adquirir acesso a esses dados quase em tempo real.

Então continue lendo esse artigo para descobrir como tirar o melhor proveito desse recurso incrível.

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.

Entretanto os dados são mantidos até que o usuário, ou aplicativo web, limpe o cache do navegador.

Então ele não serve para dados sensíveis, considerando que você não tem nenhuma garantia da informação permanecer guardada.

Aliás o localStorage é parecido com cookies que fornecem um jeito rápido de armazenar e acessar dados locais.

No entanto ele possui vantagens em comparação ao uso de cookies:

• Permite que mais dados sejam salvos;
• Melhor segurança;
• E simplicidade de uso.

E como funciona o localStorage JavaScript?

O localStorage já está pronto para uso, através de uma instância disponível globalmente para nós.

E a partir dessa instância chamamos todos os métodos necessários para realizar o armazenamento, como…

Criar entradas

Crie entradas de par chave|valor com localStorage.setItem() ao fornecer uma chave e um valor:

let key = 'item 1';
localStorage.setItem(key, 'value');

Ler entradas

Leia as entradas com localStorage.getItem():

let myItem = localStorage.getItem(key);

Atualizar entradas

Atualize uma entrada com o mesmo método setItem(), mas com uma chave já existente:

localStorage.setItem(key, 'new value');

Excluir entradas

Exclua uma entrada com o método removeItem():

localStorage.removeItem(key);

Limpar tudo

Limpe tudo o que é armazenado no localStorage com clear():

localStorage.clear();

Armazenamento de objetos JSON

Perceba que apenas sequências de caracteres podem ser armazenadas com localStorage…

Então caso você queira guardar um objeto, 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.

// Criar item:
let myObj = { name: 'Gabriel', age: 25 };
localStorage.setItem(key, JSON.stringify(myObj));

// Ler item:
let myItem = JSON.parse(localStorage.getItem(key));

Manipulando dados no localStorage JavaScript

O localStorage também fornece alguns recursos para ajudar você a manipular as informações armazenadas.

Por exemplo, você pode testar a presença de itens com a variável length:

if (localStorage.length > 0) {
  // Há itens
} else {
  // Não há itens
}

Outro problema é o localStorage não possuir um método forEach…

Mas você pode iterar pelos itens usando o bom e velho loop for, com ajuda do método key():

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

Por fim, é importante sempre testar se o navegador suporta o localStorage antes de usar.

Para isso verifique se ele está disponível no objeto window:

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

Parabéns por ter chegado até aqui!

A fim de usar o localStorage é importante ter certos cuidados como:

• Seu suporte no navegador;
• Não armazenar grandes quantidades de dados;
• Além da segurança e integridade dessas informações.

Apesar disso, o localStorage é um recurso incrível para adicionar ao seu Arsenal de Programador. Ajudando você a criar uma experiência mais flexível e agradável em suas aplicações.

E se você gostou desse artigo, ou tem alguma dúvida, não esqueça de deixar nos comentários abaixo: