Você conhece as diferenças entre os tipos de armazenamento do navegador?

Os navegadores web oferecem vários mecanismos de armazenamento para desenvolvedores, cada um com finalidades e características distintas. Aqui estão alguns dos principais tipos de armazenamento no navegador:

localStorage:

Tipo: Armazenamento de chave-valor. Capacidade: Geralmente, em torno de 5 a 10 MB por domínio. Persistência: Permanece após o fechamento do navegador. Uso Comum: Armazenamento de dados locais para a aplicação, como configurações do usuário, preferências e dados pequenos.

sessionStorage:

Tipo: Semelhante ao localStorage, é um armazenamento de chave-valor. Capacidade: Semelhante ao localStorage, mas é limitado ao ciclo de vida da sessão do navegador. Persistência: Os dados são removidos quando a sessão do navegador é encerrada (quando o navegador é fechado).

Cookies:

Tipo: Texto pequeno armazenado como pares de chave-valor. Capacidade: Limitado a cerca de 4 KB por cookie e 20 cookies por domínio. Persistência: Pode ser configurado para expirar após um tempo específico ou permanecer após o fechamento do navegador. Uso Comum: Armazenamento de dados temporários, como preferências do usuário e informações de sessão.

IndexedDB:

Tipo: Banco de dados NoSQL orientado a objetos. Capacidade: Varia de navegador para navegador, geralmente maior que localStorage. Persistência: Permanece após o fechamento do navegador. Uso Comum: Armazenamento de grandes volumes de dados estruturados, como dados offline para aplicativos da web.

Web SQL Database (Obsoleto):

Tipo: Banco de dados relacional baseado em SQL. Capacidade: Geralmente maior que localStorage. Persistência: Permanece após o fechamento do navegador. Nota: Embora tenha sido uma especificação, o Web SQL Database foi marcado como obsoleto e não é mais amplamente suportado. IndexedDB é uma alternativa mais moderna.

Cache:

Tipo: Cache de recursos da web, como arquivos CSS, JavaScript e imagens. Capacidade: Variável, dependendo do navegador. Persistência: Pode ser configurado para persistir, mesmo após o fechamento do navegador. Uso Comum: Armazenamento de recursos para fornecer uma experiência offline e melhorar o desempenho da aplicação.

A escolha entre esses mecanismos de armazenamento depende dos requisitos específicos da aplicação, como tamanho dos dados, persistência necessária, ciclo de vida dos dados e complexidade da estrutura de dados. Cada tipo de armazenamento tem seus pontos fortes e limitações, e é importante escolher aquele que melhor se adequa aos requisitos da sua aplicação.

ThomasAlmeidaano passado

Usei muito LocalStorage e IndexDB pra entender como um banco funciona e depois iniciar os estudos em backend, acho uma ótima alternativa para persistir dados em projetos de estudo, acredito que todo dev frontend que passa a usar esses tipos de dados deva ver isso e testar como uma forma inicial de entender na prática como um backend estrutura as coisas, enfim meus 2 centavos pra contribuir kkk

thiagoomatheusano passado

Assim como o ThomasAlmeida comentou, também usei algumas das alternativas antes de aprender mais sobre banco de dados.

Para quem ainda está iniciando em JS e quer ter noção de como fazer um CRUD básico, o localStorage é uma ótima opção.

Mas, aproveitando a oportunidade, vai uma dúvida aí: Quando uma preferência de usuário é salva no navegador (cliente), por exemplo, o tema, quando a aplicação é iniciada no servidor ela virá com o tema padrão, só depois ele vai puxar a preferência no navegador e atualizar. Qual seria uma forma viável de a tela não "piscar" com o tema padrão (servidor), para só depois ir para o tema do usuário (cliente)?

Perdoe-me se houver alguma ignorância na pergunta.

DomingosRodriguesano passado
Olá, Thiago! Acredito que uma forma de resolver isso é trazer a página do servidor já renderizada com o tema escolhido pelo usuário. Para isso, antes de trazer a página renderizada será necessário checar se há alguma escolha de tema no localStorage. Se houver, a página será renderizada e servida já no tema escolhido.
thiagoomatheusano passado
Mas, uma dúvida... o armazenamento no navegador faz parte do lado do cliente. Se faz parte do cliente, ao checar no servidor se há algo no localStorage, a resposta sempre será nula, afinal, no servidor o localStorage não existe. Seria isso mesmo?
TiagoVelano passado
A pergunta não foi para mim mas acho que posso responder rs Assim como você afirmou, no servidor não existe localStorage e mesmo se existisse concerteza não seria o mesmo do que o localStorage do frontEnd Para isso existe os cookies, os cookies podem ser acessador pelo servidor, já que os mesmos são enviados na requisição https. Exemplo em PHP: ```php if(isset($_COOKIE["theme"])){ $value = $_COOKIE["theme"]; }else{ echo "Invalid theme"; } ``` Exemplo em nodeJS: ````javascript const express = require("express"); const cookieParser = require("cookie-parser"); const app = express(); app.use(cookieParser()); var value; app.get("/",(req,res) => { if(req.cookies["theme"]){ value = req.cookies["theme"]; }else{ console.log("Invalid theme"); } //res.send(...) }); //Iniciar servidor... ```
thiagoomatheusano passado
Valeu TiagoVel! Agradeço pela resposta. Obrigado pelos exemplos também.
DomingosRodrigueshá 5 meses
Nao vi sua segunda dúvida a tempo. Mas é isso aí que o TiagoVel disse. Além, disso, é, alguns framework existem bibliotecas para integrar o armazenamento do navegador ao servidor. Para o NextJs há a lib Nookies, por exemplo.
TiagoVelano passado

Ótimo conteudo! outas formas de armazenar dados é com a File and Directory Entries API e File System API. Ambas fornecem métodos para armazenar pastas e arquivos em uma sandbox.

douglaslealano passado

Bacana seu texto. Bem claro e objetivo! Parabéns.

kayqueprogramano passado

Pelo que eu entendi, eu posso escolher qualquer um desses, pra armazenar todo o tipo de dado, eu só preciso escolher o que mais se adequa a minha necessidade