O que é o local storage e como os sites o usam?

O local storage permite aos sites guardar dados no browser que persistem após o fechares. Descobre como funciona e o que guarda.

Rascunho

O local storage permite aos sites guardar dados diretamente no teu browser, para persistirem entre visitas. Descobre como funciona, para que os sites o usam e o que significa para o teu site.

Já definiste uma preferência num site, fechaste o separador e voltaste mais tarde para encontrar tudo exatamente como deixaste? As tuas definições de visualização continuavam iguais, os teus itens guardados continuavam lá e não tiveste de configurar nada de novo. É o local storage a fazer o seu trabalho, discretamente, em segundo plano.

No capítulo anterior, sobre os tipos de armazenamento do browser, apresentámos o local storage como uma das principais formas como os browsers guardam dados. Este capítulo aprofunda o que o local storage realmente é, como funciona e que papel tem no teu site.

O que é o local storage?

O local storage é um tipo de armazenamento do browser que permite aos sites guardar pequenos pedaços de dados diretamente no dispositivo do visitante. Esses dados ficam no browser mesmo depois de o visitante fechar o separador ou desligar o computador. Da próxima vez que visitar o mesmo site, o browser ainda tem esses dados disponíveis e o site pode usá-los para restaurar o estado anterior.

É isto que torna o local storage diferente do session storage, que é limpo quando o separador fecha. O local storage é persistente. Não tem um prazo de validade automático. Os dados ficam até o utilizador limpar o browser ou até o próprio site os remover.

Como funciona o local storage?

O local storage funciona como um simples armazenamento de chave e valor. Pensa nele como um pequeno bloco de notas dentro do browser, onde um site pode escrever informação usando uma etiqueta e um valor. A etiqueta é a chave e a informação guardada sob ela é o valor. Quando o site precisa dessa informação de novo, procura a chave e obtém o valor.

Por exemplo, um site pode guardar uma chave chamada "theme" com o valor "dark" quando um visitante muda para o modo escuro. Da próxima vez que esse visitante voltar, o site consulta o local storage, encontra a chave "theme", lê o valor "dark" e aplica o modo escuro automaticamente, antes mesmo de a página estar totalmente apresentada.

Cada site tem o seu próprio local storage isolado. Um site só consegue ler e escrever os seus próprios dados. Não consegue ver o que qualquer outro site guardou. Este isolamento é uma funcionalidade de segurança incluída em todos os browsers.

Para que usam os sites o local storage?

Guardar preferências do utilizador

Definições de visualização, preferências de idioma, escolhas de tema e opções de layout são coisas comuns guardadas no local storage. São preferências não sensíveis que melhoram a experiência quando um visitante regressa.

Manter itens entre sessões

Alguns sites usam o local storage para guardar itens com que um visitante interagiu, como uma lista de leitura, uma lista de desejos ou itens vistos recentemente, para continuarem lá na visita seguinte, mesmo que o visitante não tenha sessão iniciada.

Reduzir pedidos ao servidor

Quando um site guarda informação localmente, pode obtê-la de imediato a partir do browser em vez de fazer um pedido ao servidor de cada vez. Isto acelera a experiência dos visitantes que regressam e reduz a carga no backend.

Manter o estado em formulários e processos com vários passos

Alguns sites usam o local storage para guardar temporariamente o progresso num formulário com vários passos ou num processo de compra. Se um visitante fechar o separador por engano, o progresso não se perde quando voltar.

Quais são os limites do local storage?

O local storage foi pensado para dados pequenos. A maioria dos browsers permite cerca de 5 a 10 megabytes por site, o que é muito para preferências e definições, mas não para ficheiros grandes ou conjuntos de dados complexos. Também só guarda texto. Números, objetos e listas têm de ser convertidos primeiro em texto para poderem ser guardados e voltar a ser convertidos quando são obtidos.

O local storage também não é o lugar certo para informação sensível. Como é acessível a qualquer script que corra na página, guardar palavras-passe, dados pessoais ou dados de pagamento no local storage é um risco de segurança. Os dados sensíveis pertencem ao servidor, protegidos por SSL e autenticação adequada.

Para uma comparação lado a lado entre o local storage e os outros tipos de armazenamento, lê tipos de armazenamento do browser.

Perguntas frequentes

O local storage funciona sem ligação à internet?

Sim. O local storage é guardado no dispositivo do visitante, e não num servidor. Os dados estão disponíveis mesmo quando o browser está offline. Esta é uma das razões pelas quais o local storage é muitas vezes usado em conjunto com service workers e cache storage para criar sites que funcionam parcial ou totalmente offline.

O local storage é partilhado entre browsers diferentes no mesmo dispositivo?

Não. O local storage é específico de cada browser. Se guardares dados num browser, não ficam visíveis noutro browser do mesmo dispositivo. Cada browser mantém o seu próprio local storage separado. Isto significa que um visitante que mude de um browser para outro não leva consigo as preferências ou os dados guardados.

Os visitantes podem ver ou apagar os dados do local storage?

Sim. Qualquer pessoa pode abrir as ferramentas de programador do browser e ver ou apagar os dados do local storage de qualquer site. Os visitantes também podem limpar todos os dados do browser através das definições, o que apaga por completo o local storage. Isto significa que os sites não devem depender do local storage como fonte de dados permanente ou garantida.

Qual é a diferença entre o local storage e os cookies?

Os cookies são enviados de volta ao servidor em cada pedido, o que os torna adequados para a gestão de sessões e a autenticação. O local storage fica apenas no browser e nunca é enviado automaticamente ao servidor. O local storage também guarda mais dados do que os cookies e não tem prazo de validade integrado. Cada um serve casos de uso diferentes, e os sites bem feitos usam ambos de forma adequada.

O local storage afeta a velocidade do site?

Ler e escrever no local storage é muito rápido, por isso raramente causa problemas de velocidade notórios. Na verdade, usar o local storage para guardar preferências em cache e reduzir pedidos ao servidor pode fazer um site parecer mais rápido para os visitantes que regressam. O impacto na velocidade do site é, em geral, positivo quando o local storage é usado com bom senso.

Preciso de gerir o local storage no meu site?

Se usas um criador de websites, o local storage é gerido automaticamente pela plataforma para as funcionalidades que suporta. Não precisas de escrever nem configurar nada. O criador trata de quaisquer preferências ou gestão de estado que usem local storage nos bastidores. Com o criador de websites da WEMASY, isto está tudo integrado na forma como a plataforma funciona.

Põe isto em prática
no teu próprio site.

Começa grátis com a WEMASY e cria o teu site em poucos minutos.