Texto de: Letícia Garcez
Introdução
Uma funcionalidade muito utilizada no desenvolvimento web é o local storage (armazenamento local, em tradução livre) do navegador. Essa funcionalidade permite armazenar informações no lado do cliente, assim como os cookies, e neste artigo iremos entender o que é o local storage e como utilizá-lo.
Conhecendo o local storage
O local storage é uma forma de armazenamento de dados persistente, ou seja, os dados não serão deletados se o navegador for fechado, que permite que dados sejam salvos diretamente no navegador.
Os dados são armazenados em um formato de chave-valor, sendo que o valor sempre será armazenado no formato string, o que significa que na hora de acessar os dados armazenados pode ser preciso fazer algum tipo de conversão.
Usando o local storage
Para interagir com o local storage, é necessário usar o objeto localStorage do JavaScript, o qual é uma variável global assim como o document 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 do local storage podem ser vistas no código 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();
O local storage também pode ser acessado diretamente pelo console do dev tools do navegador, como pode ser visto na imagem abaixo:
No local storage, você encontra várias entradas com nomes grandes e que não parecem fazer muito sentido. Essas entradas foram feitas por sites e aplicações que você acessou utilizando 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 dev tools imprimindo o objeto completo.
Poderíamos aqui utilizar o método clear para limpar todas as entradas no localStorage, porém isso pode afetar de maneira indesejada alguma aplicação na qual você esteja logado no navegador.
Para testar as funcionalidades do local storage, criei uma página HTML que utiliza estes métodos e você pode copiar o código abaixo para fazer seus testes:
<!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>
Quando usar o local storage
O local storage deve ser usado em casos onde desejamos armazenar alguma informação do lado do cliente por tempo indeterminado, como, por exemplo, preferências relacionadas ao tema de uma interface.
Também podemos usar o local storage como uma forma de armazenar dados temporariamente, mas neste caso precisamos implementar a lógica para escrever e apagar os dados em intervalos de tempo. Um exemplo disso é armazenar dados em cache, como, por exemplo, a quantidade de itens em um carrinho de compras.
É importante dizer aqui que essa funcionalidade precisa ser utilizada com cuidado já que a capacidade de armazenamento do local storage é limitada. Além disso, sobrecarregar o local storage pode tornar o navegador lento, prejudicando assim a experiência do usuário.
Utilizar o local storage para armazenar informações sensíveis não é uma boa ideia, pois esses dados não serão excluídos de forma automática do armazenamento e também não terão nenhum tipo de criptografia, ou seja, ficarão expostos para qualquer script malicioso que possa estar sendo executado no navegador.
Considerações finais
O local storage é um recurso muito útil para a persistência de dados numa aplicação e pode ser utilizado para finalidades diferentes. No entanto, é importante lembrar que o local storage não é a solução para todos os seus problemas por contar com limitações de capacidade e não é adequado para dados sensíveis.
