Rodrigo Brito

Inserindo e recuperando dados armazenados localmente

A LocalStorage, uma propriedade do objeto Window, permite acessar um objeto chamado localStorage(interface de armazenamento da Web API) que fornece acesso ao armazenamento de sessão ou local para um domínio específico, possibilitando a adição, modificação e exclusão de dados armazenados.

A localStorage é similar ao sessionStorage, a única diferença é que enquanto os dados armazenados na localStorage não expiram, os dados na sessionStorage são limpos ao expirar a sessão da página.

Isto é utilizado para salvar preferências, dados de carrinhos de compra, tempo de visualização de vídeos. A localStorage não é para armazenar dados sensíveis, pois podem ser coletados por sites maliciosos, bem como por outros usuários.

Para a demonstração e manipulação da localStorage, será codificado um formulário para a criação de um botão na página, onde o código do estilo será apresentado na tela. Os dados deste css serão armazenados na localStorage para a utilização depois de um encerramento de sessão.

Mão na massa, ops... no teclado! Focando no JS, abaixo segue o código de um formulário e seu estilo. Saiba aproveitar!

HTML:

O nome dos inputs são os nomes de suas propriedades de css, pois serão utilizados como referência no JS, seguindo o padrão de forms (para facilitar a seleção de elementos). Para propriedades com hífen, foi utilizado o camelCase, pois é dessa forma que o JS acessa o estilo dos elementos. A última section, classe "result", apresentará o código do css gerado pelas seleções do form. O button será o elemento que receberá os atributos de css escolhidos no form, para permitir a visualização.

Agora, vamos inserir o estilo.

CSS:

O css é bem básico, conforme a imagem abaixo. Sinta-se a vontade para alterar, implementar e evoluir todo o conteúdo aqui existente!

Agora, nosso script:

O primeiro passo, é a seleção dos elementos. Os selecionados da vez são o formulário (controls), o botão (btn) e a tag code que conterá o texto do estilo gerado (cssText).

É preciso que em cada item do formulário seja obtido o valor contido neste. Os valores são executados após um eventodo usuário, mudando os valores dos campos, então, um addEventListener a cada change tem que ser aplicado ao form, disparando uma função, chamada aqui de handleChange, obtendo o nome da propriedade (propositalmente o nome da propriedade css) e o valor desta através do event.target. Estes conjunto, propriedade e valor, será adicionado às propriedades de estilo do botão nos métodos de um objeto chamado handleStyleatravés da função handleChange.

Resumo: usuário manipula o form, evento change ocorre, dispara a função handleChange que obtém a nome da propriedade manipulada, o seu valor é passado para os métodos de handleStyle, handleStyle aplica na propriedade do botão igual a passada como índice com o valor recebido como parâmetro. Até o momento o script está da seguinte forma:

Os métodos do objeto handleStyle existem para cada propriedade manipulada. As unidades de medidas foram concatenadas aos valores quando aplicáveis.

Precisamos apresentar o estilo na tela, na tag "code". Há uma propriedade de estilo (style) dos elementos, chamada de cssText. Esta propriedade é acessível e será adiciona dentro da tag em cada evento, através da função showCss disparada também por handleChange. Como o cssText retorna os valores de css separados por ponto e vírgula. O método split foi utilizado para separar o texto a cada ponto e vírgula e espaço, retornando um array. Cada elemento deste array foi unido por um ponto e vírgula, fechamento e abertura de um span, onde o span aberto inicial foi concatenado antes do btn:

Nesse momento, o objetivo principal está funcionado:

O que ocorre é, a cada fechamento de aba ou navegador, os dados são perdidos. Então, vamos armazenar e atualizar estes dados na locaStorage, para que, sempre que a página for aberta, ela já retorne com os dados da última modificação. Agora é a parte com menos código!

Utilizando a localStorage:

LocalStorage, sendo um objeto, pode ser adicionada qualquer propriedade que necessitarmos com seu respectivo valor. Assim como podemos adicionar, podemos obter, onde o nome da propriedade é a "key" e o valor é "value". Ex:

Mesmo paós fechar a aba ou até mesmo o navegador, este dado vai permanecer neste local, a não ser que seja excluído por instrução ou manualmente.

Precisamos de uma função simples, aqui chamada de saveValues, que armazene os dados resultantes do evento neste ambiente da Web API, contendo o nome da chave e o valor. Esta função será ativada na função handleChange, junto a showCss:

Para salvar em localStorage basta isso. Agora, como poderemos atualizar os dados de uma página baseado nos conteúdos da locaStorage?

Como é um objeto acessível, poderemos com uma função, setValues, obter as propriedades e o valor deste e de acordo com o nome da propriedade atualizar o valor do nosso objeto handleStyle, utilizando um forEach em cada chave retornada de um array de Object.keys(retorna um array com todas as chaves de um objeto) sobre o localStorage. Estes dados devem ser aplicados tanto no formulário quanto no botão. Dentro do forEach, os dados do formulário (controls.elements) e do botão (passado por handleStyle) serão alimentados pelos dados da localStorage e a cada evento, serão atualizados normalmente. A função showCss também deve ser ativada na função setValues:

 Assim, fechando e abrindo o navegador, a página será carregada de acordo com os últimos dados contidos na localStorage:

Script final: