Armazenamento de dados no Browser

Armazenamento de dados no Browser ou client-side é algo possível por diferentes APIs, no passado tivemos o uso de Cookies agora temos localStorage, sessionStorage, IndexedDB e CacheStorage API. Sem uso de back-end ou bibliotecas externas, suporte direto do Browser.

Nesse post iremos entender a diferença entre os tipos de armazenamento de dados no Browser e quando utiliza-los.

Súmario do conteúdo

• Armazenamento de dados no Browser com Cookies
• LocalStorage e SessionStorage
• SessionStorage
• LocalStorage
• IndexedDB
• CacheStorage API
• O que podemos armazenar com cacheStorage API?
• Armazenamento de dados no Browser do usuário com PWA
• Quanto eu posso armazenar?

Armazenamento de dados no Browser com Cookies

Por muitos e muitos anos cookies foram utilizados para persistir dados na web, com o passar dos anos esse recurso evoluiu e passou por algumas melhorias mas também criou problemas relacionados a privacidade. Nos últimos anos os principais navegadores implementaram restrições ao uso de Cookies. Recentemente Chrome, Firefox e Edge implementaram restrições de uso de cookies em aplicações com domínios diferentes.

Já é público por parte do time do Chrome a descontinuação de suporte ao uso de Cookies.

LocalStorage e SessionStorage

Posso fala que é o modo mais simples de armazenamento e dados no Browser do usuário. Introduzidos no HTML5 ambas permitem o armazenamento de texto no browser do usuário com um limite de até 5MB na maioria dos Browsers

SessionStorage

Como o nome sugere permite o armazenamento de dados na sessão do usuário(aba), quando a aba for fechada os dados serão removidos. Ela pode ser utilizadas em conjunto com outras APIs, com o armazenamento de dados temporário.

LocalStorage

A sua utilização é simples, mas atualmente o seu uso é pouco recomendado já que a IndexedDB disponibiliza mais recursos para armazenamento a longo prazo. Além disso, a localStorage possuí as suas limitações:

• A sua execução é síncrona
• Tem uma limitação de armazenamento 5mb
• E não possui acesso por service workers e web workers

IndexedDB

Banco de dados não relacional(noSQL) para armazenamento de dados no broswer que realiza transações assíncronas. Com a IndexedDB conseguimos armazenar objetos e realizar consultas através de índices. Com IndexedDB conseguimos trabalhar com, objetos, texto, arquivos e blobs.

Diferente da LocalStorage a IndexedDB possui acesso por web workers e service workers, nesse caso sendo um item crucial para armazenamento de dados no browser de maneira offline em uma progressive web app.

Umas das desvantagens da IndexedDB é a complexidade de se trabalhar com essa API, o seu comportamento pode ser simplificado por libs externas além da adição de recursos extras como, Promises.

CacheStorage API

A Cache API é um sistema de armazenamento de requisições e respostas realizadas a rede. Podemos armazenar requisições realizadas durante a execução da aplicação ou podemos armazenar requisições em background somente para uso de dados.

A API foi criada para permitir que service workers realizassem cache de requisições feitas a rede para permitir respostas rápidas ou reduzir um impacto na latência de conexões de dispositivos móveis.

O que podemos armazenar com cacheStorage API?

Apenas Requisições e respostas HTTP. Entretanto, essas requisições podem conter qualquer tipo de dados transferido sobre o protocolo HTTP, por exemplo:

• Imagens
• Páginas
• JavaScript
• Arquivos CSS
• Objetos JSON

Armazenamento de dados no Browser do usuário com PWA

Numa recomendação geral podemos classificar da seguinte forma:

• Para recursos da aplicação como arquivos: Cache API Storage
• Para dados e consulta: IndexedDB

Porque não é recomendado o uso de SessionStorage ou LocalStorage para PWAs? Simplesmente pela limitação de ter acesso por service workers, mas o recurso pode se utilizado como um fallback para navegadores que não possuem suporte a Service Worker.

Quanto posso armazenar?

Essa informação pode variar por navegadores, em geral, falamos de centenas de megabytes, para uma aplicação Web é bastante.

• Chrome permite utilizar 60% do total do espaço em disco para diferentes domínios e APIs
• Internet Explorer 10 permite 250 MB no total, mas irá avisar o usuário quando a aplicação utilizar mais de 10 BM
• Firefox tem um limite de 2 GB, mas você pode determinar quanto espaço você terá disponível com a StorageManager API
• Safari irá permitir até 1 GB e irá requisitar permissão ao usuário quando atingir 200 MB.

Esse post serviu como uma introdução, mas já fez um post no canal sobre LocalStorage a alguns anos você pode conferir aqui: LocalStorage: Armazenando dados com JavaScript