Armazenamento de dados no Browser

Blog fellyph cintra - Performance Thumb

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

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.

Suporte dos navegadores a IndexDB para armazenamento de dados no browser

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.

Armazenamento no browser do usuário com Cache API

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

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.