Armazenadores de dados do navegador

Já aconteceu de você preencher um formulário de cadastro em algum site, e o navegador já sugerir quais são suas informações de nome completo, endereço e celular? Ou após você pesquisar sobre algum produto, começar a ver anúncios sobre ele em vários sites? Saiba que nada disso acontece do nada! Essas informações são salvas propositalmente no que chamamos de armazenamento de dados locais. Esse armazenamento é composto por APIs do JavaScript que permitem salvar informações no navegador da pessoa usuária (client side) para diversas finalidades, podendo ser para melhorar a experiência da pessoa usuária, ou até mesmo viabilizar o funcionamento de uma aplicação.

Este é um assunto que vale muito a atenção para você, pessoa desenvolvedora Front-end, se aprofundar e dominar, então vamos abordar neste artigo quais são os principais armazenadores de dados do navegador utilizados atualmente.

O primeiro deles é o localStorage, ele guarda informações de forma persistente no navegador, ou seja, mesmo após você fechar e abrir o navegador, as informações vão continuar salvas. O seu armazenamento máximo é em média 5MB, podendo variar dependendo do navegador utilizado. Este limite de armazenamento pode ser aumentado pela pessoa usuária quando necessário, no entanto apenas alguns navegadores suportam isso.

O localStorage salva dados do tipo string texto, sendo ideal para salvar, por exemplo, informações de login ou de um formulário padrão, porém essas informações coletadas geralmente estão inseridas em objetos no JavaScript. Nesse caso, é preciso utilizar JSON com o método JSON.stringify() para transformar esse objeto em uma string, antes de enviá-lo para o localStorage, como no exemplo abaixo:

const livro = {
    nome: "Cangaceiro JavaScript",  
    autor: "Flavio Almeida",
    editora: "Casa do Código",
    idioma: "Português",
    estoque: 30
};
localStorage.setItem('livro', JSON.stringify(livro));

No primeiro parâmetro é passada a chave e o segundo é o json convertido em texto.

Já para retornar este dado do localStorage como objeto novamente, é possível utilizar o método JSON.parse():

JSON.parse(localStorage.getItem('livro'));

É necessário passar para o getItem apenas uma chave.

Existem também outros métodos para fazer essa manipulação de dados, este foi apenas um exemplo básico para vermos na prática e não ficar apenas na imaginação.

Já o sessionStorage não guarda dados de forma persistente, ou seja, após fechar o navegador, ou até mesmo apenas a aba do site, esses dados são perdidos. Sua capacidade de armazenamento varia entre 5MB e 10 MB. Este tipo de API é utilizada quando queremos que a pessoa usuária utilize dados apenas enquanto estiver com o site aberto.

O armazenador Cookie guarda dados de forma persistente no navegador, sua capacidade máxima é de 4 KB. Cada cookie é como se fosse um arquivo que guarda certos dados. Porém, quais são os tipos de dados que os cookies guardam? Eles servem para identificar e rastrear o seu computador e seus dados de navegação. Desde a localização de onde um site foi acessado, quanto tempo você ficou nele ou quais produtos foram clicados. É possível até mesmo lembrar o login de um site que você já acessou ao acessá-lo novamente. Ou seja, ele é interessante tanto para melhorar a experiência da pessoa usuária, como também para o interesse de alguma loja online saber qual produto você tem pesquisado e mostrar ele em anúncios o tempo todo.

Cookies não conseguem infectar um computador com vírus, e a maioria são inofensivos. Porém, eles não estão sendo mais indicados, e a razão eu considero bastante plausível. Quando você acessa um site que possui anúncios ligados a sites de terceiros, cada anúncio pode ter um cookie próprio, e esses não geram pop ups pedindo sua autorização, eles já coletam dados indiscriminadamente. Ou até mesmo um servidor de um site seguro pode sofrer um ataque hacker e ter sua coleção de cookies de seus usuários vazada. E pior, essas informações podem ser vendidas para sites de terceiros para diversos interesses que podem não ser do seu agrado.

Até aqui vimos algumas limitações das APIs citadas acima. Cookies têm sérios problemas na questão de proteção de dados. LocalStorage e sessionStorage possuem limitações na capacidade armazenamento e de tipos de dados armazenados, ambos também são APIs que funcionam apenas de forma síncrona e não possuem acesso por web workers e service workes. Essas limitações acabaram por abrir espaço para outras soluções de armazenamento. Uma delas é o IndexedDB, que vamos conhecer mais a seguir:

O IndexedDB (Indexed Database) é mais do que apenas um armazenador de dados no navegador, como o nome já diz, ele é um indexador de banco de dados. Sua capacidade de guardar dados é enorme comparado ao localStorage ou Cookies, e a diversidade de tipos de dados também, permitindo guardar até mesmo objetos da linguagem JavaScript. Ele funciona de forma síncrona ou assíncrona, possuindo acesso por web workers e service workers.

Existem alguns pontos de atenção ao usar o IndexedDB. Como ele não é um banco de dados, e guarda tudo no navegador da pessoa usuária (client side), caso você precise atualizar essa base de dados (data base), será necessário solicitar uma atualização (update).

Caso uma aplicação que utilize IndexedDB demande guardar muitos dados no navegador de seus usuários, pode acabar esbarrando no limite de capacidade de armazenamento do próprio navegador, ou caso a aplicação seja acessada por um usuário anônimo, não será possível guardar dados em um navegador que a sua aplicação não consegue identificar. Você, como pessoa programadora, precisa usar sua criatividade para preparar sua aplicação para lidar com esses casos.

Pelas diferentes formas de uso, e pela possibilidade de conexão com banco de dados, a complexidade de implementação do IndexedDB é alta, quando comparada com as outras APIs vistas neste artigo. Aprofundando mais o assunto sobre manipulação de dados, existe também uma outra opção popularmente conhecida, o MySQL (não confundir com Web SQL que foi descontinuado), este já é um banco de dados de fato, e vale muito você investir seu tempo de estudo para aprender sobre ele, o MySQL é mantido pela Oracle, e possui seu código fonte aberto, dessa forma, você pode baixá-lo e personalizar para adequar ao seu projeto, e além disso, o seu uso é grátis.

Como pessoa programadora, nosso esforço é fazer abstrações corretamente e entender quais APIs são ideais para cada caso, eu espero que esse artigo possa ter lhe dado a clareza necessária para te orientar nessas escolhas quando chegar o momento.

Se você ficou com vontade de aprender na prática sobre algumas dessas APIs, separei alguns cursos aqui da plataforma Alura para te ajudar a economizar tempo:

Se o seu foco no momento é aprender sobre localStorage, indico o curso JavaScript na Web: armazenando dados no navegador, realizado pelo instrutor Pedro Marins.

Se deseja aprender sobre IndexedDB, o curso JavaScript: salvando dados localmente com indexedDB, realizado pelo instrutor Flavio Almeida é ideal para te guiar nessa missão.

E se o seu foco é mergulhar em um banco de dados de fato, que salva dados no servidor (server side), até já saindo da área de front-end (e tudo bem, porque conhecimento nunca é demais), indico essa formação completa: SQL com MySQL Server da Oracle, onde o instrutor Victorino Vila vai te guiar ao longo de cinco cursos, para que você tenha bastante êxito na área de dados!