Uma feature muito utilizada no desenvolvimento web é o local storage (armazenamento local, em tradução livre) do navegador. Essa ferramenta permite o armazenamento de informações no lado do cliente e neste artigo iremos entender o que é e como utilizar essa feature.
Conceito
O local storage é uma forma de armazenamento de dados persistente que permite que armazenemos dados do lado do cliente . Isso quer dizer que mesmo se o usuário recarregar a página, fechar o navegador ou reiniciar o computador, as informações armazenadas ainda estarão disponíveis.
O armazenamento dos dados dentro do local storage acontece em um formato de chave-valor, de forma similar aos objetos do JavaScript, ou ao formato JSON. O valor do par sempre será do tipo string, o que significa que na hora de acessar os dados armazenados pode ser preciso converter os dados.
Usando o local storage
Para interagir com o local storage, é necessário usar o objeto localStorage do JavaScript. Esse objeto é propriedade da variável global window e oferece métodos para armazenar, recuperar e excluir dados, além de permitir a limpeza completa de todo o armazenamento.
As operações básicas deste objeto estão listadas abaixo:
// inserir dado
localStorage.setItem("chave", "valor");
// ler dado
const dado = localStorage.getItem("chave");
// deletar dado
localStorage.removeItem("chave");
// deletar todo o conteúdo
localStorage.clear();
Também é possível acessar o localStoragepelo devtools do navegador imprimindo o objeto localStoragecomo na imagem abaixo:
Dentro do localStorage, você vai encontrar várias entradas com nomes grandes e que não parecem fazer muito sentido. Essas entradas foram criadas por sites e aplicações que você acessou com o seu navegador. Apesar do objeto localStorage não ter uma função para imprimir todos os elementos inseridos nele, podemos visualizar estes elementos no devtools imprimindo o objeto completo.
Com relação ao método clear, é importante lembrar que ele serve para limpar todas as entradas no localStorage e que essa exclusão pode afetar de maneira indesejada alguma aplicação na qual você esteja logado no navegador.
Para testar as funcionalidades do localStorage, criei uma página HTML que utiliza estes métodos e você pode usá-la para testar:
<!DOCTYPE html>
<html>
<head>
<title>localStorage</title>
<style>
body {
background-color: #f5f5f5;
font-family: sans-serif;
}
form {
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
width: 400px;
}
h1 {
margin: 0;
text-align: center;
font-size: 24px;
}
input[type="text"] {
margin: 10px;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #f5f5f5;
width: 90%;
font-size: 16px;
color: #333;
}
button {
margin: 10px 5px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 16px;
}
button:hover {
background-color: #0062cc;
}
div {
font-weight: bold;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<form>
<h1>localStorage</h1>
<label for="chave">Chave:</label>
<input type="text" id="chave" name="chave" placeholder="Digite a chave" />
<label for="valor">Valor:</label>
<input type="text" id="valor" name="valor" placeholder="Digite o valor" />
<button id="inserir">Inserir</button>
<button id="deletar">Deletar</button>
<button id="visualizar">Visualizar</button>
<div id="resposta"></div>
</form>
<script>
const inserirBtn = document.getElementById("inserir");
const deletarBtn = document.getElementById("deletar");
const visualizarBtn = document.getElementById("visualizar");
const respostaDiv = document.getElementById("resposta");
inserirBtn.addEventListener("click", function (event) {
event.preventDefault();
localStorage.setItem(chave.value, valor.value);
chave.value = "";
valor.value = "";
});
deletarBtn.addEventListener("click", function (event) {
event.preventDefault();
localStorage.removeItem(chave.value);
chave.value = "";
});
visualizarBtn.addEventListener("click", function (event) {
event.preventDefault();
const valor = localStorage.getItem(chave.value);
respostaDiv.innerHTML = valor ?? "Não encontrado";
chave.value = "";
});
</script>
</body>
</html>
Considerações finais
Apesar da utilização do local storage permitir o armazenamento de informações, é preciso cuidado para usar essa feature já que a capacidade de armazenamento do local storage é limitada. Além disso, sobrecarregar este armazenamento pode tornar o navegador lento, prejudicando assim a experiência do usuário.
