Cookies – o passado
Para entendermos a vantagem obtida na utilização do WebStorage vamos compreender como uma aplicação trabalha(va) com cookies.
Os cookies são inseridos no cabeçalho HTTP, sendo assim, sua performance pode ser comprometida. E estando as informações no cabeçalho HTTP, podemos nos perguntar: o quão protegidas elas estão?
Outro desafio que se apresenta ao se trabalhar cookies é a capacidade de armazenamento: 4kB por cookies vezes no máximo 20 cookies é igual a capacidade de 80 kB. Essa restrição de capacidade por si só já é um problema, mas ela acarreta outro dificuldade, o gerenciamento destes cookies.
Pense que em uma aplicação que real seria muito útil armazenar mais do que 80 kB, para fazer isso com cookies seria necessário estabelecer um controle de validade dos cookies, essa seria uma maneira muito inteligente de utilizar cookies – afinal ele precisar estar armazenado somente enquanto for necessário, mas o trabalho para controlar as datas de validade dos cookies seria um trabalho que requisitaria calcular seus tempos de validade, mais código.
WebStorage – o presente e suas vantagens.
As limitações dos cookies já foram citadas, mas o WebStorage é melhor no itens citados? SIM.
Vamos ver como o WebStorage é melhor.
Mas em primeiro lugar vamos falar de segurança.
Os pares de chave e valor gravados pela WebStorage não podem ser acessados por outros subdomínios. Isso garante que caso você use o WebStorage para gravar dados com sigilo. Isso faz com que ele não corra o risco de ser acessado por outro domínio.
Sobre a capacidade de armazenamento, temos o suficiente para trabalharmos bem. A API permite armazenamentos entre 2,5 MB até 10 MB. Esse espaço é suficiente para podermos trabalhar com folga, principalmente se compararmos com a capacidade permitida para se trabalhar com os cookies.
Com este espaço disponível talvez você não precise se preocupar com o controle de validade dos dados. Mas caso você queira controlar o período em que os dados estarão gravados no navegador do usuário, você pode fazer isto. Para tanto, temos que entender o desdobramento do conceito do WebStorage: localStorage e sessionStorage.
Este último manterá os dados salvos enquanto o navegador estiver aberto. Isso é muito útil, pois nem sempre queremos que os dados estejam sempre disponíveis. Enquanto o localStorage manterá o dado gravado até que ele seja removido diretamente, você poderá fechar o navegador, reiniciar o computador e os dados ainda estarão lá.
Exemplo
Não há melhor maneira de aprender do que fazendo. Vamos construir uma calculadora em que seja possível salvarmos os valores calculados e visualizá-los ao lado, e sempre que o usuário desejar ver os resultados calculados ele poderá fazer isto, mesmo após ter fechada a sessão. Então vamos ao exemplo.
Primeiro vamos construir a estrutura do nosso documento html, nele usaremos a biblioteca jquery para facilitar a construção do nosso script. Também teremos uma tag input onde serão apresentados os dígitos clicados, em seguidas temos os botões com os numeros de 0 à 9, com as operações de SOMA, MULTIPLICAÇÃO, DIVISÃO e SUBTRAÇÃO, PARÊNTESES e os botões de SALVAR – que irá salvar o valor da tag input no localStorage – ,LISTAR que ira pegar todos os valores listados no localStorage e colocar em uma tabela e o botão APAGAR que deletará todos itens do localStorage, também temos a tabela onde serão colocados os valores encontrados no localStorage :
Criado o documento acima vamos construir nossa lógica.
O que queremos primeiramente é pegar o valor clicado nos números e colocá-los no input. Para isso vamos usar o evento clique que será atribuído aos botões dos números por meio da classe btnNumber, e dentro da função atribuída colocaremos o valor clicado mais o valor que ele terá.
Agora o que queremos é fazer o mesmo para pegarmos as operações clicadas. A lógica é a mesma, mas adicionaremos uma tratativa para acaso o botão de operação clicado seja o LIMPAR. Se clicar no botão LIMPAR o valor da tag input será esvaziado.
Bem, isso é uma calculadora, então temos que calcular. É neste momento onde gosto de expressar o amor ao javascript, basta passarmos a string com a conta montada na tag input para o método eval( ), para que ele execute o cálculo. O código abaixo mostra a atribuição da função e a execução do calculo e em seguida coloca o valor na tag input.
Finalmente vamos ao WebStorage, porque queremos gravar os valores e deixá-los disponíveis. Para gravarmos um valor no localStorage usamos o setItem(chave,valor), sempre gravaremos um par de chave e valor no WebStorage. Sabemos que queremos gravar o valor do resultado, mas a chave vamos deixar nas mãos do usuário. Quando ele clicar em salvar vamos dar ao usuário a opção dar um nome aquele resultado, e este nome será a chave a ser gravada com o valor.
Temos o botão LISTAR que pegará todos os valores salvos no localStorage e colocará na tabela abaixo da calculadora. Para pegarmos um valor usamos o getitem(chave), para sabermos quantos itens temos no localStorage usamos o localStorage.length e para pegar a chave usamos localStorage.key(index). Utilizando um while varremos localStorage e inserimos os valores na tabela.
A ultima lógica é a de limpar o localStorage com os dados salvos. Usamos o localStorage.clear() para limpar todos os itens. Veja como:
Estilo é importante, não é o nosso foco, mas é importante, então vamos implementar algum estilo.
Este é o código que temos.Vamos ver como o navegador (Chrome) nos possibilita inspecionar o elemento.
Execute o documento no navegador e aperte F12. Aparecerá a tela do lado direito aperte a seta à esquerda do Local Storage para visualizar os dados salvos pelo documento em execução. No caso abaixo, ainda não temos nenhum valor salvo.
Faça qualquer conta.
Agora clique em igual (=) para obter o resultado.
Clicando em salvar, abriremos um prompt para ser digitado o nome do resultado que será utilizado para identificar o valor.
Depois de clicar em OK, abra o inspetor de elementos Developer Tools clique no botão de refresh no rodapé e você verá o valor salvo.
Execute mais um calculo e salve seu valor. Agora clique em LISTAR VALORES e assim serão exibidos todos os valores no localStorage.
Clicando em APAGAR VALORES os dados sumirão e não serão mais visualizados no Developers Tools e não serão listados na tabela.
Para finalizarmos temos que esclarecer que a maneira de se usar o sessionStorage é a mesma do localStorage. O que deve ficar claro é que ao usar o sessionStorage todos os dados salvos serão perdidos ao se fechar o navegador. O exemplo acima pode ser adaptado ao sessionStorage sem problemas. Veja o exemplo funcionando: EXEMPLO
Bons estudos e bom trabalho!
