O armazenamento do lado do cliente é essencial para aplicativos da Web. Pode não ser tão à prova de balas quanto o armazenamento do lado do servidor, mas, sem ele, os aplicativos da Web não seriam capazes de implementar muitos recursos modernos. Todos os tipos de recursos dependem do armazenamento do lado do cliente, desde sessões em jogos até carrinhos de compras em sites de comércio eletrônico.

O armazenamento do lado do cliente também permite que os aplicativos da Web implementem uma arquitetura centrada na privacidade. Você pode usá-lo para garantir que dados confidenciais nunca saiam do dispositivo de um usuário.

O que é armazenamento do lado do cliente?

No desenvolvimento da Web, o armazenamento do lado do cliente refere-se às várias maneiras pelas quais os navegadores da Web podem armazenar dados. Um aplicativo pode usar esses dados para fornecer funcionalidade aos usuários. O armazenamento do lado do cliente é fundamental por alguns motivos:

  • Os dados armazenados no cliente são significativamente mais rápidos para acessar, e seu aplicativo pode acessá-los sem a Internet.
  • O armazenamento do lado do cliente torna mais fácil para seu aplicativo lembrar as preferências de cada usuário.
  • Armazenar alguns dados permanentemente no cliente facilita a proteção da privacidade do usuário.
  • Armazenar todos os dados do aplicativo no servidor é caro, especialmente em grandes escalas.

Existem várias formas diferentes de armazenamento do lado do cliente que você pode usar em seus aplicativos da web.

Biscoitos

Um cookie de navegador é um dado de chave/valor armazenado como uma string em seu computador. Os navegadores enviam todos os cookies de um determinado site para o servidor do site em cada solicitação. Os cookies foram o primeiro (e por um tempo, o único) tipo de armazenamento do lado do cliente.

Não há limite oficial para o tamanho de um cookie, mas navegadores individuais colocam limites variados no tamanho e número de cookies que você pode definir. o RFC 6265 Seção 6.1 declara os seguintes recursos mínimos de cookies que os navegadores (agentes de usuário) devem fornecer:

As implementações práticas do agente do usuário têm limites no número e no tamanho dos cookies que podem ser armazenados. Os agentes de usuário de uso geral DEVEM fornecer cada um dos seguintes recursos mínimos:

  • Pelo menos 4096 bytes por cookie (conforme medido pela soma do comprimento do nome, valor e atributos do cookie).
  • Pelo menos 50 cookies por domínio.
  • Pelo menos 3000 cookies no total.

Os cookies podem permanecer no navegador por períodos de tempo variados. Alguns expiram no final de uma sessão de página e alguns têm datas de expiração arbitrárias que podem se estender até meses no futuro.

Os navegadores criam uma sessão de página quando você abre uma nova guia e a encerram quando você fecha a guia ou o navegador. Se você recarregar ou atualizar a página, o navegador não encerrará a sessão da página.

Casos de uso para cookies

Os cookies são mais adequados para armazenar pequenos dados que o servidor precisa ler ou modificar com frequência. Por quê?

  • Os cookies são anexados automaticamente a todas as solicitações de rede
  • Os cookies só podem armazenar pequenas quantidades de dados de string.

Você pode usar cookies para identificar um usuário (como um ID de sessão), registrar uma visita à página para fins de marcação ou armazenar a pontuação mais alta de um jogo.

Armazenamento local

Como um cookie, localStorage é um armazenamento de chave/valor que armazena dados de string. Embora os dois tipos de armazenamento sejam semelhantes, localStorage e cookies diferem de várias maneiras:

  • LocalStorage depende de JavaScript.
  • Os dados em localStorage residem principalmente no navegador. Você precisa enviá-lo deliberadamente para o servidor, em vez do navegador enviá-lo a cada solicitação.
  • LocalStorage não tem data de expiração. Ele persiste no cliente até que um desenvolvedor o exclua com JavaScript ou o usuário limpe o armazenamento do navegador.
  • LocalStorage tem uma capacidade de armazenamento muito maior. o Especificação do WHATWG não especifica um limite rígido, mas, de acordo com Wikipédia, o tamanho mínimo de localStorage entre os principais navegadores é de 5 MB:

Os navegadores restringem os cookies a 4 kilobytes. O armazenamento na Web oferece uma capacidade de armazenamento muito maior:

  • Opera 10.50+ permite 5 MB
  • Safari 8 permite 5 MB
  • Firefox 34 permite 10 MB
  • Google Chrome permite 10 MB por origem
  • Internet Explorer permite 10 MB por área de armazenamento

Casos de uso para LocalStorage

O LocalStorage é perfeito para armazenar uma grande quantidade de dados que o servidor raramente precisa consultar. Podem ser as configurações do usuário de um aplicativo, detalhes de configuração do tema ou os dados em um formulário preenchido recentemente. Isso ocorre porque o localStorage tem um limite de armazenamento muito maior do que os cookies, mas você precisa fazer um esforço extra para enviar seus dados ao servidor.

Se você armazenar os dados como JSON, poderá armazenar dados razoavelmente complexos usando localStorage, mesmo que ele só possa armazenar strings.

LocalStorage é vulnerável a Ataques XSS, portanto, você não deve armazenar dados confidenciais do cliente nele.

Armazenamento de sessão

SessionStorage é um armazenamento de chave/valor que funciona quase o mesmo que localStorage, Exceto por uma coisa. Os dados armazenados só persistem pela duração de uma sessão de página.

Casos de uso para armazenamento de sessão

Você pode usar SessionStorage para armazenar o mesmo tipo de dados que localStorage, mas somente quando os dados não precisam persistir além de uma sessão de página.

BD indexado

IndexedDB é uma API de navegador poderosa para armazenar grandes quantidades de dados estruturados. É um banco de dados transacional orientado a objetos que armazena dados em pares chave/valor.

Se você estiver lidando com quantidades menores de dados, localStorage/sessionStorage é a escolha melhor e mais fácil. Infelizmente, eles são limitados por sua capacidade de armazenamento e pelo fato de poderem armazenar apenas dados de string. IndexedDB não só permite armazenar diferentes tipos de dados, incluindo arquivos/dados binários, mas também pode armazenar muito mais dados. IndexedDB também constrói índices de seu conteúdo para permitir uma busca rápida no banco de dados.

Casos de uso para IndexedDB

IndexedDB é essencialmente um banco de dados NoSQL no navegador e pode armazenar grandes quantidades de dados. Qualquer caso de uso que exija o armazenamento de mais de 10 MB de dados é apropriado para IndexedDB.

Ao contrário das outras formas de armazenamento do navegador, IndexedDB não se limita a armazenar strings. IndexedDB pode armazenar dados de todos os tipos de JavaScript padrão. Se você criar um aplicativo da Web para trabalhar principalmente offline, poderá usar IndexedDB para armazenar todos os dados do aplicativo.

O armazenamento do lado do cliente é flexível e poderoso

O termo armazenamento do lado do cliente refere-se ao armazenamento de dados do aplicativo no navegador. O armazenamento do lado do cliente é essencial para o funcionamento da maioria dos aplicativos da Web modernos. Existem vários tipos de armazenamento do lado do cliente: cookies, local/sessionStorage e IndexedDB.

Todos os tipos de armazenamento do navegador têm limites variados em sua capacidade e no tipo de dados que podem armazenar. Cookies são o tipo mais limitado, local/sessionStorage é o mais conveniente e IndexedDB é o mais poderoso.