Persistência de dados com localStorage

Retomando alguns projetos pessoais sobre meus aprendizados em lógica de programação, comecei a estudar melhor o uso do localStorage com JavaScript.

O que é localStorage?

O localStorage é um recurso do navegador que permite salvar informações localmente, ou seja, no próprio navegador do usuário.

De forma simplificada, ele funciona como um pequeno armazenamento de dados. Mesmo que o usuário feche a aba ou o navegador, as informações salvas podem continuar disponíveis quando ele acessar o site novamente.

Diferente dos cookies, os dados do localStorage não são enviados automaticamente para o servidor a cada requisição. Isso torna o recurso interessante para preferências visuais e dados simples da interface, mas não substitui banco de dados, autenticação ou armazenamento seguro no servidor.

O localStorage é um recurso muito útil quando queremos salvar informações diretamente no navegador do usuário. Com ele, é possível manter determinados dados mesmo depois que a pessoa fecha a aba ou sai do site.

Vale ressaltar que o localStorage não possui prazo de expiração automático, mas pode ser apagado se o usuário limpar os dados do navegador, usar modo anônimo/privado ou se houver políticas do próprio navegador. Em modo privado, os dados costumam ser apagados ao fechar a janela ou aba privada.

Os dados salvos no localStorage pertencem à origem do site, ou seja, à combinação de protocolo, domínio e porta. Por isso, uma página em http:// pode ter um armazenamento diferente da mesma página em https://.

Como o localStorage trabalha de forma síncrona, ele é mais indicado para dados pequenos e simples. Para armazenamentos maiores, como listas extensas, arquivos ou dados muito estruturados, é recomendado considerar outras tecnologias.

Essas informações podem ser utilizadas para melhorar a experiência do usuário, principalmente em sites que possuem acessos recorrentes ou algum tipo de personalização.

Alguns exemplos de uso do localStorage são:

• preferência por tamanho de roupa;
• tamanho de calçado;
• produtos salvos em um carrinho de compra;
• saudação personalizada de boas-vindas;
• informações temporárias de pedidos em uma fábrica;
• preferência de tema, como modo escuro ou modo claro;
• configurações de acessibilidade.

Acessibilidade com localStorage

No caso da acessibilidade, o localStorage pode ser utilizado para salvar preferências como:

• tamanho da fonte;
• modo de leitura simplificada;
• redução de animações;
• contraste da página;
• tema visual mais confortável para leitura.

Quando não é recomendado usar localStorage

O localStorage deve ser usado apenas para informações simples e não sensíveis.

Não é recomendado salvar dados como:

• senhas;
• dados bancários;
• documentos pessoais;
• tokens de acesso importantes;
• informações privadas do usuário.

Isso acontece porque os dados do localStorage ficam disponíveis no navegador e podem ser acessados por scripts executados na página.

Salvar e recuperar dados

Para salvar uma informação no navegador do usuário com o localStorage, devemos utilizar o método setItem(). Esse método contém dois parâmetros: a chave, que identifica o dado salvo, e o valor, que representa o conteúdo armazenado.

localStorage.setItem(“idade”, 35);

Para recuperar e verificar a existência de um dado armazenado no navegador, é necessário utilizar o método getItem() com o nome da chave utilizada.

const idade = localStorage.getItem(“idade”);

Outra informação importante é que os dados são salvos como string. Então, em vez de somar os dados armazenados, o JavaScript pode concatenar os valores.

const idade = localStorage.getItem(“idade”);

const soma = idade + 1;

alert(soma); // 351

const idade = localStorage.getItem("idade");

const soma = idade + 1;

alert(soma); // 351

Convertendo valores do localStorage

Os dados salvos no localStorage são armazenados como texto, mesmo quando parecem números.

Por isso, ao recuperar um valor numérico, pode ser necessário converter esse valor usando a função Number().

localStorage.setItem(“idade”, “35”);

const idade = Number(localStorage.getItem(“idade”));

const soma = idade + 1;

alert(soma); // 36

localStorage.setItem("idade", "35");

const idade = Number(localStorage.getItem("idade"));

const soma = idade + 1;

alert(soma); // 36

Também é possível acessar ou salvar valores no localStorage usando a notação de objeto, com ponto ou colchetes.

Notação com ponto:

localStorage.idade = 17;

Notação com colchetes:

localStorage[“idade”] = 17;

O método mais recomendado nos estudos é o setItem(), porque deixa a intenção do código mais explícita.

localStorage.setItem();    // salvar

localStorage.getItem();    // buscar

localStorage.removeItem(); // remover

localStorage.clear();      // limpar tudo

Esses dados salvos podem ser bastante úteis em nível de personalização. Eles ajudam a tornar o site mais adaptado ao usuário, deixando a navegação mais agradável e prática, principalmente quando a pessoa acessa o mesmo ambiente com frequência.

Nos meus estudos, estou aplicando esse conceito em alguns exemplos simples.

O primeiro exemplo é uma página de seleção de time, onde o usuário escolhe seu clube de preferência. A partir dessa escolha, o site pode salvar a informação no navegador e exibir novamente a preferência quando o usuário retornar.

Outro exemplo é um site sobre horóscopo. Como esse tipo de conteúdo costuma fazer parte da rotina diária de algumas pessoas, faz sentido salvar preferências como signo, tema visual ou até sugestões personalizadas para cada novo acesso.

A ideia principal é entender como a persistência de dados pode tornar pequenos projetos mais interativos, personalizados e próximos da experiência real de uso na web.

Em resumo, o localStorage é uma ferramenta simples e prática para criar experiências personalizadas no navegador. Ele não substitui um banco de dados e também não deve ser utilizado para armazenar informações sensíveis, mas funciona muito bem para preferências de interface, temas, configurações de acessibilidade e pequenos estados de navegação.

---

• LinkedIn
• E-mail
• GitHub