Como utilizar o Local Storage do Javascript

Criar uma aplicação com Javascript é realmente muito fácil, em poucos passos você pode criar um protótipo, ou até mesmo uma aplicação completa. Seja a sua aplicação grande ou pequena, ela certamente depende do armazenamento de dados. A forma mais comum de armazenamento de dados em aplicações é o “Banco de Dados”, geralmente SQL, mas para utilizar o banco de dados é preciso atender a uma série de requisitos como:  

– Ter um servidor com uma base de dados instalada.

– Conhecer e saber modelar um banco de dados.

– Ter uma linguagem de programação que servirá de interface para acessar o banco de dados (Criar, Ler, Atualizar e Remover dados).

Todos os 3 requisitos que eu apresentei podem ser quebrados em vários outros que são dependentes destes. Ao final você vai ter um caminhão de 2 eixos pra transportar uma única bicicleta.

Se o banco de dados é muito recurso para o que você está pensando, o Local Storage é a ferramenta essencial para você utilizar em sua aplicação. Fácil de usar e prático de implementar. O Local Storage não exige nenhum pré-requisito externo a não ser que sua aplicação esteja sendo utilizada em um navegador ou equivalente.

Antes de tudo, o que é uma API?

Uma API é um conjunto de instruções utilizadas para acessar algum recurso específico. Em palavras mais simples, é uma “ponte” entre sua aplicação e algum recurso disponível.

O que é a API Local Storage

Local Storage é uma API do navegador utilizada para armazenar dados no navegador do usuário de algum site ou sistema. Os dados não possuem prazo de validade, por tanto, eles vão ficar armazenados mesmo que o site ou o navegador sejam fechados. No entanto vale ressaltar que se o navegador for deletado os dados deixarão de existir.

Como utilizar a API Local Storage

Utilizar a API do Local Storage é mais fácil do que você pensa. A API fica disponível por meio da variável do Javascript localStorage,  é por meio dela que acessamos a API e fazemos todas as nossas chamadas.

    // 01 - Armazena os dados no Local Storage.
    localStorage.setItem('dados', 123);

    // 02 - Busca os dados do Local Storage.
    const dados = localStorage.get('dados');
    
    // 03 - Remove um item específico do Local Storage.
    localStorage.remove('dados');
    
    // 04 - Limpa todos os dados do Local Storage.
    localStorage.clear();

Fácil demais para ser verdade, não é mesmo?

O pulo do gato na API Local Storage

Existe uma sacada no Local Storage que é importante ser ressaltada. O Local Storage armazena apenas dado em forma de String, ou seja, você vai ter que converter os seus dados para String antes de guardá-los para não ter nenhuma surpresa quando for utilizá-los após uma consulta. No caso dos tipos primitivos de variáveis como Number e Boolean, a conversão é feita automaticamente.

Armazenando os dados no Local Storage

Para que você não tenha nenhum problema para utilizar o Local Storage vamos utilizar o Objeto JSON para converter os nossos dados em string. Quando formos consultar os dados utilizando o getItem  do Local Storage, vamos utilizar um outro método do Objeto JSON  para reverter o processo.

    // Objeto que será armazenado.
    const usuario =
    {
        id: 1,
        nome: "Jose",
        perfil: 2,
        dataNascimento: new Date()
    };

    // Converte os dados para uma String.
    const stringUsuario = JSON.stringify(usuario);

    // Armazena os dados em forma de string no Local Storage.
    localStorage.setItem("dados", stringUsuario);

    // Recupera os dados do usuário em forma de String.
    var usuarioLocal = localStorage.getItem('dados');

    // Converte a string para a notação JSON.
    var objetoUsuario = JSON.parse(usuarioLocal);

Desta forma estamos primeiramente convertendo nosso objeto para uma string utilizando o método JSON.stringify(). Quando vamos recuperar os dados, utilizamos o método JSON.parse() para converter nosso objeto novamente para o formato de objeto do Javascript. Assim mantemos a nossa estrutura de dados, sem perder a “tipagem”.

Conclusão

Criar aplicações utilizando o Local Storage é muito fácil, em poucos passos é possível armazenar os dados necessários. É preciso ser cuidadoso no entanto com o tipo de informação que você armazena, pois esta informação fica exposta para qualquer pessoa que utilize o navegador. Fique ligado para receber mais novidades sobre as API’s do Javascript. Não esquece de se inscrever para receber as notificações!

Referências

Leave a comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Copyright © – Jonatan Pietroski