Funcionalidades do Local Storage
Armazenando dados localmente
Quando visitamos uma página web e temos que recorrer aos mesmos dados como, por exemplo: filtros de preferências, formulários, gerenciamento de sessão ou quaisquer outras informações que foram previamente salvas, recaímos em algumas escolhas:
- Fazer um login e rever as informações;
- Refazer o preenchimento dos dados;
- Usar o local storage
Numa perspectiva de usuário a escolha mais plausível consiste em ter seus dados salvos visando que o processo seja prático e menos invasivo. Numa visão de usuário/desenvolvedor essa problemática se apresenta sob outro panorama que implica, portanto em conhecer cada uma das opções e suas consequências.
A escolha 1 utiliza Cookies para preservar os dados do usuário, ou seja, essas informações do lado do cliente (navegador) são enviados para o servidor onde os dados são carregados dinamicamente a cada requisição HTTP. Em JavaScript, os cookies podem ser gerenciados usando o objeto document.cookie .
É importante lembrar que os cookies podem ser de dois tipos: de sessão e persistentes, os cookies persistentes expiram em uma data específica, enquanto que os de sessão são excluídos quando o cliente fecha a sessão, estes ainda podem se manter como persistentes caso a opção de restauração de sessão seja utilizada.
Ao decidir pela escolha 2, presume-se que os cookies foram desabilitados ou que normalmente o usuário preferiu não manter seus dados salvos e terá que refazer o preenchimento.
Ou por fim, é possível optar pelo local storage, onde nesse artigo serão apresentados alguns argumentos que justificam porque essa alternativa pode ser mais interessante ao seu problema.
Afinal, o que é local storage?
A API de Web Storage inclui duas propriedades diferentes do objeto Window, sendo estes:
- localStorage
- sessionStorage
A funcionalidade do localStorage consiste em salvar, adicionar, recuperar ou excluir dados localmente em um navegador Web, esta informação é guardada na forma de pares de chave-valor e os valores podem ser apenas strings.
Codificando — exemplo 1:
Através do navegador é possível testar alguns dos principais métodos do armazenamento local, são estes:
setItem(chave, valor) :
- Armazena um item com a chave e o valor.
getItem(chave):
- Recupera o valor do item com o nome da chave.
removeItem(chave):
- Remove o item com chave do localStorage.
Os métodos supracitados foram testados respectivamente no console do browser, a Figura 2 apresenta os resultados obtidos.
Codificando — exemplo 2:
Cenário: Criar uma playlist de músicas e manter os dados mesmo quando a página for fechada, o usuário pode decidir quando atualizar ou excluir estas informações.
O exemplo abaixo ilustra o html com duas entradas de dados, no primeiro campo para indicar a música e um outro para especificar a banda/cantor, foram incluídos também dois botões sendo um para salvar os valores no local storage e o outro para excluir os dados do armazenamento local.
Na sequência, precisamos utilizar o javascript para que as funcionalidades sejam aplicadas, no código script.js verificamos uma simples aplicação web com os métodos da propriedade em questão.
Utilizamos addEventListener() em várias etapas, esse método permite registrar tantas funções de manipulador de eventos quanto precisarmos. Sendo assim, nas primeiras linhas de código a finalidade do método consiste em permitir que o evento de carga “load” seja acionado quando os recursos dependentes terminarem de carregar. Em seguida, capturamos as entradas e utilizando o getElementById() para resgatar os ids dos botões.
O primeiro método que identificamos do local storage é setItem(), no qual passamos como parâmetros os valores capturados dos inputs. Em seguida, utilizamos um método denominado clear(), cuja função é remover todos os itens armazenados.
Para fazer a manipulação dos dados usamos um evento chamado “storage” pois, a medida que fazemos modificações na área de interface Web Storage precisa-se garantir que as atualização dos novos valores e os dados mais antigos permaneçam.
Em seguida, foi criada uma função para exibir as informações. Na sequência, duas propriedades são destacadas no uso do laço for, o length e o key. O length contabiliza o tamanho total dos dados enquanto o for percorre local storage e o key que faz o retorno do nome da enésima chave no armazenamento.
Por fim, o método getItem() está resgatando os valores para serem concatenados numa variável e na sequência apresentados ao usuário.
A cada inserção ou atualização, as músicas e cantores recebem uma chamada da função exibir e ao final permite ter o seguinte resultado:
Os dados são inseridos, em seguida armazenados no navegador e também exibidos ao usuário através da tag span do html, a direita na opção Application temos uma sessão denominada Storage, que entre outras escolhas contém o Local Storage, os dados armazenados são visualizados a direita com os respectivos pares chave-valor, e são mantidos enquanto o botão: Limpar Storage não for utilizado.
Para ver mais detalhes sobre este exemplo você pode acessar seu código neste repositório e a demonstração neste link.
Vantagens
As informações armazenadas não são compartilhadas com o servidor, esse fato permite uma agilidade maior tendo em vista que, não há necessidade em fazer requisições. Outra vantagem é que, os dados são preservados sem exigir qualquer esforço extra do usuário. Isso significa que quando eles retornam a página ou até mesmo atualizam suas preferências, estas continuam como foram previamente definidas.
Mesmo que esta propriedade armazene somente string, é possível usar objetos JSON também, mas antes precisamos convertê-los usando o método JSON.stringify (), após fazer armazenamento no formato string a recuperação dos objetos é realizada usando o método JSON.parse () que faz a conversão de string para JSON. Temos ainda que o local storage fornece significativamente mais espaço de armazenamento do que o limite de 4KB para cookies, ou seja, o Chrome e o Firefox suportam 5 MB por domínio e IE suporta 10MB.
Aplicações
O [Snapbird] é um exemplo de site que faz uso do local storage, a página apresenta algumas opções do que o usuário pretende recuperar de informações.
A página [MDNWebDocs] apresenta um exemplo de personalização de cores, fonte e background com o uso do armazenamento local, evidenciamos a persistência das escolhas salvas mesmo após reabrir a sessão conforme indicados na figura abaixo:
Desvantagens
Por ser uma ferramenta relativamente recente, o web storage ainda não é
suportado por um número de versões mais antigas do navegador e por isso os cookies ainda são o padrão para armazenar informações sobre o cliente nas interações do cliente com um servidor da web.
Suporte aos navegadores:
Conclusão
A versatilidade em apresentar interferência mínima com o usuário, bem como automatizar pequenos programas se configura com uma alternativa adicional em termos de armazenamento de dados, podendo a propriedade localStorage servir como possibilidade mais acessível considerando um pequeno banco de dados.
Referências:
- S. Z. Naseem, F. Majeed, “Extending HTML5 local storage to save more data; efficiently and in more structured way”, Digital Information Management (ICDIM) 2013 Eighth International Conference on, pp. 337–340, 2013. Artigo
- Local Storage: w3school
- Local Storage: Developer Mozilla
