Como usar o armazenamento local para JavaScript

Criar um aplicativo de afazeres geralmente é o primeiro aplicativo que você aprende a criar em JavaScript, mas o problema com todos esses aplicativos é que, quando você recarrega a página, todas as tarefas pendentes desaparecem.

Há uma solução simples, e isso é usar o armazenamento local. O bom do armazenamento local é que você pode salvar esses bits de dados no computador do usuário para que, quando recarregarem a página, todos os seus itens ainda estejam lá e o armazenamento local seja bastante simples quando se trata de salvar os dados e fazer está disponível na página.

O que é armazenamento local?

O armazenamento local é uma parte do armazenamento na Web, que faz parte da especificação do HTML5. Existem duas opções para armazenar dados na especificação:

• Armazenamento local: armazena dados sem data de validade e é esse que usaremos porque queremos que nossas tarefas permaneçam na página pelo maior tempo possível.
• Armazenamento de sessão: salva apenas os dados de uma sessão, portanto, se o usuário fechar a guia e reabri-la, todos os dados desaparecerão.

Em termos simples, tudo o que o armazenamento na Web faz é armazenar pares de chave / valor nomeados localmente e, ao contrário dos cookies, esses dados persistem mesmo que você feche o navegador ou desligue o computador.

O HTML

Se pensarmos em uma lista de tarefas, o que precisaremos é:

• Uma entrada para colocar nossa tarefa.
• Um botão de entrada para adicionar nossa tarefa.
• Um botão para limpar todas as tarefas.
• Uma lista não ordenada de espaço reservado onde as nossas tarefas serão colocadas nos itens da lista.
• E, finalmente, precisamos de um espaço reservado para mostrar um alerta quando você tenta inserir um vazio para fazer.

Então, nosso HTML deve ser algo como isto:

  
      Clear All  
  
  

É um marcador HTML bem padronizado e com nosso javascript podemos preencher tudo isso com conteúdo dinâmico.

Já que usaremos o jQuery neste exemplo, você também deve incluí-lo em seu documento HTML.

O JavaScript

Se pensarmos sobre a estrutura de um aplicativo de tarefas simples, a primeira coisa que precisamos fazer é verificar quando o usuário clica no botão Adicionar e verificar se a entrada tem um valor vazio, da seguinte forma:

$('#add').click( function() {var Description = $('#description').val();//if the to-do is emptyif($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;}

Tudo o que fizemos foi verificar um clique no botão Adicionar e executar um teste simples para verificar se o usuário preenchia a entrada com algo. Se não, o alerta div entra e permanece por 1000ms e depois desaparece. Finalmente, retornamos false para que o navegador não leia o restante do script e ainda adicione o item da lista.

A próxima coisa que precisamos fazer é inserir um item de lista com o valor na entrada e vamos prefixar isso para que, quando o usuário adicionar uma tarefa, ele sempre vá para o início da lista e salve esse item da lista para armazenamento local, assim:

   // add the list item$('#todos').prepend("
" + Description + "
");// delete whatever is in the input$('#form')[0].reset();var todos = $('#todos').html();localStorage.setItem('todos', todos);return false;});

Como você pode ver, é um jQuery bastante padrão e, quando se trata de armazenamento local, precisamos salvar uma chave e um valor. A chave é um nome que definimos para nós mesmos e neste caso eu chamei de 'todos' e então precisamos especificar o que realmente queremos salvar, e nesse caso é todo o HTML que é colocado dentro da lista não ordenada de todos . Como você pode ver, nós apenas pegamos isso usando jQuery e finalmente retornamos false para que o formulário não seja enviado e nossa página não seja recarregada.

Nosso próximo passo é verificar se temos algo no armazenamento local já salvo em nossa máquina e se precisamos colocar isso na página, então desde que nós demos à nossa chave o nome de todos nós precisamos checar sua existência da seguinte forma:

// if we have something on local storage place thatif(localStorage.getItem('todos')) {$('#todos').html(localStorage.getItem('todos'));}

Usamos uma instrução if simples para verificar e, em seguida, apenas recebemos o que temos no armazenamento local e o colocamos como o HTML da lista não ordenada do item pendente.

Se você testar nosso aplicativo simples e nós recarregarmos a página, veremos que ela já está funcionando e tudo que nos resta é criar a função para quando o usuário escolhe limpar todas as tarefas; quando isso acontecer, limparemos todo o armazenamento local, recarregaremos a página para que nossas alterações entrem em vigor e, em seguida, retornemos false para evitar o hash na frente da URL da seguinte forma:

// clear all the local storage$('#clear').click( function() {window.localStorage.clear();location.reload();return false;});

Com isso concluído, nosso aplicativo está funcionando perfeitamente. O código completo é assim:

$('#add').click( function() {var Description = $('#description').val();if($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;}  $ ('# todos'). prepend (" 
  "+ Descrição +" 
  "); $ ('# form') [0] .reset (); var todos = $ ('# todos'). html (); localStorage.setItem ('todos', todos); retorno falso;}); if (localStorage.getItem ('todos')) {$('#todos').html(localStorage.getItem('todos'));}  $ ('# clear'). clique (function () {window.localStorage.clear (); location.reload (); retorno falso;}); 

Suporte de Navegador

O suporte para armazenamento na web é muito bom para uma especificação HTML5; Ele é suportado por todos os principais navegadores e até pelo IE8, então a única coisa que você precisa ter cuidado é o IE7, se ainda estiver suportando isso.

Conclusão

O armazenamento local em pequenos aplicativos como esse pode muito bem receber substitutos para bancos de dados. Armazenar pequenas quantidades de dados não precisa ser complexo.

Como você armazena dados de JavaScript? Você prefere cookies ou bancos de dados ao armazenamento local? Deixe-nos saber nos comentários.

Imagem em destaque / miniatura, imagem de armazenamento via Shutterstock.