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

JavaScript

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

Gabriel Nascimento
Escrito por Gabriel Nascimento em 2 de junho de 2020

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?

Armazém local com vários pacotes

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

Carrinho de funções do 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:

Hey,

o que você achou deste conteúdo? Conte nos comentários.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

9 Replies to “LocalStorage JavaScript: O Guia Fácil para usar o Armazenamento Local”

Jeverson

Excelente conteudo, explica muito bem o Storage. Parabens

Gabriel Nascimento

Muito obrigado, Jeverson!

Tércio

Muito bom!!! Gostei muito! Já estou implementando!

Gabriel Nascimento

É isso ai! Cuidado, quando você começa a usar Armazenamento Local, não quer mais parar. haha

Fabio Guerra

Excelente artigo! Simples e objetivo. Parabéns!

Gabriel Nascimento

Valeu, Fabio! Fico feliz que você achou isso. xD

Márcio

Muito bom obrigado pelo artigo….estou em processo seletivo em uma vaga de emprego…e um dos teste era fazer um crud no localstorage em Angula….esse artigo ajudou…vou testar agora.

Gabriel Nascimento

Fico feliz em ter ajudado. xD Espero que de tudo certo no seu processo seletivo!

E não sei se você viu, mas tem outro artigo que ensina justamente a fazer um serviço de Local Storage em Angular…

Vou deixar o link aqui: https://warcontent.com/angular-localstorage/