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
Deixe um comentário